93 lines
2.3 KiB
HTML
93 lines
2.3 KiB
HTML
<div
|
|
|
|
class="height-100vh signup4-wrap"
|
|
fxLayout="row wrap"
|
|
fxLayoutAlign="center center"
|
|
>
|
|
<div
|
|
class="signup4-container mat-elevation-z4 white"
|
|
fxLayout="row wrap"
|
|
fxLayout.xs="column"
|
|
fxLayoutAlign="start stretch"
|
|
fxFlex="60"
|
|
fxFlex.xs="94"
|
|
fxFlex.sm="80"
|
|
[@animate]="{
|
|
value: '*',
|
|
params: { y: '40px', opacity: '0', delay: '100ms', duration: '400ms' }
|
|
}"
|
|
>
|
|
<!-- Left Side content -->
|
|
<div
|
|
fxLayout="column"
|
|
fxLayoutAlign="center center"
|
|
class="signup4-header"
|
|
fxFlex="40"
|
|
>
|
|
<div class="" fxLayout="row wrap" fxLayoutAlign="center center">
|
|
<img
|
|
width="200px"
|
|
src="assets/images/illustrations/lighthouse.svg"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right side content -->
|
|
<div fxFlex="60" fxLayout="row wrap" fxLayoutAlign="center center">
|
|
<form
|
|
[formGroup]="signinForm"
|
|
class="signup4-form grey-100"
|
|
(ngSubmit)="signin()"
|
|
>
|
|
<mat-form-field class="full-width" appearance="outline">
|
|
<mat-label>Email</mat-label>
|
|
<input
|
|
matInput
|
|
formControlName="username"
|
|
type="text"
|
|
name="username"
|
|
placeholder="Username"
|
|
/>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="full-width" appearance="outline">
|
|
<mat-label>Password</mat-label>
|
|
<input
|
|
matInput
|
|
formControlName="password"
|
|
type="password"
|
|
name="password"
|
|
placeholder="********"
|
|
/>
|
|
</mat-form-field>
|
|
|
|
|
|
|
|
<div
|
|
fxLayout="row wrap"
|
|
fxLayoutAlign="start center"
|
|
style="margin-top: 20px;"
|
|
>
|
|
<button-loading [loading]="loading" loadingText="Signing in..." class="mr-16" color="primary"
|
|
>Sign in</button-loading
|
|
>
|
|
<span class="px-16">or</span>
|
|
<a
|
|
class="font-weight-bold mat-color-primary"
|
|
routerLink="/sessions/signup"
|
|
>Sign Up</a
|
|
>
|
|
</div>
|
|
|
|
<!-- <div fxLayout="row wrap" fxLayoutAlign="space-between center" style="margin-top: 20px">
|
|
<span>or connect with </span>
|
|
<div>
|
|
icons goes here
|
|
</div>
|
|
</div> -->
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|