init
This commit is contained in:
@@ -7,20 +7,20 @@
|
||||
class="flex flex-col items-center justify-center px-12 py-10 h-auto bg-surface-card border border-surface-border rounded-lg shadow w-full max-w-md"
|
||||
>
|
||||
<div class="flex flex-col gap-4 text-center mb-10 items-center justify-center">
|
||||
<img [src]="logo" alt="صندوق فروشگاهی" class="w-20 h-auto" />
|
||||
<span class="text-lg font-bold"> به پنل صندوق فروشگاهی خوش آمدید. </span>
|
||||
<img [src]="logo" alt="مدیریت کسبوکار" class="w-20 h-auto" />
|
||||
<span class="text-lg font-bold"> به پنل مدیریت کسبوکار خوش آمدید. </span>
|
||||
</div>
|
||||
|
||||
@if (activeStep() === "login") {
|
||||
<app-login
|
||||
[redirectUrl]="redirectUrl"
|
||||
[loginApiUrl]="loginApiUrl"
|
||||
[defaultRole]="role"
|
||||
class="w-full"
|
||||
(onSuccessfullySubmit)="onLoggedIn($event)"
|
||||
(onToSignup)="toSignUp()"
|
||||
/>
|
||||
} @else if (activeStep() === "signup") {
|
||||
<!-- @if (activeStep() === "login") { -->
|
||||
<app-login
|
||||
[redirectUrl]="redirectUrl"
|
||||
[loginApiUrl]="loginApiUrl"
|
||||
[defaultRole]="role"
|
||||
class="w-full"
|
||||
(onSuccessfullySubmit)="onLoggedIn($event)"
|
||||
(onToSignup)="toSignUp()"
|
||||
/>
|
||||
<!-- } @else if (activeStep() === "signup") {
|
||||
<auth-signup role="TEACHER" class="w-full" />
|
||||
} @else if (activeStep() === "otp") {
|
||||
<app-otp class="w-full" />
|
||||
@@ -31,7 +31,7 @@
|
||||
(onSubmit)="onModifyLoginInfo()"
|
||||
class="w-full"
|
||||
/>
|
||||
}
|
||||
} -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,16 +4,13 @@ import { Component, EventEmitter, inject, Input, Output, signal } from '@angular
|
||||
import { Router } from '@angular/router';
|
||||
import images from 'src/assets/images';
|
||||
import { LoginComponent } from './login/login.component';
|
||||
import { ModifyLoginInfoComponent } from './modifyLoginInfo/modify-login-info.component';
|
||||
import { OTPComponent } from './otp/otp.component';
|
||||
import { SignupComponent } from './signup/signup.component';
|
||||
|
||||
type TSteps = 'login' | 'otp' | 'modifyLoginInfo' | 'signup';
|
||||
|
||||
@Component({
|
||||
selector: 'app-auth',
|
||||
templateUrl: './auth.component.html',
|
||||
imports: [LoginComponent, OTPComponent, ModifyLoginInfoComponent, SignupComponent],
|
||||
imports: [LoginComponent],
|
||||
})
|
||||
export class AuthComponent {
|
||||
@Input() redirectUrl!: string;
|
||||
@@ -39,11 +36,11 @@ export class AuthComponent {
|
||||
|
||||
onLoggedIn = (data: IAuthResponse) => {
|
||||
this.toastService.success({ text: 'شما با موفقیت وارد شدید.' });
|
||||
this.selectedRole.set(data.role.toUpperCase() as TRoles);
|
||||
if (data.mustChangePassword) {
|
||||
this.activeStep.set('modifyLoginInfo');
|
||||
return;
|
||||
}
|
||||
this.selectedRole.set(data.account.type.toUpperCase() as TRoles);
|
||||
// if (data.mustChangePassword) {
|
||||
// this.activeStep.set('modifyLoginInfo');
|
||||
// return;
|
||||
// }
|
||||
|
||||
if (this.submit.observed) {
|
||||
return this.submit.emit(Promise.resolve(true));
|
||||
@@ -63,17 +60,17 @@ export class AuthComponent {
|
||||
|
||||
if (!redirectUrl) {
|
||||
switch (this.selectedRole()) {
|
||||
case 'SCHOOL':
|
||||
redirectUrl = '/schools';
|
||||
case 'SUPERADMIN':
|
||||
redirectUrl = '/super_admin';
|
||||
break;
|
||||
case 'ADMIN':
|
||||
redirectUrl = '/admin';
|
||||
break;
|
||||
case 'TEACHER':
|
||||
redirectUrl = '/teachers';
|
||||
case 'POS':
|
||||
redirectUrl = '/poss';
|
||||
break;
|
||||
case 'STUDENTS':
|
||||
redirectUrl = '/students';
|
||||
case 'PARTNER':
|
||||
redirectUrl = '/partner';
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -46,12 +46,12 @@
|
||||
</span>
|
||||
</div> -->
|
||||
<div class="mb-6 flex flex-col items-center gap-4 w-[16rem] mx-auto">
|
||||
<div
|
||||
class="relative bg-surface-ground rounded-xl overflow-hidden shadow shrink-0 border border-[var(--p-inputtext-border-color)] w-full aspect-[2]"
|
||||
<!-- <div
|
||||
class="relative bg-surface-ground rounded-xl overflow-hidden shadow shrink-0 border border-(--p-inputtext-border-color) w-full aspect-[2]"
|
||||
>
|
||||
<img p-image id="captchaImage" [src]="captchaImageSrc()" class="w-full object-contain" />
|
||||
@if (isCaptchaLoading()) {
|
||||
<div class="!absolute inset-0 bg-surface-hover/50 flex items-center justify-center">
|
||||
<div class="absolute! inset-0 bg-surface-hover/50 flex items-center justify-center">
|
||||
<p-progress-spinner
|
||||
strokeWidth="4"
|
||||
fill="transparent"
|
||||
@@ -61,14 +61,14 @@
|
||||
</div>
|
||||
} @else if (isCaptchaExpired()) {
|
||||
<div
|
||||
class="!absolute inset-0 bg-surface-hover/70 flex items-center justify-center text-center p-2 text-sm font-medium cursor-pointer"
|
||||
class="absolute! inset-0 bg-surface-hover/70 flex items-center justify-center text-center p-2 text-sm font-medium cursor-pointer"
|
||||
(click)="onRefreshCaptcha()"
|
||||
>
|
||||
<i class="pi pi-refresh !text-3xl text-gray-500"></i>
|
||||
<i class="pi pi-refresh text-3xl! text-gray-500"></i>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<p-inputgroup>
|
||||
</div> -->
|
||||
<!-- <p-inputgroup>
|
||||
<input
|
||||
pInputText
|
||||
id="captcha"
|
||||
@@ -81,14 +81,14 @@
|
||||
<p-inputgroup-addon>
|
||||
<p-button icon="pi pi-refresh" severity="secondary" variant="text" (click)="onRefreshCaptchaImage()" />
|
||||
</p-inputgroup-addon>
|
||||
</p-inputgroup>
|
||||
</p-inputgroup> -->
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-3">
|
||||
@if (loginForm.controls.role.value === "TEACHER") {
|
||||
<!-- @if (loginForm.controls.role.value === "TEACHER") {
|
||||
<span class="w-full text-center text-sm select-none">
|
||||
برای ثبت نام در سامانه <a class="text-primary cursor-pointer" (click)="toSignup()">اینجا</a> کلیک کنید.
|
||||
</span>
|
||||
}
|
||||
} -->
|
||||
<p-button label="ورود" styleClass="w-full" size="large" [loading]="isLoading()" type="submit"></p-button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -14,7 +14,6 @@ import { InputText } from 'primeng/inputtext';
|
||||
import { Password } from 'primeng/password';
|
||||
import { ProgressSpinnerModule } from 'primeng/progressspinner';
|
||||
import { RadioButtonModule } from 'primeng/radiobutton';
|
||||
import { CaptchaService } from 'src/app/core/services/captcha.service';
|
||||
// import { CENTRAL_AUTH_ROLES } from '../../constants/central-auth-roles.const';
|
||||
|
||||
@Component({
|
||||
@@ -45,48 +44,47 @@ export class LoginComponent {
|
||||
private readonly authService = inject(AuthService);
|
||||
private readonly router = inject(Router);
|
||||
private readonly fb = inject(FormBuilder);
|
||||
private readonly captchaService = inject(CaptchaService);
|
||||
private readonly toastService = inject(ToastService);
|
||||
|
||||
readonly isLoading = computed(() => this.authService.isLoading());
|
||||
readonly errorMessage = signal<string>('');
|
||||
readonly hidePassword = signal<boolean>(true);
|
||||
readonly isCaptchaExpired = this.captchaService.captchaIsExpired;
|
||||
readonly isCaptchaLoading = this.captchaService.loading;
|
||||
readonly captchaImageSrc = this.captchaService.captchaImageSrc;
|
||||
// readonly isCaptchaExpired = this.captchaService.captchaIsExpired;
|
||||
// readonly isCaptchaLoading = this.captchaService.loading;
|
||||
// readonly captchaImageSrc = this.captchaService.captchaImageSrc;
|
||||
// readonly centralAuthRoles = CENTRAL_AUTH_ROLES;
|
||||
|
||||
readonly loginForm = this.fb.group({
|
||||
username: ['', [Validators.required]],
|
||||
password: ['', [Validators.required]],
|
||||
rememberMe: [false],
|
||||
captcha: ['', [Validators.required]],
|
||||
role: [this.defaultRole, [Validators.required]],
|
||||
// captcha: ['', [Validators.required]],
|
||||
// role: [this.defaultRole, [Validators.required]],
|
||||
});
|
||||
|
||||
selectedRole = signal<TRoles>('SCHOOL');
|
||||
selectedRole = signal<TRoles>('SUPERADMIN');
|
||||
ngOnInit() {
|
||||
this.captchaService.requestNewCaptcha();
|
||||
// this.captchaService.requestNewCaptcha();
|
||||
}
|
||||
|
||||
togglePasswordVisibility(): void {
|
||||
this.hidePassword.set(!this.hidePassword());
|
||||
}
|
||||
|
||||
resetCaptcha(): void {
|
||||
this.fb.control('captcha').setValue('');
|
||||
this.captchaService.renewCaptcha();
|
||||
}
|
||||
// resetCaptcha(): void {
|
||||
// this.fb.control('captcha').setValue('');
|
||||
// this.captchaService.renewCaptcha();
|
||||
// }
|
||||
|
||||
onRefreshCaptcha(): void {
|
||||
this.resetCaptcha();
|
||||
}
|
||||
onRefreshCaptchaImage(): void {
|
||||
this.resetCaptcha();
|
||||
// document
|
||||
// .getElementById('captchaImage')
|
||||
// ?.setAttribute('src', this.captchaService.captchaImageSrc()! + `&${new Date().getTime()}`);
|
||||
}
|
||||
// onRefreshCaptcha(): void {
|
||||
// this.resetCaptcha();
|
||||
// }
|
||||
// onRefreshCaptchaImage(): void {
|
||||
// this.resetCaptcha();
|
||||
// // document
|
||||
// // .getElementById('captchaImage')
|
||||
// // ?.setAttribute('src', this.captchaService.captchaImageSrc()! + `&${new Date().getTime()}`);
|
||||
// }
|
||||
|
||||
toSignup() {
|
||||
this.onToSignup.emit();
|
||||
@@ -95,27 +93,25 @@ export class LoginComponent {
|
||||
submit(): void {
|
||||
this.loginForm.markAllAsTouched();
|
||||
if (this.loginForm.invalid) return;
|
||||
if (!this.captchaService.captchaId()) {
|
||||
this.toastService.error({ text: 'مقدار کپچا را وارد کنید' });
|
||||
}
|
||||
// if (!this.captchaService.captchaId()) {
|
||||
// this.toastService.error({ text: 'مقدار کپچا را وارد کنید' });
|
||||
// }
|
||||
const credentials: LoginCredentials = this.loginForm.value as LoginCredentials;
|
||||
|
||||
this.authService
|
||||
.login(credentials, (this.defaultRole || this.loginForm.value.role)!)
|
||||
.subscribe({
|
||||
next: (data) => {
|
||||
this.errorMessage.set('');
|
||||
if (this.redirectUrl) {
|
||||
this.router.navigateByUrl(this.redirectUrl.replace(/\/[^/]*$/, ''));
|
||||
} else {
|
||||
this.onSuccessfullySubmit.emit(data);
|
||||
}
|
||||
},
|
||||
error: (error) => {
|
||||
this.resetCaptcha();
|
||||
this.errorMessage.set('نام کاربری یا رمز عبور اشتباه است');
|
||||
console.error('Login failed:', error);
|
||||
},
|
||||
});
|
||||
this.authService.login(credentials).subscribe({
|
||||
next: (data) => {
|
||||
this.errorMessage.set('');
|
||||
if (this.redirectUrl) {
|
||||
this.router.navigateByUrl(this.redirectUrl.replace(/\/[^/]*$/, ''));
|
||||
} else {
|
||||
this.onSuccessfullySubmit.emit(data);
|
||||
}
|
||||
},
|
||||
error: (error) => {
|
||||
// this.resetCaptcha();
|
||||
this.errorMessage.set('نام کاربری یا رمز عبور اشتباه است');
|
||||
console.error('Login failed:', error);
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<form [formGroup]="form" class="w-full flex flex-col gap-4" (ngSubmit)="submit()">
|
||||
<app-input label="نام" name="firstName" size="large" [control]="form.controls.firstName" />
|
||||
<app-input label="نام خانوادگی" name="lastName" size="large" [control]="form.controls.lastName" />
|
||||
<app-gender-select [control]="form.controls.gender" size="large" />
|
||||
<!-- <app-gender-select [control]="form.controls.gender" size="large" /> -->
|
||||
<app-input
|
||||
label="شماره تلفن همراه"
|
||||
name="mobile"
|
||||
|
||||
@@ -3,7 +3,7 @@ import { ISignupRequestPayload, IUserLoginInfo, Maybe, TRoles } from '@/core/mod
|
||||
import { ToastService } from '@/core/services/toast.service';
|
||||
import { mobileValidator, MustMatch } from '@/core/validators';
|
||||
import { password } from '@/core/validators/password.validator';
|
||||
import { GenderSelectComponent } from '@/shared/catalog';
|
||||
// import { GenderSelectComponent } from '@/shared/catalog';
|
||||
import { InputComponent } from '@/shared/components';
|
||||
import { UikitFieldComponent } from '@/uikit/uikit-field.component';
|
||||
import { CommonModule } from '@angular/common';
|
||||
@@ -33,7 +33,7 @@ import { RadioButtonModule } from 'primeng/radiobutton';
|
||||
InputGroupAddonModule,
|
||||
UikitFieldComponent,
|
||||
InputComponent,
|
||||
GenderSelectComponent,
|
||||
// GenderSelectComponent,
|
||||
],
|
||||
})
|
||||
export class SignupComponent {
|
||||
|
||||
Reference in New Issue
Block a user