145. Login template - final (#18)

This commit is contained in:
Art
2021-09-17 21:48:35 +03:00
parent c0cbe7fa5a
commit efad81dda5
3 changed files with 20 additions and 14 deletions

View File

@ -7,33 +7,37 @@
</div>
</div>
<div class="d-flex justify-content-center form_container">
<form>
<form #loginForm="ngForm" (ngSubmit)="onLogin(loginForm.value)">
<div class="input-group mb-3">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<input type="text" class="form-control" name="username" placeholder="Username" required>
<input type="text" class="form-control" name="username" placeholder="Username"
ngModel #usernameInput="ngModel" required>
</div>
<span class="help-block" style="color:red;">Please enter a username</span>
<span class="help-block" style="color:red;" *ngIf="usernameInput.invalid && usernameInput.touched">
Please enter a username</span>
<div class="input-group mb-2">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-key"></i></span>
</div>
<input type="password" class="form-control" name="password" placeholder="Password" required>
<input type="password" class="form-control" name="password" placeholder="Password"
ngModel #passwordInput="ngModel" required>
</div>
<span class="help-block" style="color:red;">Please enter a password.</span>
<span class="help-block" style="color:red;" *ngIf="passwordInput.invalid && passwordInput.touched"
>Please enter a password.</span>
<div class="d-flex justify-content-center mt-3 login_container">
<button type="submit" name="button" class="btn login_btn">
<i class="fas fa-spinner fa-spin"></i>&nbsp;&nbsp;
<span>Loading...</span>
<span>Login</span>
<button type="submit" name="button" class="btn login_btn">
<i class="fas fa-spinner fa-spin" *ngIf="showLoading"></i>&nbsp;&nbsp;
<span *ngIf="showLoading">Loading...</span>
<span *ngIf="!showLoading">Login</span>
</button>
</div>
</form>
</div>
<div class="mt-4">
<div class="d-flex justify-content-center links">
Don't have an account? <a class="ml-2" style="color: #2C3E50;">Sign Up</a>
Don't have an account? <a class="ml-2" style="color: #2C3E50;">Sign Up</a>
</div>
</div>
</div>