Fix form alignment.

This commit is contained in:
Spencer Ofwiti 2021-04-21 12:03:09 +03:00
parent 632669ddf4
commit 53ed56460c
2 changed files with 27 additions and 14 deletions

View File

@ -37,23 +37,25 @@
<h4 id="passwordState" class="text-dark-50 text-center font-weight-bold"></h4>
</div>
<form [formGroup]="passwordForm" (ngSubmit)="onPasswordInput()">
<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>
<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 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>
<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>
</form>
</div>
<div class="row mt-3">
<div class="col-12 text-center">

View File

@ -29,6 +29,12 @@ a, a:hover, a:focus {
perspective: 1500px;
}
.center-items {
display: flex;
justify-content: center;
align-items: center;
}
#sidebar {
min-width: 250px;
max-width: 250px;
@ -211,6 +217,11 @@ a[data-toggle="collapse"] {
overflow: initial;
}
#passwordLoginButton {
height: 3.0rem;
padding-top: 0.5rem;
}
button {
height: 2.5rem;
}