problem when css/bootstrap/js to my twig template - css

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"

Related

Align items in same row boot

I've been trying to show items on the same line in bootstrap here is my code, it's was working before , but i think i messed it up , i'm kinda new to bootstrap, any help would be much appreciated.
<div class="row">
{% for album in all_albums %}
<div class="col-sm-4 col-lg-2">
<div class="thumbnail">
<a href="{% url 'music:detail' album.id %}">
<img src="{{ album.album_logo.url }}" class="img-responsive">
</a>
<div class="caption">
<h2>{{ album.album_title}}</h2>
<h4>{{ album.artist}}</h4>
<!-- Details -->
Details
<!-- Delete -->
<form action="{% url 'music:album-delete' album.id %}" method="post" style="display: inline;">
{% csrf_token %}
<input type="hidden" name="album_id" value="{{ album.id}} "/>
<button type="submit" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-trash"></span> Delete
</button>
</form>
<!--Favorite-->
<a href="#" class="btn btn-default btn-sm btn-favorite">
<span class="glyphicon glyphicon-star">{% if album.is_favorite%}active{% endif %}</span>
</a>
</div>
</div>
</div>
</div>
</div>

This connection is not secure Mozilla

I have deployed an application build in laravel 5.3. On my login forms I see this warning : This connection is not secure. Logins entered here could be compromised.
This is my form :
<form class="form-horizontal" role="form" method="POST" action="{{ url('/login') }}">
{{ csrf_field() }}
<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
<label for="email" class="col-md-3 control-label"></label>
<div class="col-md-6">
<input id="email" type="email" class="form-control" placeholder="Email" name="email" value="{{ old('email') }}" required autofocus>
#if ($errors->has('email'))
<span class="help-block">
<strong>{{ $errors->first('email') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
<label for="password" class="col-md-3 control-label"></label>
<div class="col-md-6">
<input id="password" type="password" placeholder="Password" class="form-control" name="password" required>
#if ($errors->has('password'))
<span class="help-block">
<strong>{{ $errors->first('password') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Remember Me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-8 col-md-offset-3">
<button type="submit" class="btn btn-primary">
Login
</button>
<a class="btn btn-link" href="{{ url('/password/reset') }}">
Forgot Your Password?
</a>
</div>
</div>
</form>
What I'm I missing or how can I fix this warning?
This is a Firefox feature to warn visitors of websites that information they submit is not transferred securely.
The browser shows this warning for pages containing an <input type="password" /> which are delivered through HTTP instead of HTTPS.
To mitigate this, obtain a certificate for your site and install it, so your users are protected against eavesdropping.

FOSUserBundle Custom forms using Bootstrap

I'm using FOSUserBundle in my Symfony application. Everything work but i would like to know how to custom the render of the forms delivered by the bundle.
I have already succesfully custom the login form but i didn't find the way to custom for example the changePassword.html.twig.
I'have checked in ChangePasswordFormType.php to see if I can get the differents fields of the form but I must have missed something.
For example in my FOSUserBundle login.html.twig:
<form class="form-group-lg" action="{{ path("fos_user_security_check") }}" method="post">
<input type="hidden" name="_csrf_token" value="{{ csrf_token }}" />
<fieldset>
{% if error %}
<div class="row">
<div class="alert alert-danger" role="alert">{{ error|trans({}, 'FOSUserBundle') }}</div>
</div>
{% endif %}
<div class="row">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input class="form-control" for="username" placeholder="{{ 'security.login.username'|trans({}, 'FOSUserBundle') }}" type="text" id="username" name="_username" value="{{ last_username }}" required="required" />
</div>
</div>
<div class="row">
</div>
<br>
<div class="row">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input class="form-control" for="password" placeholder="{{ 'security.login.password'|trans({}, 'FOSUserBundle') }}" type="password" id="password" name="_password" required="required" />
</div>
<p class="text-right"> <a href={{ path('fos_user_resetting_request') }}> Mot de passe oublié ?</a></p>
</div>
<div class="checkbox">
<label>
<input type="checkbox" for="remember_me"/>{{ 'security.login.remember_me'|trans({}, 'FOSUserBundle') }}
</label>
</div>
<input class="btn btn-lg btn-primary btn-block" type="submit" id="_submit" name="_submit" value="{{ 'security.login.submit'|trans({}, 'FOSUserBundle') }}" />
</fieldset>
</form>
I'm looking for using the same syntax as {{ 'security.login.username'|trans({}, 'FOSUserBundle') }} for the others template provided by FOSUserBundleto get boostrap theme on it.
If someone have already done that i would like to know how you've done this.
Thanks.
FOSUserBundle templates are located at : vendor/friendsofsymfony/user-bundle/Resources/views/
To override these templates, create the folder app/Resources/FOSUserBundle/views then, you create a template with the same name as the FOSUserBundle template you want to override.
For example to override the change passord template :
vendor/friendsofsymfony/user-bundle/Resources/views/ChangePassword/change_password.html.twig
You must create app/Resources/FOSUserBundle/views/ChangePassword/change_passord.html.twig

can't do normal formating using bootstrap

I am a newbie in laravel and bootstrap. I spent already 2 hours trying to make normal formatting, but the result is
enter image description here
What i'm doing wrong?
<div class="row">
<form method="POST" class="form-inline" action="{{action('OrderController#setDiscont')}}">
<input type="hidden" name="_token" value="{{csrf_token()}}">
<div class="input-group {{ $errors->has('discont') ? ' has-error' : '' }}">
<span class="col-md-7">
<input type="text" placeholder="Скидка" name="discont" class="form-control" value="{{$discont or ""}}">
</span>
<span class="input-group-btn col-md-5">
<input type="submit" value="Установить" class="btn-block btn btn-default" >
</span>
<div class="help-block">
#if ($errors->has('discont'))
<strong>{{ $errors->first('discont') }}</strong> #endif
</div>
</div>
</form>
</div>
<div class="row">
<form method="POST" class="form-inline" action="{{action('OrderController#setClient')}}">
<input type="hidden" name="_token" value="{{csrf_token()}}">
<div class="input-group {{ $errors->has('phone') ? ' has-error' : '' }}">
<span class="col-md-7">
<input type="text" placeholder="телефон" id="phone" name="phone" class="form-control" value="{{ old('phone') }}">
</span>
<span class="input-group-btn col-md-5">
<input type="submit" value="Найти" class="btn btn-primary" >
</span>
<div class="help-block">
#if ($errors->has('phone'))
<strong>{{ $errors->first('phone') }}</strong> #endif
</div>
</div>
</form>
</div>
This should work for you. Read the documentation for input groups. I'm assuming this is what you wanted from your css classes, but you can also check out the documentation for inline forms if that's what you wanted.
<div class="row">
<form method="POST" class="form-inline" action="POST">
<input type="hidden" name="_token" value="{{csrf_token()}}">
<div class="form-group {{ $errors->has('discont') ? ' has-error' : '' }}">
<div class="input-group">
<input type="text" placeholder="Скидка" name="discont" class="form-control" value="{{$discont or ""}}">
<div class="input-group-addon" style="padding:0;">
<input type="submit" value="Установить" class="btn-block btn btn-default" style="border: 0px;border-radius: 0px; background-color: #ddd;">
</div>
</div>
<div class="help-block">
#if ($errors->has('discont'))
<strong>{{ $errors->first('discont') }}</strong>
#endif
</div>
</div>
</form>
</div>
<div class="row">
<form method="POST" class="form-inline" action="POST">
<input type="hidden" name="_token" value="{{csrf_token()}}">
<div class="form-group {{ $errors->has('phone') ? ' has-error' : '' }}">
<div class="input-group">
<input type="text" placeholder="телефон" id="phone" name="phone" class="form-control" value="{{ old('phone') }}">
<div class="input-group-addon" style="padding:0;">
<input type="submit" value="Установить" class="btn-block btn btn-default" style="border: 0px;border-radius: 0px; background-color: #ddd;">
</div>
</div>
<div class="help-block">
#if ($errors->has('phone'))
<strong>{{ $errors->first('phone') }}</strong>
#endif
</div>
</div>
</form>
</div>

Symfony Demo Application - where to find twigs?

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:

Resources