Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import { Component } from '@angular/core';
- import { FormBuilder, FormGroup, Validators } from '@angular/forms';
- import { Md5 } from 'ts-md5/dist/md5';
- import { UserService } from './shared/user.service';
- import { IUser, IUserAuth, IUserFeatures } from './shared/user.moldes';
- @Component({
- selector: 'app-login',
- styleUrls: ['./login.component.scss'],
- templateUrl: './login.component.html'
- })
- /**
- * Class representing the LoginComponent.
- */
- export class LoginComponent {
- public userForm: FormGroup;
- public username: string;
- public password: string;
- public submitted: boolean;
- constructor(private formBuilder: FormBuilder) {
- this.submitted = false;
- this.buildForm();
- }
- /**
- * Triggers when the user click on the login button.
- */
- public onSubmit(): void {
- this.submitted = true;
- if (!this.userForm.valid) {
- return;
- }
- const user: IUser = {
- email: this.userForm.controls.username.value,
- password: Md5.hashStr(this.userForm.controls.password.value),
- };
- this.userService.authenticateUser(user).subscribe(() => {
- //
- });
- }
- /**
- * Builds the user login form.
- */
- private buildForm(): void {
- this.userForm = this.formBuilder.group({
- username: [null,[Validators.required],
- password: [null, Validators.required]
- });
- }
- }
- <form [formGroup]="userForm" (ngSubmit)="onSubmit()" novalidate class="form-wrapper">
- <div class="form-group block"
- [ngClass]="{'has-error': submitted && (userForm.controls.username.errors)}">
- <label>Username</label>
- <input type="text" class="form-control" formControlName="username">
- <p>
- <span *ngIf="submitted && userForm.controls.username.errors?.required">Username is required</span>
- </p>
- </div>
- <div class="form-group block"
- [ngClass]="{'has-error': submitted && (userForm.controls.password.errors)}">
- <label>Password</label>
- <input type="password" class="form-control" formControlName="password">
- <p *ngIf="submitted && userForm.controls.password.errors?.required">Password is required</p>
- </div>
- <button type="submit" class="btn btn-default">Login</button>
- <div>
- <div *ngIF="submitted && userForm.valid">Tick</div>
- <div *ngIF="submitted && !userForm.valid">X</div>
- </div>
- </form>
Add Comment
Please, Sign In to add comment