-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2 from zhacky/Build-Registration-and-Login-Foms
Login Form
- Loading branch information
Showing
6 changed files
with
138 additions
and
48 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
.horizontal-nav { | ||
display: flex; /* Use flexbox for horizontal layout */ | ||
flex-direction: row; /* Arrange items in a row */ | ||
align-items: center; /* Align items vertically in the center */ | ||
gap: 10px; /* Space between items */ | ||
border: rgb(13, 5, 59) 1px solid; /* Optional: Add a border */ | ||
border-radius: 5px; /* Optional: Add rounded corners */ | ||
|
||
} | ||
|
||
mat-list-item { | ||
display: inline-flex; /* Ensure the list items do not stack vertically */ | ||
align-items: center; | ||
} | ||
|
||
mat-list-item a { | ||
text-decoration: none; /* Optional: Remove underline from links */ | ||
color: inherit; /* Optional: Use the default text color */ | ||
padding: 5px 10px; /* Optional: Add padding for clickable area */ | ||
} | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
.login-container { | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
height: 100vh; | ||
background-color: #ccb1b1; | ||
} | ||
|
||
mat-card { | ||
width: 100%; | ||
max-width: 600px; | ||
max-height: 600px; | ||
padding: 20px; | ||
} | ||
|
||
mat-form-field { | ||
width: 100%; | ||
} | ||
|
||
button[mat-stroked-button] { | ||
width: 100%; | ||
margin-top: 20px; | ||
} | ||
|
||
mat-card-title { | ||
position: relative; | ||
margin-top: 20px; | ||
left: 30%; | ||
font-size: 40px; | ||
font-family: sans-serif; | ||
font-weight: bold; | ||
margin-bottom: 20px; | ||
color: purple | ||
} | ||
|
||
|
||
mat-card-actions { | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
} | ||
|
||
.mat-subtitle-1 { | ||
margin-bottom: 10px; | ||
margin-top: 10px; | ||
font-family: Arial, Helvetica, sans-serif; | ||
} | ||
|
||
|
||
|
||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,27 +1,39 @@ | ||
<div> | ||
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()"> | ||
<mat-form-field appearance="outline"> | ||
<mat-label>Username</mat-label> | ||
<input matInput formControlName="username" required> | ||
<mat-error *ngIf="loginForm.get('username')?.hasError('required')"> | ||
Username is required | ||
</mat-error> | ||
<mat-error *ngIf="loginForm.get('username')?.hasError('minlength')"> | ||
Username must be at least 4 characters long | ||
</mat-error> | ||
</mat-form-field> | ||
<div class="login-container"> | ||
<mat-card> | ||
<mat-card-header> | ||
<mat-card-title>Care Central HMS</mat-card-title> | ||
<mat-card-subtitle class="mat-subtitle-1">Please log in to continue</mat-card-subtitle> | ||
</mat-card-header> | ||
<mat-card-content> | ||
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()"> | ||
<mat-form-field> | ||
<mat-label>Email</mat-label> | ||
<input matInput formControlName="email" type="email" /> | ||
<mat-error *ngIf="loginForm.get('email')?.invalid"> | ||
Please enter a valid email. | ||
</mat-error> | ||
</mat-form-field> | ||
|
||
<mat-form-field appearance="outline"> | ||
<mat-label>Password</mat-label> | ||
<input matInput type="password" formControlName="password" required> | ||
<mat-error *ngIf="loginForm.get('password')?.hasError('required')"> | ||
Password is required | ||
</mat-error> | ||
<mat-error *ngIf="loginForm.get('password')?.hasError('pattern')"> | ||
Password must be a combination of upper-case, lower-case, numbers, and at least 8 characters long | ||
</mat-error> | ||
</mat-form-field> | ||
<mat-form-field class="border"> | ||
<mat-label>Password</mat-label> | ||
<input matInput formControlName="password" [type]="showPassword ? 'text' : 'password'" /> | ||
<mat-error *ngIf="loginForm.get('password')?.invalid"> | ||
Password is required. | ||
</mat-error> | ||
|
||
<button type="button" mat-icon-button matSuffix (click)="showPassword = !showPassword"> | ||
<mat-icon>{{ showPassword ? 'visibility_off' : 'visibility' }}</mat-icon> | ||
</button> | ||
</mat-form-field> | ||
|
||
<button mat-raised-button color="primary" type="submit" [disabled]="loginForm.invalid">Log In</button> | ||
</form> | ||
<button mat-stroked-button color="blue"> | ||
Login | ||
</button> | ||
</form> | ||
</mat-card-content> | ||
<mat-card-actions> | ||
<mat-card-subtitle>Don't have an account?</mat-card-subtitle> | ||
<a mat-button routerLink="/register">Create an account</a> | ||
</mat-card-actions> | ||
</mat-card> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,38 +1,42 @@ | ||
import {Component, inject} from '@angular/core'; | ||
import {MatButton} from '@angular/material/button'; | ||
import {MatError, MatFormField, MatLabel} from '@angular/material/form-field'; | ||
import {MatInput} from '@angular/material/input'; | ||
import {NgIf} from '@angular/common'; | ||
import {FormBuilder, ReactiveFormsModule, Validators} from '@angular/forms'; | ||
|
||
import { Component } from '@angular/core'; | ||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; | ||
import { CommonModule } from '@angular/common'; | ||
import { ReactiveFormsModule } from '@angular/forms'; | ||
import { MatCardModule } from '@angular/material/card'; | ||
import { MatFormFieldModule } from '@angular/material/form-field'; | ||
import { MatInputModule } from '@angular/material/input'; | ||
import { MatButtonModule } from '@angular/material/button'; | ||
import { MatIconModule } from '@angular/material/icon'; | ||
|
||
@Component({ | ||
selector: 'app-login', | ||
imports: [ | ||
CommonModule, | ||
ReactiveFormsModule, | ||
MatFormField, | ||
MatInput, | ||
MatButton, | ||
NgIf, | ||
MatError, | ||
MatLabel, | ||
MatCardModule, | ||
MatFormFieldModule, | ||
MatInputModule, | ||
MatButtonModule, | ||
MatIconModule | ||
], | ||
templateUrl: './login.component.html', | ||
standalone: true, | ||
styleUrl: './login.component.css' | ||
styleUrls: ['./login.component.css'], | ||
}) | ||
export class LoginComponent { | ||
fb = inject(FormBuilder); | ||
|
||
loginForm = this.fb.nonNullable.group({ | ||
username: ['', [Validators.required, Validators.minLength(4)]], | ||
password: ['', [Validators.required, Validators.pattern('^(?=.*[A-Z])(?=.*[0-9])(?=.*[a-z]).{8,}$')]], | ||
}); | ||
loginForm: FormGroup; | ||
showPassword: boolean = false; | ||
|
||
constructor(private fb: FormBuilder) { | ||
this.loginForm = this.fb.group({ | ||
email: ['', [Validators.required, Validators.email]], | ||
password: ['', Validators.required], | ||
}); | ||
} | ||
|
||
onSubmit(){ | ||
onSubmit() { | ||
if (this.loginForm.valid) { | ||
console.log('Form Submitted!', this.loginForm.value); | ||
console.log('Login successful:', this.loginForm.value); | ||
} | ||
} | ||
} |