mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-04-18 14:22:35 +00:00
67 lines
2.5 KiB
HTML
67 lines
2.5 KiB
HTML
<div id="login" fxLayout="column" perfect-scrollbar>
|
|
|
|
<div id="login-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
|
|
|
|
<div id="login-form">
|
|
<div class="logo md-accent-bg">
|
|
<span>F</span>
|
|
</div>
|
|
|
|
<div class="title">LOGIN TO YOUR ACCOUNT</div>
|
|
|
|
<form name="loginForm" [formGroup]="loginForm" novalidate>
|
|
|
|
<md-input-container>
|
|
<input mdInput placeholder="Email" formControlName="email">
|
|
<md-error *ngIf="loginFormErrors.email.required">
|
|
Email is required
|
|
</md-error>
|
|
<md-error *ngIf="!loginFormErrors.email.required && loginFormErrors.email.email">
|
|
Please enter a valid email address
|
|
</md-error>
|
|
</md-input-container>
|
|
|
|
<md-input-container>
|
|
<input mdInput placeholder="Password" formControlName="password">
|
|
<md-error *ngIf="loginFormErrors.password.required">
|
|
Password is required
|
|
</md-error>
|
|
</md-input-container>
|
|
|
|
<div class="remember-forgot-password" fxLayout="row" fxLayout.xs="column"
|
|
fxLayoutAlign="space-between center">
|
|
<md-checkbox class="remember-me" aria-label="Remember Me">
|
|
Remember Me
|
|
</md-checkbox>
|
|
|
|
<a class="forgot-password" [routerLink]="'/pages/auth/forgot-password'">
|
|
Forgot Password?
|
|
</a>
|
|
</div>
|
|
|
|
<button md-raised-button color="accent" class="submit-button" aria-label="LOG IN"
|
|
[disabled]="loginForm.invalid">
|
|
LOGIN
|
|
</button>
|
|
|
|
</form>
|
|
|
|
<div class="separator">
|
|
<span class="text">OR</span>
|
|
</div>
|
|
|
|
<button md-raised-button class="google">
|
|
Log in with Google
|
|
</button>
|
|
|
|
<button md-raised-button class="facebook">
|
|
Log in with Facebook
|
|
</button>
|
|
|
|
<div class="register" fxLayout="column" fxLayoutAlign="center center">
|
|
<span class="text">Don't have an account?</span>
|
|
<a class="link" [routerLink]="'/pages/auth/register'">Create an account</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |