Creating Forms and their validation using Semantic UI
Badgeyay project is now divided into two parts i.e front-end of Ember JS and back-end with REST-API programmed in Python.
After a discussion, we have finalized to go with Semantic UI framework which uses simple, common language for parts of interface elements, and familiar patterns found in natural languages for describing elements. Semantic allows to build beautiful websites fast, with concise HTML, intuitive JavaScript, and simplified debugging, helping make front-end development a delightful experience.
Semantic is responsively designed allowing a web application to scale on multiple devices. Semantic is production ready and partnered with Ember framework which means we can integrate it with Ember frameworks to organize our UI layer alongside our application logic.
In this blog, I will be discussing how I added Log In and Signup Forms and their validations using Semantic UI for badgeyay frontend in my Pull Request.
Let’s get started and understand it step by step.
Step 1:
Generate ember components of Login and Sign up by using the following command :
$ ember generate component forms/login-form
$ ember generate component forms/signup-form
Step 2:
Generate Login and Sign up route by following commands.
$ ember generate route login
$ ember generate route signup
Step 3:
Generate Login and Sign up controller by following commands.
$ ember generate controller login
$ ember generate controller signup
Step 4:
Now we have set up the components, routes, and controllers for adding the forms for login and Sign up. Now let’s start writing HTML in handlebars, adding validations and implementing validations for the form components. In this blog, I will be sharing the code of Login form and actions related to logging In of user. You can check the whole code my Pull Request which I have made for adding these Forms.
Step 4.1: Creating a Login Form
<div class="ui hidden divider"></div>
<div class="ui raised segment">
<div class="ui stackable column doubling centered grid">
<div class="ui middle aligned center aligned grid">
<div class="row" >
<div class="column">
<h1 class="ui orange header">
Welcome back !
<div class="sub header">We're happy helping you get beautiful name badges.</div>
</h1>
<div class="ui hidden divider"></div>
<form class="ui form">
<div class="ui stacked element">
<div class="field required">
<div class="ui left icon input">
<i class="mail icon"></i>
{{input type="text" value=email name="email" placeholder="E-mail address"}}
</div>
</div>
<div class="field required">
<div class="ui left icon input">
<i class="lock icon"></i>
{{input type="password" value=password name="password" placeholder="Password"}}
</div>
</div>
<button class="ui button orange fluid" style="margin-bottom: 10px;" {{ action 'logIn' 'password' }}>Log In</button>
<a href="#" class="text muted"> Forgot your password ?</a>
<div class="ui divider"></div>
<a href="{{href-to 'signup'}}" class="text muted weight-800">Don't have an account yet? Signup</a>
</div>
</form>
<div class="ui horizontal divider">
Or
</div>
<h1 class="ui header">
<div class="sub header">Login with</div>
</h1>
</div>
</div>
<div class="three column row">
<div class="column">
<div class="ui vertical animated red button fluid" {{ action 'logIn' 'google' }}>
<div class="hidden content">Google</div>
<div class="visible content">
<i class="google plus icon"></i>
</div>
</div>
</div>
<div class="column">
<div class="ui vertical animated violet button fluid" tabindex="0" {{ action 'logIn' 'facebook' }}>
<div class="hidden content">Facebook</div>
<div class="visible content">
<i class="facebook f icon"></i>
</div>
</div>
</div>
<div class="column">
<div class="ui vertical animated blue button fluid" tabindex="0" {{ action 'logIn' 'twitter' }}>
<div class="hidden content">Twitter</div>
<div class="visible content">
<i class="twitter icon"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Step 4.2: Adding Form Validations
import Component from '@ember/component';
export default Component.extend({
init() {
this._super(...arguments);
},
actions: {
logIn(provider) {
let email = '';
let password = '';
if (provider == 'password') {
email = this.get('email');
password = this.get('password');
}
this.get('login')(provider, email, password);
},
logOut() {
this.get('session').close();
}
},
didRender() {
this.$('.ui.form')
.form({
inline : true,
delay : false,
fields : {
email: {
identifier : 'email',
rules : [
{
type : 'email',
prompt : 'Please enter a valid email address'
}
]
},
password: {
identifier : 'password',
rules : [
{
type : 'empty',
prompt : 'Please enter a password'
}
]
}
}
})
;
}
});
Step 4.3: Adding Login Actions
import Ember from 'ember';
import Controller from '@ember/controller';
const { inject } = Ember;
export default Controller.extend({
session: inject.service(),
beforeModel() {
return this.get('session').fetch().catch(function() {});
},
actions: {
login(provider, email, password) {
const that = this;
if (provider === 'password') {
this.get('session').open('firebase', {
provider: 'password',
email,
password
}).then(function(userData) {
console.log(userData);
that.transitionToRoute('/');
}).catch(function(err) {
console.log(err.message);
});
} else {
const that = this;
this.get('session').open('firebase', {
provider
}).then(function(userData) {
console.log(userData);
that.transitionTo('/');
}).catch(function(err) {
console.log(err.message);
});
}
},
logOut() {
this.get('session').close();
}
}
});
I have made Login form and in a similar way I implemented the SignUp form and complete code can be seen in my Pull Request.
Now, we are done with writing HTML in handlebars, adding validations and implementing validations for the form components.
Step 5:
Now run the server to see the implemented changes by the following command.
It will show like this :
Navigate to localhost to see the changes.
Now we are all done with setting up Log In and Signup Forms and their validations using Semantic UI in the badgeyay repository.
This is how I have added Log In and Signup Forms and their validations in my Pull Request.
Resources:
