I was trying to implemented the thumbs up icon but was not able to make it work. When ever I would try to add they disappear. I hope someone can help me.
my code:
<br/><br/>
<br/>
<form action="{% url 'like_post' post.pk %}" method="POST">
{% csrf_token %}
<button type='submit', name='post_id', value="{{ post.id }}", class="btn btn-primary btn-sm">Like</button>
<br>
{{ total_likes }} Likes
</form>
Thumbsup code needed:
<i class="fas fa-thumbs-up"></i>
Related
I am having a problem putting icon from font awesome and form input in the same column.
<div class="form-group">
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
{{ form.media }}
<div class="row pt-3">
<i class="fa fa-user fa-lg">{{ form.username }}</i>
</div>
</form>
</div>
With the code above, it looks a screenshot bellow:
I would like to look like the image bellow:
Thank you for your help.
It's better to deal with boxes with flexbox rather than row for more alignment flexibility.
Try the following code
<div class="form-group">
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
{{ form.media }}
<div class="d-flex pt-3">
<i class="fa fa-user fa-lg mr-2 "></i>{{ form.username }}
</div>
</form>
</div>
the login works perfectly fine with the simple form
but when I try to add bootstrap/css/js to it , its doesn't work anymore the
{% if error %}
<span class="error">{{ error.messageKey }} </span>
{% endif %}
shows ( Invalid credentials. ) error!
I just cant find where is the error
Here is the code of the simple form :
<form action=" {{ path ('login') }} " method="POST">
<input type="text" name="_username" value"{{ last_username }}" placeholder="username here.">
<input type="password" name="_password" >
<button type="submit"> login </button>
</form>
here is the code of the form (with css/bootstrap/js)
<form action=" {{ path ('login') }} " method="POST" class="login100-form validate-form">
<div class="login100-form-avatar">
<img src="{{ asset('/logo.jpg') }}" alt="AVATAR">
</div>
<span class="login100-form-title p-t-20 p-b-45">
Bazar-Chic Login page
</span>
<div class="wrap-input100 validate-input m-b-10" data-validate = "Username is required">
<input class="input100" value="{{ last_username }}" type="text" name="_username" placeholder="Username">
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-user"></i>
</span>
</div>
<div class="wrap-input100 validate-input m-b-10" data-validate = "Password is required">
<input class="input100" type="password" name="pass" placeholder="Password">
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-lock"></i>
</span>
</div>
<div class="container-login100-form-btn p-t-10">
<button class="login100-form-btn">
Login
</button>
</div>
<div class="text-center w-full p-t-25 p-b-230">
<a href="#" class="txt1">
Forgot Username / Password?
</a>
</div>
<div class="text-center w-full">
<a class="txt1" href="http://127.0.0.1:8000/register">
Create an account
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</form>
As Barbie said the problem was with the name of the input.
(name="pass" => name="_password")
The problem is solved and the topic can be locked!
Thank you ;)
Maybe you should change:
name="pass" to name="_password"
I'm trying to orientate myself with Symfony framework by going through the "Symfony Demo application" and am trying to work my way through the interconnections. However in the below code snippet I can't find where this twig reference is getting defined value="{{ last_username }}":
\app\Resources\view\security\login.html.twig
{% extends 'base.html.twig' %}
{% block body_id 'login' %}
{% block main %}
{% if error %}
<div class="alert alert-danger">
{{ error.messageKey|trans(error.messageData) }}
</div>
{% endif %}
<div class="row">
<div class="col-sm-5">
<div class="well">
<form action="{{ path('security_login_check') }}" method="post">
<fieldset>
<legend><i class="fa fa-lock"></i> Secure Sign in</legend>
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="_username" value="{{ last_username }}" class="form-control"/>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="_password" class="form-control" />
</div>
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}"/>
<button type="submit" class="btn btn-primary">
<i class="fa fa-sign-in"></i> Sign in
</button>
</fieldset>
</form>
</div>
</div>
I have searched the whole demo application for last_username and it only appears in these four files:
\app\cache\dev\classes.php
\app\cache\prod\classes.php
\vendor\symfony\symfony\src\Symfony\Component\Security\Core\SecurityContextInterface.php
\vendor\symfony\symfony\src\Symfony\Component\Security\Core\Security.php
...all of which don't seem to offer anything helpful of defining last_username.
The last_username parameter is passed to the template via the SecurityController, which is defined in the src/AppBundle/Controller/SecurityController.php file.
One of the coolest features of the Symfony Demo application is that all pages include a Show code which shows you both the controller and the template used to create the page you are looking at. For example, in the case of the login page:
I am having couple of problems with implementing login form in bootstrap 3 in navbar.
I have attached the image below:
I want "Remember me" and "Forgot password" to align with input boxes for username and password right below it. but they are not well-aligned.
The color on "forgot password" is blue which I want it to be white (or red).
The font of the "Remember me" and "forgot password" are inconsistent with placeholders I placed in form.
how can I fix these issues?
<div class="navbar-collapse collapse">
<form class="navbar-form navbar-right" role="form" action="" method="post">
{% csrf_token %}
<div class="form-group {% if login_failed %} has-error {% endif %}">
{{ form.username.label_tag }}
<input type="text" placeholder="Uname or Email" class="form-control input-sm" {% if login_failed %}
id = "inputError" {% endif %} name="username">
</div>
<div class="form-group {% if login_failed %} has-error {% endif %}">
<input type="password" placeholder="Password" class="form-control input-sm" name="password"
{% if login_failed %} id = "inputError" {% endif %}>
</div>
<button type="submit" class="btn btn-success">Sign in</button><br>
<div class="form-group">
<div class="col-xs-12">
<label><input type="checkbox" value="remember-me">Remember me</label>
<label><a class="help-inline" href="{% url 'django.contrib.auth.views.password_reset' %}">Forgot password?</a></label>
</div>
</div>
Replace the class "navbar-form" by "form-inline" in tag .
Like said, apply a class directly to the tag "Forgot password", or more generally :
.navbar-collapse a{color:red}
http://jsfiddle.net/u2pNA/
I'm not familar with django, but i'll try to see if I can help with your bootstrap issues.
To seperate the remember me and the forgot password you can do something like this. Seperating into two columns( 2x col-xs-6) instead of using one(col-xs-12)
<div class="form-group">
<div class="col-xs-6">
<label><input type="checkbox" value="remember-me">Remember me</label</div><div class="col-xs-6"><label><a class="help-inline" href="{% url'django.contrib.auth.views.password_reset' %}">Forgot password?</a></label>
</div>
To change the color of the Forgot password to white, you would need to set a class on that link.
so perhaps something like
.navbar .form-group a{color:#FFF}
Hope that helps a bit. Good luck.
I have two questions in form-styling.
For my login, I am using Django's default auth features and haven't written any views or forms manually.
urls.py
urlpatterns += patterns(
'django.contrib.auth.views',
url(r'^login/$','login',
{'template_name':'login.html'},
name='qna_login'),
url(r'^logout/$','logout',
{'next_page':'qna_home'},
name='qna_logout'),
)
login.html
{% extends "base.html" %}
{% block content%}
{% if form.errors %}
<p class="text-warning"> Your username and/or password didn't match </p>
{% endif%}
<form role="form" class="form-horizontal" method="post" action="{% url 'django.contrib.auth.views.login' %}">
<div class="form-group">
{% csrf_token %}
{{ form }}
<input type="submit" class="btn btn-primary" value="login" />
<input type="hidden" name="next" value="{{ next }}" />
</div>
</form>
{% endblock %}
How do I add bootstrap styling to it?
For new user registration, I have added some bootstrap specific styles, but need to add additional spans and replace the labels with Glyphicons.
forms.py
class UserForm(forms.ModelForm):
password = forms.CharField(widget=forms.PasswordInput())
class Meta:
model = User
fields = ('username', 'email', 'password')
def __init__(self, *args, **kwargs):
super(UserForm,self).__init__(*args,**kwargs)
self.fields['username'].widget.attrs.update({'class':'form-control','placeholder':'Username'})
self.fields['email'].widget.attrs.update({'class':'form-control','placeholder':'Email'})
self.fields['password'].widget.attrs.update({'class':'form-control','placeholder':'Password'})
What I need to do is replace what is generated in the template, such as
<p><label for="id_username">Username:</label> <input class="form-control" id="id_username" maxlength="30" name="username" placeholder="Username" type="text" /> <span class="helptext">Required. 30 characters or fewer. Letters, numbers and #/./+/-/_ characters</span></p>
by a custom bootstrap addon and glyphicon, like
<div class="input-group">
<span class="input-group-addon" style="background-color:#b77b48; color:white"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" placeholder="Username">
</div>
You can render each field individually instead of letting Django render the whole form with {{ form }}. You can write the template like this -
<form role="form" class="form-horizontal" method="post" action="{% url 'django.contrib.auth.views.login' %}">{% csrf_token %}
<div class="form-group">
{% for field in form %}
<div class="input-group">
<span class="input-group-addon" style="background-color:#b77b48; color:white"><span class="glyphicon glyphicon-user"></span></span>
<input class="form-control" id="{{ field.id_for_label }}" maxlength="30" name="{{ field.html_name }}" value="{{ field.value }}" type="text" />
{{ field.errors }}
</div>
{% endfor %}
<input type="submit" class="btn btn-primary" value="login" />
<input type="hidden" name="next" value="{{ next }}" />
</div>
</form>
As always, like everything else, Django documentation has everything.