- Forgot password? - Reset -
++ Forgot password? + Reset +
+Donβt have an account? Sign up diff --git a/src/app/demo/pages/authentication/auth-signin/auth-signin.component.scss b/src/app/demo/pages/authentication/auth-signin/auth-signin.component.scss index e69de29b..e396528b 100644 --- a/src/app/demo/pages/authentication/auth-signin/auth-signin.component.scss +++ b/src/app/demo/pages/authentication/auth-signin/auth-signin.component.scss @@ -0,0 +1,12 @@ +#togglePassword { + cursor: pointer; + position: absolute; + right: 15px; + top: 50%; + transform: translateY(-50%); + + ::ng-deep.datta-rtl & { + right: auto; + left: 15px; + } +} diff --git a/src/app/demo/pages/authentication/auth-signin/auth-signin.component.ts b/src/app/demo/pages/authentication/auth-signin/auth-signin.component.ts index 5c6d0197..657fa3e7 100644 --- a/src/app/demo/pages/authentication/auth-signin/auth-signin.component.ts +++ b/src/app/demo/pages/authentication/auth-signin/auth-signin.component.ts @@ -1,10 +1,47 @@ -import { Component } from '@angular/core'; +// angular import +import { ChangeDetectorRef, Component, inject, signal } from '@angular/core'; +import { CommonModule } from '@angular/common'; import { RouterModule } from '@angular/router'; +import { email, Field, form, minLength, required } from '@angular/forms/signals'; + +// project import +import { SharedModule } from 'src/app/theme/shared/shared.module'; @Component({ selector: 'app-auth-signin', - imports: [RouterModule], + imports: [CommonModule, RouterModule, SharedModule, Field], templateUrl: './auth-signin.component.html', styleUrls: ['./auth-signin.component.scss'] }) -export class AuthSigninComponent {} +export class AuthSigninComponent { + private cd = inject(ChangeDetectorRef); + + submitted = signal(false); + error = signal(''); + showPassword = signal(false); + + loginModal = signal<{ email: string; password: string }>({ + email: '', + password: '' + }); + + loginForm = form(this.loginModal, (schemaPath) => { + required(schemaPath.email, { message: 'Email is required' }); + email(schemaPath.email, { message: 'Enter a valid email address' }); + required(schemaPath.password, { message: 'Password is required' }); + minLength(schemaPath.password, 8, { message: 'Password must be at least 8 characters' }); + }); + + onSubmit(event: Event) { + this.submitted.set(true); + this.error.set(''); + event.preventDefault(); + const credentials = this.loginModal(); + console.log('login user logged in with:', credentials); + this.cd.detectChanges(); + } + + togglePasswordVisibility() { + this.showPassword.set(!this.showPassword()); + } +} diff --git a/src/app/demo/pages/authentication/auth-signup/auth-signup.component.html b/src/app/demo/pages/authentication/auth-signup/auth-signup.component.html index 28e2b1c9..1dddeb61 100644 --- a/src/app/demo/pages/authentication/auth-signup/auth-signup.component.html +++ b/src/app/demo/pages/authentication/auth-signup/auth-signup.component.html @@ -8,36 +8,96 @@
Already have an account? Log in diff --git a/src/app/demo/pages/authentication/auth-signup/auth-signup.component.scss b/src/app/demo/pages/authentication/auth-signup/auth-signup.component.scss index e69de29b..e396528b 100644 --- a/src/app/demo/pages/authentication/auth-signup/auth-signup.component.scss +++ b/src/app/demo/pages/authentication/auth-signup/auth-signup.component.scss @@ -0,0 +1,12 @@ +#togglePassword { + cursor: pointer; + position: absolute; + right: 15px; + top: 50%; + transform: translateY(-50%); + + ::ng-deep.datta-rtl & { + right: auto; + left: 15px; + } +} diff --git a/src/app/demo/pages/authentication/auth-signup/auth-signup.component.ts b/src/app/demo/pages/authentication/auth-signup/auth-signup.component.ts index e4c68321..d24b4cab 100644 --- a/src/app/demo/pages/authentication/auth-signup/auth-signup.component.ts +++ b/src/app/demo/pages/authentication/auth-signup/auth-signup.component.ts @@ -1,10 +1,49 @@ -import { Component } from '@angular/core'; +// angular import +import { ChangeDetectorRef, Component, inject, signal } from '@angular/core'; +import { CommonModule } from '@angular/common'; import { RouterModule } from '@angular/router'; +import { email, Field, form, minLength, required } from '@angular/forms/signals'; + +// project import +import { SharedModule } from 'src/app/theme/shared/shared.module'; @Component({ selector: 'app-auth-signup', - imports: [RouterModule], + imports: [CommonModule, RouterModule, SharedModule, Field], templateUrl: './auth-signup.component.html', styleUrls: ['./auth-signup.component.scss'] }) -export class AuthSignupComponent {} +export class AuthSignupComponent { + private cd = inject(ChangeDetectorRef); + + submitted = signal(false); + error = signal(''); + showPassword = signal(false); + + registerModel = signal<{ email: string; password: string; username: string }>({ + email: '', + password: '', + username: '' + }); + + registerForm = form(this.registerModel, (schemaPath) => { + required(schemaPath.email, { message: 'Email is required' }); + email(schemaPath.email, { message: 'Enter a valid email address' }); + required(schemaPath.password, { message: 'Password is required' }); + minLength(schemaPath.password, 8, { message: 'Password must be at least 8 characters' }); + required(schemaPath.username, { message: 'Username is required' }); + }); + + onSubmit(event: Event) { + this.submitted.set(true); + this.error.set(''); + event.preventDefault(); + const credentials = this.registerModel(); + console.log('register user logged in with:', credentials); + this.cd.detectChanges(); + } + + togglePasswordVisibility() { + this.showPassword.set(!this.showPassword()); + } +} diff --git a/src/app/demo/pages/form-element/form-element.html b/src/app/demo/pages/form-element/form-element.html index 19aa5750..ba0ab889 100644 --- a/src/app/demo/pages/form-element/form-element.html +++ b/src/app/demo/pages/form-element/form-element.html @@ -5,7 +5,7 @@