80 lines
2.7 KiB
HTML
80 lines
2.7 KiB
HTML
<div class="login-layout">
|
|
<div class="login-container">
|
|
<!-- Login Card -->
|
|
<div class="login-card">
|
|
<!-- Logo/Header Section -->
|
|
<div class="login-header">
|
|
<div class="logo-wrapper">
|
|
<img src="assets/images/cmc/logo.png" alt="Logo" class="logo-image">
|
|
</div>
|
|
<h1 class="login-title">Welcome Back</h1>
|
|
<p class="login-subtitle">Sign in to continue</p>
|
|
</div>
|
|
|
|
<!-- Login Form -->
|
|
<form #loginForm="ngForm" (ngSubmit)="onLogin(loginForm.value)" class="login-form">
|
|
<!-- Username Field -->
|
|
<div class="form-group">
|
|
<label for="username">Username</label>
|
|
<div class="input-wrapper">
|
|
<input
|
|
type="text"
|
|
id="username"
|
|
class="form-input"
|
|
name="username"
|
|
placeholder="Enter your username"
|
|
ngModel
|
|
#usernameInput="ngModel"
|
|
required
|
|
[class.input-error]="usernameInput.invalid && usernameInput.touched">
|
|
<i class="fas fa-user input-icon"></i>
|
|
</div>
|
|
<div class="error-message" *ngIf="usernameInput.invalid && usernameInput.touched">
|
|
<i class="fas fa-exclamation-circle"></i>
|
|
Please enter a username
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Password Field -->
|
|
<div class="form-group">
|
|
<label for="password">Password</label>
|
|
<div class="input-wrapper">
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
class="form-input"
|
|
name="password"
|
|
placeholder="Enter your password"
|
|
ngModel
|
|
#passwordInput="ngModel"
|
|
required
|
|
[class.input-error]="passwordInput.invalid && passwordInput.touched">
|
|
<i class="fas fa-lock input-icon"></i>
|
|
</div>
|
|
<div class="error-message" *ngIf="passwordInput.invalid && passwordInput.touched">
|
|
<i class="fas fa-exclamation-circle"></i>
|
|
Please enter a password
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Login Button -->
|
|
<button
|
|
type="submit"
|
|
class="btn-login"
|
|
[disabled]="loginForm.invalid || showLoading">
|
|
<i class="fas fa-spinner fa-spin" *ngIf="showLoading"></i>
|
|
<i class="fas fa-sign-in-alt" *ngIf="!showLoading"></i>
|
|
<span>{{ showLoading ? 'Signing in...' : 'Sign In' }}</span>
|
|
</button>
|
|
</form>
|
|
|
|
<!-- Register Link -->
|
|
<!-- <div class="login-footer">
|
|
<p class="footer-text">
|
|
Don't have an account?
|
|
<a routerLink="/register" class="footer-link">Sign Up</a>
|
|
</p>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</div> |