cic-staff-client/src/app/auth/auth.component.html

93 lines
3.8 KiB
HTML

<div class="container">
<div class="row justify-content-center mt-5 mb-5">
<div class="col-lg-6 col-md-8 col-sm-10">
<div class="card">
<mat-card-title class="card-header pt-4 pb-4 text-center bg-dark">
<a routerLink="/">
<h1 class="text-white">CICADA</h1>
</a>
</mat-card-title>
<div id="one" style="display: block" class="card-body p-4 align-items-center">
<div class="text-center w-75 m-auto">
<h4 class="text-dark-50 text-center font-weight-bold">Add Private Key</h4>
</div>
<form [formGroup]="keyForm" (ngSubmit)="onSubmit()">
<mat-form-field appearance="outline" class="full-width">
<mat-label>Private Key</mat-label>
<textarea matInput style="height: 30rem" formControlName="key" placeholder="Enter your private key..."
[errorStateMatcher]="matcher"></textarea>
<div *ngIf="keyFormSubmitted && keyFormStub.key.errors" class="invalid-feedback">
<mat-error *ngIf="keyFormStub.key.errors.required">Private Key is required.</mat-error>
</div>
</mat-form-field>
<button mat-raised-button matRipple color="primary" type="submit" [disabled]="keyFormLoading">
<span *ngIf="keyFormLoading" class="spinner-border spinner-border-sm mr-1"></span>
Add Key
</button>
</form>
</div>
<div id="two" style="display: none" class="card-body p-4 align-items-center">
<div class="text-center w-75 m-auto">
<h4 id="passwordState" class="text-dark-50 text-center font-weight-bold"></h4>
</div>
<div class="center-items">
<form [formGroup]="passwordForm" (ngSubmit)="onPasswordInput()">
<mat-form-field appearance="outline">
<mat-label>Password</mat-label>
<input matInput type="password" formControlName="password" placeholder="Enter your private key password..."
[errorStateMatcher]="matcher">
<div *ngIf="passwordForm && passwordFormStub.password.errors" class="invalid-feedback">
<mat-error *ngIf="passwordFormStub.password.errors.required">Private Key password is required.</mat-error>
</div>
</mat-form-field>
<button id="passwordLoginButton" mat-raised-button matRipple color="primary" type="submit" class="ml-3" [disabled]="passwordFormLoading">
<span *ngIf="passwordFormLoading" class="spinner-border spinner-border-sm mr-1"></span>
Login
</button>
</form>
</div>
<div class="row mt-3">
<div class="col-12 text-center">
<p class="text-muted">Change private key?
<a (click)="keyInput()" class="text-muted ml-1">
<b>Enter private key</b>
</a>
</p>
</div> <!-- end col-->
</div>
<!-- end row -->
</div>
<div id="three" style="display: none" class="card-body p-4 align-items-center">
<div class="text-center w-75 m-auto">
<h4 id="state" class="text-dark-50 text-center font-weight-bold"></h4>
<button mat-raised-button matRipple color="primary" type="submit" (click)="login()"> Login </button>
</div>
<div class="row mt-3">
<div class="col-12 text-center">
<p class="text-muted">Change private key?
<a (click)="keyInput()" class="text-muted ml-1">
<b>Enter private key</b>
</a>
</p>
</div> <!-- end col-->
</div>
<!-- end row -->
</div>
</div>
</div>
</div>
</div>