How do I modify Meteor's Accounts-ui to change the classes and the html tags rendered without re-writing all the accounts-ui logic?
For example I'd like to remove the "dropdown" behavior and just display the form directly in my page.
I read this answer but it doesn't go into detail - it just removes the default CSS. I'd like to go a bit deeper..
I figured this out for another answer, but thought I'd put it in here since it seems like a quicker way to get what you want.
Template.login.rendered = function()
{
Accounts._loginButtonsSession.set('dropdownVisible', true);
};
(Template.login should be Template.yourTemplateWithLoginButtons)
Styling
Remove accounts-ui
meteor remove accounts-ui
Add accounts-ui-unstyled & less
meteor add accounts-ui-unstyled
meteor add less
Finally, add the following file to your project directory & edit it to your viewing pleasure
https://github.com/meteor/meteor/blob/master/packages/accounts-ui/login_buttons.less
More customization
You can edit the accounts-ui package and edit html & js without starting from scratch:
Remove the accounts-ui-unstyled package and add the stuff in the dir below (except package.js & accounts_ui_tests.js) to your project's client dir, add accounts-urls and edit it to fine tune it to your spec.
https://github.com/meteor/meteor/tree/master/packages/accounts-ui-unstyled
Until meteor gives us a way to specify load order
Rename the following files so they load in the correct order
1accounts_ui.js
2login_buttons.html
3login_buttons_single.html
4login_buttons_dropdown.html
5login_buttons_dialogs.html
6login_buttons_session.js
7login_buttons.js
8login_buttons_single.js
9login_buttons_dropdown.js
login_buttons_dialogs.js
If all you want to do is remove the drop down behavior, then it would suffice to just add the accounts-ui-unstyled package and hide the components you don't want visible: e.g.:
.login-link-text { display: none; }
in your CSS to hide the Sign in link.
Here are the relevant id's and classes that you look into styling:
#forgot-password-link
#login-buttons
#login-buttons-password
#login-dropdown-list
#login-email
#login-email-label
#login-email-label-and-input
#login-password
#login-password-label
#login-password-label-and-input
#login-sign-in-link
#signup-link
.accounts-dialog
.additional-link
.additional-link-container
.login-button
.login-button-form-submit
.login-buttons-dropdown-align-left
.login-close-text-clear
.login-close-textClose
.login-form
.login-form-sign-in
.login-link-and-dropdown-list
.login-link-text
.login-password-form
Create your own html template similar to this below. Style it to your taste.
meteor add accounts-password accounts-ui
<template name="login">
<form class="login-form">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Login</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" id="email" placeholder="Email address">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" id="password" placeholder="password">
</div>
</div>
<div class="panel-footer">
<button type="submit" class="btn btn-danger btn-lg">Login</button>
</div>
</div>
</form>
</template>
You can now call Meteor.loginWithPassword in the template event like so:
Template.login.events({
'submit .login-form': function(e) {
e.preventDefault();
var email = e.target.email.value;
var password = e.target.password.value;
Meteor.loginWithPassword(email, password,function(error){
if(error) {
//do something if error occurred or
}else{
FlowRouter.go('/');
}
});
}
});
You can create another form for registration as well.
Just call Accounts.createUser(object, callback);
This answer is a bit coming late but might help.
Create your own html template similar to this below. Style it to your taste.
meteor add accounts-password accounts-ui
<template name="login">
<form class="login-form">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Login</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" id="email" placeholder="Email address">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" id="password" placeholder="password">
</div>
</div>
<div class="panel-footer">
<button type="submit" class="btn btn-danger btn-lg">Login</button>
</div>
</div>
</form>
</template>
You can now call Meteor.loginWithPassword in the template event like so:
Template.login.events({
'submit .login-form': function(e) {
e.preventDefault();
var email = e.target.email.value;
var password = e.target.password.value;
Meteor.loginWithPassword(email, password,function(error){
if(error) {
//do something if error occurred or
}else{
FlowRouter.go('/');
}
});
}
});
You can create another form for registration as well.
Just call Accounts.createUser(object, callback);
Related
I have a website developed within ASP.NET Core MVC (.NET6) + jQuery, Bootstrap. Due to some restrictions, some navigation pages must be embedded dynamically by non-typical way using Ajax request.
$.ajax({
url: link,
type: 'GET',
dataType: 'html',
headers: { 'X-Page-Request': 'true' },
success: function (data) {
var isFullPage = /<!DOCTYPE *html>/i.test(data);
if (!isFullPage) {
$("#contentContainer").empty().append($(data));
}
}
});
Some endpoints return partial views with already rendered HTML and JS code and this code embeds into pages after Ajax request using $("#contentContainer").empty().append($(data));
I need to validate the form and show validation outlines only after click on "Create" button, but validation is triggered even after a click on a bootstrap select element or "Cancel" button. I've already set all necessary options to the validator as default.
The thing is that if the code is originally on the page and doesn't integrate dynamically, form validation works as designed. But if I embed the same code using .append() and $.validator.unobtrusive.parse(), I have unexpected form validation after bootstrap select click or any button click.
Descried issues appear only in case when rendered HTML and JS code was added dynamically using .append(). As a result, elements with .btn class trigger form validation: all buttons, bootstrap select element etc. I need to prohibit this unexpected form validation and validate only using.valid().
Does anybody have any thoughts how to fix that? Thanks in advance!
P.S. I guess it's somehow related to the button element or .btn class.
Embedded code doesn't contain any special things except $.validator.unobtrusive.parse() and looks as usual.
<div id="userModal" class="modal fade" role="dialog" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="cl-modal-body modal-body">
<form class="form" id="user1Form">
<div class="row shift">
<div class="col-xs-12">
<div class="flex-align-center">
<label for="name" class="input-name-text-align-right input-name">* Name:</label>
<input for="name" class="form-control" id="userName" name="name" data-val="true" data-val-required="* This field is required." />
</div>
</div>
</div>
<div class="row shift">
<div class="col-xs-12">
<div class="flex-align-center">
<label for="countryId" class="input-name-text-align-right input-name">* Country:</label>
<select for="countryId" class="cl-select-form-control form-control" name="countryId" id="countryId1" data-val="true" data-val-required="* This field is required."></select>
</div>
</div>
</div>
</form>
</div>
<div class="cl-modal-footer">
<button type="button" class="btn cl-modal-button" data-dismiss="modal">Cancel</button>
<button type="button" id="userModalButton" class="btn btn-primary cl-modal-button">Save</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$.validator.unobtrusive.parse("#userForm");
initCountries();
openUserModal();
});
...
$('#userModalButton').click(function (e) {
if ($("#userForm").valid()) {
...
}
});
...
</script>
I'm using Laravel
I have this form items
I get validation from database and I'm using jquery for validation
all inputs feild have name="element[{{$element->id}}]" (get id from database)
I'm trying different method to make validation but it doesn't work
#if($element->type =='text' && $element->is_depend_on=='0')
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="userName">{{$element->label}}</label>
<input id="userName" name="element[{{$element->id}}]" type="text"
class="form-control #if($element->validation=='required')required #endif" placeholder={{$element->placeholder}}>
#if($errors->has('element.'.$element->id))
<div class="error">{{ $errors->first('element.'.$element->id) }}</div>
#endif
</div>
</div>
</div>
#endif
#if($element->type =='textarea' &&$element->is_depend_on=='0')
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="userName">{{$element->label}}</label>
<textarea class="form-control #if($element->validation=='required')required #endif" name="element[{{$element->id}}]"
placeholder={{$element->placeholder}} *="" style="margin: 0px; width: 601px; height: 108px;" spellcheck="false" data-gramm="false"></textarea></div>
#if($errors->has('element.'.$element->id))
<div class="error">{{ $errors->first('element.'.$element->id) }}</div>
#endif
</div>
</div>
#endif
and here is my js code
var form = $("#order");
form.validate({
errorPlacement: function (error, element) {
error.insertBefore(element);
},
rules: {}
});
also I tried this code
$("#order").validate({
rules: {
},
messages: {
}
});
can anyone help me , or Do you have any suggestions ?
just use https://parsleyjs.org/ for form validation on your blade template. Very effective and has a lot of useful API and plugins. Rather than repeating same validation again and again you can make use of this little open source project.
I'm learning Ember.js and now I'm stuck with a little contact form. I have two fields, one for email, another for the message, and I've set some validations for them. Unless the validations are satisfied, the 'Send' button must be disabled. Also, when everything is OK and user sends a message, the form must be substitued with a flash notice that message was sent. So, here's the code:
app/controllers/contact.js:
import Ember from 'ember';
export default Ember.Route.extend({
emailAddress: '',
message: '',
isValidEmail: Ember.computed.match('emailAddress', /^.+#.+\..+$/),
isValidMessage: Ember.computed.gte('message.length', 5),
isValid: Ember.computed.and('isValidEmail', 'isValidMessage'),
isInvalid: Ember.computed.not('isValid'),
actions: {
sendMessage() {
alert(`Sending message from: ${this.get('emailAddress')}`);
this.set('responseMessage', `Thank you! We've received message from: ${this.get('emailAddress')} . You will be responsed ASAP!`);
this.set('emailAddress', '');
}
}
});
and the template contact.hbs:
<h1>Contact us</h1>
<div class="well well-sm">
<p> If you have any questions, feel free to contact us!</p>
</div>
<div class="row">
<div class="col-md-6">
{{#if responseMessage}}
<br/>
<div class="alert alert-success">{{responseMessage}}</div>
{{else}}
<div class="form-group">
{{input type="email" value=emailAddress class="form-control" placeholder="Please type your e-mail address." autofocus="autofocus"}}
{{#if emailAddress.isValidEmail}}<span class="glyphicon glyphicon-ok form-control-feedback"></span>{{/if}}
</div>
<div class="form-group">
{{textarea class="form-control" placeholder="Your message. (At least 5 characters.)" rows="7" value=message}}
{{#if message.isValidMessage}}<span class="glyphicon glyphicon-ok form-control-feedback"></span>{{/if}}
</div>
{{/if}}
<button class="btn btn-primary btn-lg btn-block" disabled={{isInvalid}} {{action 'sendMessage'}}>Contact us!</button>
</div>
but, still:
The button remains active while the form is empty.
There's no glyphicons appearing while completing the form.
No notice appears when the message is sent.
What am I doing wrong?
You need to use the name of your form, as well as ng-disabled: DEMO
<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required />
<button ng-disabled="myForm.$invalid">Save</button>
</form>
Please, feel free to vote me down, as I've shown a notorious lack of attention - the code which was pretended to be in app/controllers/contact.js was in app/routers/contact.js... So, naturally, when I removed it to the right place, everything worked. Special thanks to #Parag who made me enlighten. I am terribly sorry for disturbing and stealing time for this BS :(
Im trying to build a login and registration form using jquery, ajax and php. But im getting this error when im pressing the button for registration.
<!-- Formular for signing up -->
<form method="post">
<div class="form-group">
<label> Username </label>
<input type="text" class="form-control" name="newusername">
</div>
<div class="form-group">
<label> Password </label>
<input type="password" class="form-control" name="newpassword">
</div>
<div class="form-group">
<label> Your club </label>
<input type="text" class="form-control" name="newclub">
</div>
<button type="button" onClick='reg' class="btn btn-success">Sign up!</button>
</form>
And here is my script code
$(document).ready(function () {
// Function for registrate of new users
function reg(newusername, newpassword, newclub) {
$.post('class/callingClass.php', {
newusername: 'newusername',
newpassword: 'newpassword',
newclub: 'newclub'
});
};
});
Functions called from onXYZ attribute event handlers must be globals (it's one of the several reasons not to use them). Your reg function isn't a global, it's nicely contained within your ready callback (which is a Good Thing™, the global namespace is already really crowded and prone to conflicts).
Separately, onClick='reg' wouldn't work, it would have to be onClick='reg()'.
Instead, hook reg up dynamically via on:
<button type="button" id="btn-reg" class="btn btn-success">Sign up!</button>
<!-- Removed onClick, added id -->
and
$(document).ready(function () {
$("#btn-reg").on("click", reg); // <== Added
// Function for registrate of new users
function reg(newusername, newpassword, newclub) {
$.post('class/callingClass.php', {
newusername: 'newusername',
newpassword: 'newpassword',
newclub: 'newclub'
});
};
});
I've used an id above, but it doesn't have to be an id, that's just one way to look up the element. Any CSS selector that would find it would be fine.
Use onClick='reg()'. You need to do the function call here, which is the proper syntax.
Update : You also need to move your function outside of the $(document).ready(function(){}).
I have two questions that are related:
First: I have the following directive, who's purpose is to validate whether an input[type=file] is valid or not, however I have no idea how it does it least of all, what the actual code means, here it is:
angular.module('sccateringApp')
.directive('fileModel', ['$parse', function($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function(){
scope.$apply(function(){
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);
Like I said, I have no idea what the above code actually does, the explanation I got from the forum where I copied that was that it validated an input type file. Is this correct? (So far I haven't been able to verify if it works or not since it doesn't work with the code I'm using at the moment to validate my forms).
Second: Having the form below, using angular form validation it doesn't allow the submit button to be clicked until the actual inputs inside the form match the validation rules (enter a name for the category, and the description should have a max length of 144 characters). I included the directive into the file input, however the actual ng-model for the form ignores the required in the input type file and just verifies the rules are met for the first two inputs.
Here is my form:
<form method="post" role="form" name="newCategoryForm" ng-submit="submitForm()" enctype="multipart/form-data" novalidate>
<div class="row">
<div class="row">
<div class="col s12">
<div input-field>
<input type="text" name="cat-name" id="cat-name" ng-class="{ 'ng-invalid' : newCategoryForm.catname.$invalid && !newCategoryForm.catname.$pristine }"
ng-model="catname" required>
<label>Nombre</label>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div input-field>
<textarea class="materialize-textarea" name="cat-description" id="cat-description" length="144"
ng-model="catdescription" ng-maxlength="144" required></textarea>
<label>Descripción</label>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<h6>Imagen de Fondo</h6>
<div class="file-field input-field">
<div class="btn pink darken-2 waves-effect waves-light">
<span>Archivo</span>
<input type="file" name="cat-bgimg" id="cat-bgimg"
file-model="variable" required>
</div>
<div class="file-path-wrapper">
<input class="file-path" type="text">
</div>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-large pink darken-2 waves-effect waves-light center-button" ng-disabled="newCategoryForm.$invalid">Crear Categoría</button>
</form>
The first two inputs get validated correctly, the third one (file input) doesn't and I don't really know why since the directive got included on the input (I know natively, ngModel doesn't validate file inputs).
Any ideas or suggestions of how can I fix this? I'm really new to Angular, and all the tutorials are pretty much useless. I come from 5 years of experience working on jQuery, and the transition to Angular hasn't been easy at all.
The directive posted above is used to make the submit get the data found in the <input type="file"></input>.
Also, a variable should be initialized in the controller so that the values found inside the form are copied to said variable, then this variable needs to be sent as a parameter inside the ng-submit="submitForm().
Example:
angular.module('sccateringApp')
.controller('newSubcategoryController', function (httpcalls, $scope) {
...
$scope.subcategory = [];
...
$scope.submitForm = function(subcategory){
...
$scope.request.insertSubcategory(subcategory);
}
});
Each ng-model inside the form would be:
<input type="text" ng-model="category.name">
So that the category variable found in the controller acquires that value.