Skip to content

Commit

Permalink
Merge pull request #2 from zhacky/Build-Registration-and-Login-Foms
Browse files Browse the repository at this point in the history
Login Form
  • Loading branch information
zhacky authored Dec 24, 2024
2 parents f1915d5 + f64a58d commit cef2ca7
Show file tree
Hide file tree
Showing 6 changed files with 138 additions and 48 deletions.
21 changes: 21 additions & 0 deletions src/app/app.component.css
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 */
}

4 changes: 2 additions & 2 deletions src/app/app.component.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<mat-nav-list>
<!-- <mat-nav-list>
<mat-list-item>
<a routerLink='/'>Home</a>
</mat-list-item>
Expand All @@ -14,5 +14,5 @@
</mat-list-item>
</mat-nav-list>
<div class='content'>
</div>
</div> -->
<router-outlet/>
1 change: 1 addition & 0 deletions src/app/app.routes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {RegisterComponent} from './core/auth/register/register.component';
import {DashboardComponent} from './features/dashboard/dashboard.component';

export const routes: Routes = [
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{path: 'login', component: LoginComponent},
{path: 'register', component: RegisterComponent},
{path: 'dashboard', component: DashboardComponent},
Expand Down
52 changes: 52 additions & 0 deletions src/app/core/auth/login/login.component.css
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;
}





60 changes: 36 additions & 24 deletions src/app/core/auth/login/login.component.html
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>
48 changes: 26 additions & 22 deletions src/app/core/auth/login/login.component.ts
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);
}
}
}

0 comments on commit cef2ca7

Please sign in to comment.