109 lines
4.0 KiB
HTML
Executable File
109 lines
4.0 KiB
HTML
Executable File
<div class="blank-layout-container justify-content-center align-items-center">
|
|
<div
|
|
class="position-relative row w-100 h-100 bg-gredient justify-content-center"
|
|
>
|
|
<div class="col-lg-4 d-flex align-items-center">
|
|
<mat-card class="cardWithShadow boxed-auth">
|
|
<mat-card-content class="p-32">
|
|
<div class="text-center">
|
|
<app-branding></app-branding>
|
|
</div>
|
|
|
|
<div class="row m-t-24 custom-row">
|
|
<div class="col-12 col-sm-6">
|
|
<button mat-stroked-button class="w-100">
|
|
<div class="d-flex align-items-center">
|
|
<img
|
|
src="/assets/images/svgs/google-icon.svg"
|
|
alt="google"
|
|
width="16"
|
|
class="m-r-8"
|
|
/>
|
|
Sign in with Google
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<div class="col-12 col-sm-6">
|
|
<button
|
|
mat-stroked-button
|
|
class="w-100 d-flex align-items-center"
|
|
>
|
|
<div class="d-flex align-items-center">
|
|
<img
|
|
src="/assets/images/svgs/facebook-icon.svg"
|
|
alt="facebook"
|
|
width="40"
|
|
class="m-r-4"
|
|
/>
|
|
Sign in with FB
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="or-border m-t-30">or sign in with</div>
|
|
|
|
<form class="m-t-30" [formGroup]="form" (ngSubmit)="submit()">
|
|
<mat-label class="f-s-14 f-w-600 m-b-12 d-block"
|
|
>Username</mat-label
|
|
>
|
|
<mat-form-field appearance="outline" class="w-100" color="primary">
|
|
<input matInput formControlName="uname" />
|
|
@if(f['uname'].touched && f['uname'].invalid) {
|
|
<mat-hint class="m-b-16 error-msg">
|
|
@if(f['uname'].errors && f['uname'].errors['required']) {
|
|
<div class="text-error">Name is required.</div>
|
|
} @if(f['uname'].errors && f['uname'].errors['minlength']) {
|
|
<div class="text-error">Name should be 6 character.</div>
|
|
}
|
|
</mat-hint>
|
|
}
|
|
</mat-form-field>
|
|
<!-- password -->
|
|
<mat-label class="f-s-14 f-w-600 m-b-12 d-block"
|
|
>Password</mat-label
|
|
>
|
|
<mat-form-field appearance="outline" class="w-100" color="primary">
|
|
<input matInput type="password" formControlName="password" />
|
|
@if(f['password'].touched && f['password'].invalid) {
|
|
<mat-hint class="m-b-16 error-msg">
|
|
@if(f['password'].errors && f['password'].errors['required']) {
|
|
<div class="text-error">Password is required.</div>
|
|
}
|
|
</mat-hint>
|
|
}
|
|
</mat-form-field>
|
|
|
|
<div class="d-flex align-items-center m-b-12">
|
|
<mat-checkbox color="primary">Remember this Device</mat-checkbox>
|
|
<a
|
|
[routerLink]="['/authentication/boxed-forgot-pwd']"
|
|
class="text-primary f-w-600 text-decoration-none m-l-auto f-s-14"
|
|
>Forgot Password ?</a
|
|
>
|
|
</div>
|
|
<button
|
|
mat-flat-button
|
|
color="primary"
|
|
class="w-100"
|
|
[disabled]="!form.valid"
|
|
>
|
|
Sign In
|
|
</button>
|
|
<!-- input -->
|
|
</form>
|
|
<span class="d-block f-w-500 text-center m-t-24"
|
|
>New to Modernize?
|
|
<a
|
|
[routerLink]="['/authentication/boxed-register']"
|
|
class="text-decoration-none text-primary f-w-500 f-s-14"
|
|
>
|
|
Create an account</a
|
|
>
|
|
</span>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</div>
|
|
</div>
|
|
</div>
|