Login with FOSUserBundle - fosuserbundle

I am using login with fosuserBundle in my Symfony application.But, login does not work and my application does not display any messages. May be error in security.login.submit.
This is my login.html.twig:
{% extends "FOSUserBundle::layout.html.twig" %}
{% trans_default_domain 'FOSUserBundle' %}
{% block fos_user_content %}
{% if error %}
<div>{{ error.messageKey|trans(error.messageData, 'security') }}</div>
{% endif %}
<div class="login-container">
<div class="space-6"></div>
<div class="position-relative">
<div id="login-box" class="login-box visible widget-box no-border">
<div class="widget-body">
<div class="widget-main">
<form method="post" action={{path("fos_user_security_check") }}">
<label class="block clearfix">
<span class="block input-icon input-icon-right">
<input type="text" name="_username" class="form-control" value="{{ last_username }}" placeholder="{{ 'security.login.username'|trans }}" required="required" />
<i class="ace-icon fa fa-user"></i>
</span>
</label>
<label class="block clearfix">
<span class="block input-icon input-icon-right">
<input type="password" name="_password" class="form-control" value="" placeholder="{{ 'security.login.password'|trans }}" required="required" />
<i class="ace-icon fa fa-lock"></i>
</span>
</label>
<div class="space"></div>
<div class="clearfix">
<label class="inline">
<input type="checkbox" class="ace" name="_remember_me" value="{{ 'security.login.remember_me'|trans }}"/>
<span class="lbl"> Remember Me</span>
</label>
<button type="button" class="width-35 pull-right btn btn-sm btn-primary">
<i class="ace-icon fa fa-key"></i>
<input type="hidden" name="_csrf_token" value="{{ csrf_token }}" />
{{ 'security.login.submit'|trans }}
</button>
</div>
</form>
</div><!-- /.widget-main -->
</div><!-- /.widget-body -->
</div><!-- /.forgot-box -->
</div><!-- /.position-relative -->
</div>
{% endblock fos_user_content %}

Change
<button type="button"
To
<button type="submit" id="_submit" name="_submit"
And remove value="{{ last_username }}" from:
<input type="text" name="_username" class="form-control" value="{{ last_username }}"

Related

AngularJS UI-Router edit page title

I'm working on an AngularJs application with symfony 2.8 backoffice. I want to edit the contact page title. This is the code of the contact page :
<div ng-controller="contactFormCtrl">
<fieldset>
<h1 translate="front.CONTACT">Contact</h1>
<h2 ng-bind-html="post.content"></h2>
<form name="contactForm" id="contactForm" class="form" data-ng-submit="submitForm(contactForm)">
<div class="form-group" ng-class="{'has-error':contactForm.firstName.$dirty && contactForm.firstName.$invalid, 'has-success':contactForm.firstName.$valid}">
<label for="contactFirstName" class="control-label">
<span translate="content.list.fields.FIRSTNAME">First Name</span>
<span class="symbol required"></span>
</label>
<span class="input-icon">
<input name="firstName" id="contactFirstName" ng-model="contact.firstName" type="text" class="form-control" name="firstName" placeholder="[[ 'content.list.fields.FIRSTNAME' | translate ]]" ng-required="true">
<i class="fa fa-user"></i>
</span>
<span class="error text-small block" ng-if="contactForm.firstName.$dirty && contactForm.firstName.$error.required" translate="content.form.messages.FIRSTNAMEREQUIRED">FirstName is required.</span>
</div>
<div class="form-group" ng-class="{'has-error':contactForm.lastName.$dirty && contactForm.lastName.$invalid, 'has-success':contactForm.lastName.$valid}">
<label for="contactLastName" class="control-label">
<span translate="content.list.fields.LASTNAME">Last Name</span>
<span class="symbol required"></span>
</label>
<span class="input-icon">
<input name="lastName" id="contactLastName" ng-model="contact.lastName" type="text" class="form-control" name="lastName" placeholder="[[ 'content.list.fields.LASTNAME' | translate ]]" ng-required="true">
<i class="fa fa-user-o"></i>
</span>
<span class="error text-small block" ng-if="contactForm.lastName.$dirty && contactForm.lastName.$error.required" translate="content.form.messages.LASTNAMEREQUIRED">LastName is required.</span>
</div>
<div class="form-group" ng-class="{'has-error':contactForm.contactEmail.$dirty && contactForm.contactEmail.$invalid, 'has-success':contactForm.contactEmail.$valid}">
<label for="contactEmail" class="control-label">
<span translate="content.list.fields.EMAIL">Email</span>
<span class="symbol required"></span>
</label>
<span class="input-icon">
<input name="contactEmail" id="contactEmail" ng-model="contact.email" type="email" class="form-control" name="email" placeholder="[[ 'content.list.fields.EMAIL' | translate ]]" ng-required="true">
<i class="fa fa-envelope-o"></i>
</span>
<span class="error text-small block" ng-if="contactForm.contactEmail.$dirty && contactForm.contactEmail.$error.required" translate="content.form.messages.EMAILREQUIRED">Email is required.</span>
</div>
<div class="form-group" ng-class="{'has-error':contactForm.contactSubject.$dirty && contactForm.contactSubject.$invalid, 'has-success':contactForm.contactSubject.$valid}">
<label for="contactSubject" class="control-label">
<span translate="content.list.fields.SUBJECT">Subject</span>
<span class="symbol required"></span>
</label>
<span class="input-icon">
<input name="contactSubject" id= "contactSubject" ng-model="contact.subject" type="text" class="form-control" name="contactSubject" placeholder="[[ 'content.list.fields.SUBJECT' | translate ]]" ng-required="true">
<i class="ti-marker-alt"></i>
</span>
<span class="error text-small block" ng-if="contactForm.contactSubject.$dirty && contactForm.contactSubject.$error.required" translate="content.form.messages.SUBJECTREQUIRED">Subject is required.</span>
</div>
<div class="form-group" ng-class="{'has-error':contactForm.contactMessage.$dirty && contactForm.contactMessage.$invalid, 'has-success':contactForm.contactMessage.$valid}">
<label for="contactMessage" class="control-label">
<span translate="content.list.fields.MESSAGE">Message</span>
<span class="symbol required"></span>
</label>
<span class="input-icon">
<textarea name="contactMessage" id="contactMessage" ng-model="contact.message" rows="10" class="form-control" name="contactMessage" placeholder="[[ 'content.list.fields.MESSAGE' | translate ]]" ng-required="true"></textarea>
<i class="fa fa-message-o"></i>
</span>
<span class="error text-small block" ng-if="contactForm.contactMessage.$dirty && contactForm.contactMessage.$error.required" translate="content.form.messages.CONTACTMESSAGEREQUIRED">Message is required.</span>
</div>
<button type="button" ng-click="submitForm(contactForm)" class="btn btn-primary pull-right" ng-disabled="disableSubmit"> <!-- ng-disabled="userForm.$invalid" -->
<i class="fa fa-spinner fa-spin" ng-if="disableSubmit"></i><i class="fa fa-envelope" ng-if="!disableSubmit"></i> <span translate="content.common.SEND">Send</span>
</button>
</form>
when i use the inspector i find this function :
<title ng-bind="pageTitle()" class="ng-binding">E-electricity</title>
A function called pageTitle() to automatically generate a title for each page. i want to edit E-electricity to E-electricity-contact.

I am performing ngclick show hide but can't get any output

i am using angular 1.6 and trying to perform ng-click hide show of profile data but anyhow i dont know where i am going wrong.
here the code
<div class="col-sm-12 col-lg-10" ng-controller="profile">
<div class="text-center">
<div class="col-sm-12">
<div class="pull-right">
<a ng-click="edit-form = ! edit-form"> <i class="fa fa-pencil fa-2x" style="cursor:pointer;color:#f7972f;"> </i> </a>
</div>
<div class="image-upload edit-picture">
<label for="file-input">
<i class="fa fa-camera fa-2x" style="cursor:pointer;color:#f7972f;"> </i>
</label>
<input id="file-input" type="file"/>
</div>
<img src="amit.jpg" class="img img-circle edit-image" style="width:150px;">
<h3> Amit Singh Chauhan </h3>
</div>
<div class="col-sm-12" ng-show="edit-form">
<div class="col-sm-1"></div>
<div class="col-sm-10" >
<form action="" novalidate="novalidate">
<p><span class="wpcf7-form-control-wrap first-name"><input type="text" name="first-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="First Name"></span></p>
<p><span class="wpcf7-form-control-wrap last-name"><input type="text" name="last-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Last Name"></span></p>
<p><span class="wpcf7-form-control-wrap email-address"><input type="email" name="email-address" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" placeholder="E-mail Address"></span></p>
<div><span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="Comment"></textarea></span></div>
<div><input type="submit" value="Save Profile" class="wpcf7-form-control wpcf7-submit mkd-contact3"><span class="ajax-loader"></span></div>
</form>
</div>
<div class="col-sm-1"></div>
</div>
</div>
<script>
var app = angular.module("myApp", []).controller ("profile", function ($scope){
});
</script>
Try changing edit-form to editForm.

Angular failing in django block elements

I am trying to run angular validation inside my django template. It doesn't seem to work inside the block templatetag. But it seems to work outside it. Also, it don't throw an error in the console.
My code is:
{% extends 'base.html' %}
{% load staticfiles %}
{% block head_block %}
<title>Item Create</title>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function ($scope, $http) {
$scope.validLevel = 0;
$scope.setSelectValid = function()
{
$scope.validLevel = 1;
}
});
</script>
{% endblock %}
{% block body_block %}
<div style="padding-left: 10px;padding-right: 10px">
<form id="id_form" action=""
class="form-horizontal ng-dirty ng-valid-required ng-valid ng-valid-nx-equal ng-scope" method="post"
ng-app="myApp" ng-controller="validateCtrl" name="myForm"
novalidate>
{% csrf_token %}
{% verbatim %}
<div class="row form-group">
<div class="col-md-6 col-md-offset-3">
<label for="id_level" class="control-label">Level</label>
</div>
<div class="col-md-6 col-md-offset-3">
<select ng-change="setSelectValid()" class="form-control" id="id_level" name="level" ng-model="level">
<option ng-repeat="x in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]" value="{{ x }}">Level {{ x }}</option>
</select>
</div>
</div>
<div class="row form-group">
<div class="col-md-6 col-md-offset-3">
<label for="id_item" class="control-label">Item Name</label>
</div>
<div class="col-md-6 col-md-offset-3">
<input type="text" class="form-control" id="id_item" name="item"
placeholder="Enter Item Name"
ng-model="item" ng-minLength="2" required>
<span ng-cloak style="color:red "
ng-show="myForm.item.$touched && myForm.item.$invalid ">
<p ng-show="myForm.item.$error.required ">Item name is required.</p>
<p ng-show="myForm.item.$error.minlength ">Should be at least 2 characters.</p>
</span>
</div>
</div>
<div class="row form-group ">
<div class="col-md-6 col-md-offset-3">
<label for="id_description" class="control-label ">Description</label>
</div>
<div class="col-md-6 col-md-offset-3">
<textarea class="form-control" id="id_description" name="description"
placeholder="Enter item description"
ng-model="description" ng-minLength=5 rows="5"
required></textarea>
<span ng-cloak style="color:red "
ng-show="myForm.description.$touched && myForm.description.$invalid ">
<p ng-show="myForm.description.$error.required ">Item description is required.</p>
<p ng-show="myForm.description.$error.minlength ">Should be at least 2 characters.</p>
<p ng-show="myForm.description.$error.maxlength ">Should be at most 50 characters.</p>
</span>
</div>
</div>
<div class="row form-group ">
<div class="col-md-6 col-md-offset-3 ">
<label for="id_item_value" class="control-label ">Value</label>
</div>
<div class="col-md-6 col-md-offset-3 ">
<input type="number" class="form-control"
id="id_item_value" name="value" placeholder="Item value"
ng-model="value" min="1" required>
<span ng-cloak style="color:red "
ng-show="myForm.value.$touched && myForm.value.$invalid ">
<p ng-show="myForm.value.$error.required ">Please enter Item value.</p>
</span>
</div>
</div>
<div class="row form-group">
<div class="col-md-offset-3 col-md-6 ">
<button type="submit" id="button-info" class="btn btn-primary"
ng-disabled="myForm.$invalid || !validLevel">Create Item
</button>
</div>
</div>
{% endverbatim %}
</form>
</div>
{% endblock %}
I just discovered that in case there are two or more angular apps in the page. I only need to add this line at the end.
angular.bootstrap(document, ['<app-name>']);

ion-content scroll="true" not working

Issue: I have a simple add item form that adds a picture from the phone's album in a view. For some reason, after adding ion-content scroll="true", the page still doesn't allow for scrolling.
Also, I've set $ionicScrollDelegate to refresh in the controller. Thanks!
<ion-view title="Add Item">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-c"></i> Back
</ion-nav-back-button>
</ion-nav-bar>
<ion-content scroll="true">
<!-- <ion-scroll direction="y" style="height: 800px;"> -->
<ion-pane>
<div class="row">
<div class="col text-center">
<button class="button button-calm" ng-click="getPhoto()"><i class="ion-camera"></i> Select Photo</button>
</div>
</div>
<div class="list card" ng-show="item.pic">
<div class="item">
<img class="full-image" src="data:image/jpg;base64,{{item.pic}}">
</div>
</div>
<form ng-submit="submitItem()" name="newItemForm" novalidate>
<label class="item item-input">
<span class="input-label" type="text">* Designer: </span>
<input type="text" ng-model="item.designer" ng-required="true">
</label>
<label class="item item-input">
<span class="input-label" type="text">* Type/Collection: </span>
<input type="text" ng-model="item.collection" ng-required="true">
</label>
<p ng-show="newItemForm.item.collection.$error.required">Type/Collection Required</p>
<label class="item item-input">
<span class="input-label" type="text">* Color: </span>
<input type="text" ng-model="item.color" ng-required="true">
</label>
<label class="item item-input">
<span class="input-label" type="text">* Size: </span>
<input type="text" ng-model="item.size" ng-required="true">
</label>
<label class="item item-input">
<span class="input-label" type="text">Material: </span>
<input type="text" ng-model="item.material">
</label>
<label class="item item-input">
<span class="input-label" type="text">* Condition: </span>
<input type="text" ng-model="item.condition" ng-required="true">
</label>
<label class="item item-input">
<span class="input-label" type="text">* Description: </span>
<textarea type="text" ng-model="item.description" ng-required="true"></textarea>
</label>
<p ng-show="newItemForm.$invalid" class="warning">*Items must be filled in to Add Item</p>
<div class="row">
<div class="col text-center">
<button type="submit" class="button button-balanced" ng-disabled="newItemForm.$invalid"><i class="ion-plus"></i> Add Item</button>
</div>
</div>
</form>
</ion-pane>
<!-- </ion-scroll> -->
</ion-content>
</ion-view>

AngularJS - ngrepeat form input elements dynamically filled with default values to post

http://jsfiddle.net/9sCnC/12/#
I'm going through a json file and parsing it through ng-repeat, a button on each item opening a modal window.
In this window a form is generated with data I would like to put into another data array which will be send through post to a php file...
<div ng-repeat="value in model.values">
<input type="text" ng-model="model.values[$index]" />
</div>
<hr>
<!--Details content Begin-->
<div class="circle-list">
<div class="circle-list-item" ng-repeat="course in courses | filter:query | orderBy:predicate:reverse | filter:Type" ng-mouseenter="hover(course)" ng-mouseleave="hover(course)">
<span class="btn-xs pull-right">
<span id="Time" class="glyphicon glyphicon-time"></span> {{course.duur}}u
</span>
<a id="course.Id" title="{{course.NoEDA}}" href="{{course.link}}">{{course.titel | lowercase}}</a>
<span id="Type" class="ng-class:course.type">{{course.type}}</span>
<span ng-show="course.showOverlay" class="btn-group btn-group-xs">
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#ModalSubscribe{{$index}}"><span class="glyphicon glyphicon-pencil"></span></button>
<!-- <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-eye-open"></span></button> -->
<!-- Button trigger modal -->
</span>
<div class="modal fade" id="ModalSubscribe{{$index}}" tabindex="-1" role="dialog" aria-labelledby="ModalSubscribe" aria-hidden="true">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="glyphicon glyphicon-pencil"> Inschrijven</h4>
</div>
<div class="modal-body">
<!-- SHOW ERROR/SUCCESS MESSAGES -->
<!--
<div id="messages" ng-show="message" ng-class="{ 'has-error' : errormail }">{{ message }}</div>
-->
<div id="messages" class="alert alert-success" data-ng-show="message" >{{ message }}</div>
<div id="messages" class="alert alert-danger" data-ng-show="errormessage" >{{ errormessage }}</div>
<form id="register" name="register" class="form-horizontal" role="form" ng-submit="processForm()">
<div id="name-group" class="form-group">
<!-- EDA -->
<label class="col-sm-2 control-label">Opleiding:</label>
<div class="col-sm-10 controls">
<input type="text" name="eda[]" class="form-control" value="{{course.NoEDA}}" ng-model="course.NoEDA">
</div>
<!-- Name -->
<label class="col-sm-2 control-label">Naam:</label>
<div class="col-sm-10 controls">
<input type="text" name="name[]" class="form-control" placeholder="Naam" ng-model="formData.name">
</div>
<!-- Matricule -->
<label class="col-sm-2 control-label">Stamnumer:</label>
<div class="col-sm-10 controls">
<input type="number" name="matricule[]" class="form-control" placeholder="Stamnummer" ng-model="formData.matricule">
</div>
</div>
<!--<legend>Email</legend>-->
<div class="form-group" ng-class="{'has-error': errormail}">
<label class="col-sm-2 control-label">Email:</label>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="email" name="[]mail" class="form-control" data-ng-model="formData.mail" placeholder="mail"/>
</div>
<!--<span class="help-block" ng-show="errormail">{{ errormail }}</span>-->
</div>
<input type="checkbox" ng-model="formData.agree1" name="Agreement1[]" required />
Ik ben akkoord
<input type="checkbox" ng-model="formData.agree2" name="Agreement2[]" required />
Ik ga akkoord
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Sluit</button>
<button type="submit" class="btn btn-primary" ng-enabled="{{register.mail}}"><i class="glyphicon glyphicon-ok"></i> Inschrijven</button>
</div>
</form>
{{ formData }}
</div>
</div>
</div>
<!-- temp, later wel plaatsen
<span class="label label-default">{{course.Departement}}</span>
-->
<small>
<br/><i id="placelabel" class="text-muted"><span class="glyphicon glyphicon-map-marker"></span> {{course.plaats || "-"}}</i>
<i id="placename" class="text-primary"><span class="glyphicon glyphicon-calendar"></span> {{course.organisatie || "-"}}</i>
<small id="public" class="pull-right"><br /><i class="doelgroep">{{course.doelgroep}}</i></small>
</small>
</div>
</div>
<!--Details content End-->
</div>
<!--container content End-->
What I don't understand is:
ng-init="formData.eda=course.NoEDA" is putting the last item in the array I guess
value="{{course.NoEDA}}" this is showing the good item array
how do I transfer the right item from course.NoEDA to another ng-model formData.eda?
I'm just starting with this, if I'm doing this the wrong way please help me out here...
my fiddle isn't working at all but on my local server everything is working except passing the values to post them...
thanks in advance...

Resources