Merge pull request #17 from iyilm4z/master

#17 - Migrate account login to @angular/material components

Author: iyilm4z

angular/src/account/login/login.component.html

@@ -1,40 +1,55 @@
-<div class="card" id="LoginArea" [@routerTransition]>
-    <div #cardBody class="body">
-        <form #loginForm="ngForm" id="LoginForm" method="post" novalidate (ngSubmit)="login()">
+<div class="card" [@routerTransition]>
+    <div class="body">
+        <form novalidate 
+              autocomplete="off" 
+              #loginForm="ngForm"  
+              (ngSubmit)="login()">
             <h4 class="text-center">{{ "LogIn" | localize }}</h4>
-
-            <div class="input-group">
-                <span class="input-group-addon">
-                    <i class="material-icons">person</i>
+            <mat-form-field>
+                <span matPrefix>
+                    <mat-icon matPrefix>person</mat-icon>&nbsp;
                 </span>
-                <div class="form-line">
-                    <input materialInput [(ngModel)]="loginService.authenticateModel.userNameOrEmailAddress" autoFocus class="form-control" type="text" autocomplete="off" placeholder="{{ 'UserNameOrEmail' | localize }}" name="userNameOrEmailAddress" required maxlength="255" />
-                </div>
-            </div>
-
-            <div class="input-group">
-                <span class="input-group-addon">
-                    <i class="material-icons">lock</i>
+                <input matInput
+                       name="userNameOrEmailAddress"   
+                       [(ngModel)]="loginService.authenticateModel.userNameOrEmailAddress"                                              
+                       [placeholder]="'UserNameOrEmail' | localize"
+                       autocomplete="off"
+                       required 
+                       maxlength="255">
+            </mat-form-field>
+            <mat-form-field>
+                <span matPrefix>
+                    <mat-icon matPrefix>lock</mat-icon>&nbsp;
                 </span>
-                <div class="form-line">
-                    <input materialInput type="password" [(ngModel)]="loginService.authenticateModel.password" class="form-control" name="password" placeholder="{{ 'Password' | localize }}" required maxlength="32">
-                </div>
-            </div>
+                <input matInput 
+                       type="password"
+                       name="password" 
+                       [(ngModel)]="loginService.authenticateModel.password"           
+                       [placeholder]="'Password' | localize" 
+                       required 
+                       maxlength="32">
+            </mat-form-field>
             <div class="row">
                 <div class="col-xs-8 p-t-5">
-                    <input type="checkbox"  [(ngModel)]="loginService.rememberMe" name="rememberMe" id="rememberme" class="filled-in chk-col-pink" value="true">
-                    <label for="rememberme">{{ "RememberMe" | localize }}</label>
+                    <mat-checkbox name="rememberMe" [(ngModel)]="loginService.rememberMe">
+                        {{ "RememberMe" | localize }}
+                    </mat-checkbox>
                 </div>
                 <div class="col-xs-4">
-                    <button id="LoginButton" class="btn btn-block bg-pink waves-effect" type="submit">{{ "LogIn" | localize }}</button>
+                    <button mat-flat-button 
+                            type="submit" 
+                            flex="15" 
+                            color="accent"
+                            [disabled]="!loginForm.form.valid || submitting">
+                            {{ "LogIn" | localize }}
+                    </button>
                 </div>
             </div>
-
             <div class="row m-t-15 m-b--20" *ngIf="isSelfRegistrationAllowed">
                 <div class="col-xs-12">
                     <a [routerLink]="['../register']">{{ "Register" | localize }}</a>
                 </div>
             </div>
         </form>
     </div>
-</div>
+</div>

angular/src/account/login/login.component.less

@@ -10,3 +10,10 @@
         }
     }
 }
+
+mat-form-field {
+  width: 100%;
+}
+mat-checkbox {
+  padding-bottom: 5px;
+}

angular/src/account/login/login.component.ts

@@ -1,52 +1,39 @@
-import { Component, Injector, ElementRef, ViewChild } from '@angular/core';
-import { Router } from '@angular/router';
+import { Component, Injector } from '@angular/core';
+import { AbpSessionService } from '@abp/session/abp-session.service';
 import { AppComponentBase } from '@shared/app-component-base';
-import { LoginService } from './login.service';
 import { accountModuleAnimation } from '@shared/animations/routerTransition';
-import { AbpSessionService } from '@abp/session/abp-session.service';
+import { LoginService } from './login.service';
 
 @Component({
-    templateUrl: './login.component.html',
-    styleUrls: [
-        './login.component.less'
-    ],
-    animations: [accountModuleAnimation()]
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.less'],
+  animations: [accountModuleAnimation()]
 })
 export class LoginComponent extends AppComponentBase {
-
-    @ViewChild('cardBody') cardBody: ElementRef;
-
-    submitting: boolean = false;
-
-    constructor(
-        injector: Injector,
-        public loginService: LoginService,
-        private _router: Router,
-        private _sessionService: AbpSessionService
-    ) {
-        super(injector);
+  submitting: boolean = false;
+
+  constructor(
+    injector: Injector,
+    private loginService: LoginService,
+    private _sessionService: AbpSessionService
+  ) {
+    super(injector);
+  }
+
+  get multiTenancySideIsTeanant(): boolean {
+    return this._sessionService.tenantId > 0;
+  }
+
+  get isSelfRegistrationAllowed(): boolean {
+    if (!this._sessionService.tenantId) {
+      return false;
     }
 
-    ngAfterViewInit(): void {
-        $(this.cardBody.nativeElement).find('input:first').focus();
-    }
-
-    get multiTenancySideIsTeanant(): boolean {
-        return this._sessionService.tenantId > 0;
-    }
-
-    get isSelfRegistrationAllowed(): boolean {
-        if (!this._sessionService.tenantId) {
-            return false;
-        }
+    return true;
+  }
 
-        return true;
-    }
-
-    login(): void {
-        this.submitting = true;
-        this.loginService.authenticate(
-            () => this.submitting = false
-        );
-    }
+  login(): void {
+    this.submitting = true;
+    this.loginService.authenticate(() => (this.submitting = false));
+  }
 }