Enhance Otp page

.vscode/launch.json

@@ -3,17 +3,11 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "command": "npm run start",
+      "command": "npm run serve",
       "name": "serve:local",
       "request": "launch",
       "type": "node-terminal"
     },
-    {
-      "command": "npm run start:local:dev",
-      "name": "serve:local:dev",
-      "request": "launch",
-      "type": "node-terminal"
-    },
     {
       "command": "npm run build:prod",
       "name": "build:prod",

src/app/modules/auth/data-access/+state/auth.effects.ts

@@ -1,33 +1,6 @@
 import { Injectable } from '@angular/core';
-import { Actions, createEffect, ofType } from '@ngrx/effects';
-import { catchError, map, of, switchMap } from 'rxjs';
-import { AuthApiService } from '../apis/auth-api.service';
-import { AuthService } from '../services/auth.service';
-
-import * as CoreActions from '../../../core/+state/core.actions';
-import { UserWithTokenResponse } from '../dto/auth.dto';
-import * as AuthActions from './auth.actions';
 
 @Injectable()
 export class AuthEffects {
-  constructor(
-    private readonly actions$: Actions,
-    private authApi: AuthApiService,
-    private authService: AuthService
-  ) {}
-
-  login$ = createEffect(() =>
-    this.actions$.pipe(
-      ofType(AuthActions.login),
-      switchMap(({ model }) => {
-        return this.authApi.login(model).pipe(
-          map((result: UserWithTokenResponse) => {
-            this.authService.storeUserTokens(result);
-            return CoreActions.loginSuccess({ result });
-          }),
-          catchError((error) => of(AuthActions.LoginFailure({ error })))
-        );
-      })
-    )
-  );
+  constructor() {}
 }

src/app/modules/auth/data-access/services/auth.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { Router } from '@angular/router';
-import { firstValueFrom } from 'rxjs';
+import { Observable, tap } from 'rxjs';
 import { CoreFacade, StorageService } from 'src/app/modules/core';
 import { AuthApiService } from '../apis/auth-api.service';
 import { LoginDTO, UserWithTokenResponse } from '../dto/auth.dto';
@@ -18,12 +18,13 @@ export class AuthService {
     this.storage.saveAccessToken(result.accessToken);
   }
 
-  async login(model: LoginDTO): Promise<void> {
-    const loginResult: UserWithTokenResponse = await firstValueFrom(
-      this.authApi.login(model)
+  login(model: LoginDTO): Observable<UserWithTokenResponse> {
+    return this.authApi.login(model).pipe(
+      tap((result) => {
+        this.storeUserTokens(result);
+        this.coreFacade.setUser(result.user);
+      })
     );
-    this.storeUserTokens(loginResult);
-    this.coreFacade.setUser(loginResult.user);
   }
 
   logout(): void {

src/app/modules/auth/feature-sign-in/otp/otp.component.html

@@ -26,13 +26,13 @@ <h5 class="text-2xl mb-3">تایید</h5>
           ورود
         </button>
         <div class="right">
-          <div *ngIf="(time | async) !== 0; else sendAgainButton">
-            {{ time | async }} <span class="op6">ثانیه</span>
+          <div *ngIf="remainingTime > 0; else sendAgainButton">
+            {{ remainingTime }} <span class="op6">ثانیه</span>
           </div>
           <ng-template #sendAgainButton>
             <button
               mat-flat-button
-              [disabled]="inProgress"
+              color="primary"
               (click)="callOtpAgain()"
               class="w-full"
             >

src/app/modules/auth/feature-sign-in/otp/otp.component.ts

@@ -6,12 +6,7 @@ import {
   Validators,
 } from '@angular/forms';
 import { Router } from '@angular/router';
-import { Observable, filter } from 'rxjs';
-import {
-  CoreFacade,
-  SnackbarService,
-  StorageService,
-} from 'src/app/modules/core';
+import { SnackbarService, StorageService } from 'src/app/modules/core';
 import { NumberUtility } from 'src/app/shared/utilities';
 import { SubSink } from 'subsink';
 import { AuthApiService } from '../../data-access/apis/auth-api.service';
@@ -29,7 +24,6 @@ export class OtpComponent implements OnInit {
     private authService: AuthService,
     private authApi: AuthApiService,
     private storage: StorageService,
-    private coreFacade: CoreFacade,
     private snackbar: SnackbarService
   ) {}
 
@@ -41,25 +35,17 @@ export class OtpComponent implements OnInit {
   });
 
   subsink = new SubSink();
-  time: Observable<number> = new Observable();
+  remainingTime: number = 0;
   inProgress = false;
   ngOnInit(): void {
     this.startCountDownTimer();
-    this.listenStore();
-    this.time.subscribe((number: number) => {
-      if (number === 0) {
-        this.form.controls['code'].reset();
-      }
-    });
   }
 
   startCountDownTimer(): void {
-    this.time = NumberUtility.countDown(180);
-  }
+    NumberUtility.countDown(2).subscribe((value) => {
+      this.remainingTime = value;
 
-  listenStore() {
-    this.coreFacade.user$.pipe(filter((u) => !!u)).subscribe((user) => {
-      this.router.navigate(['panel/project/list']);
+      if (this.remainingTime === 0) this.form.controls['code'].reset();
     });
   }
 
@@ -70,7 +56,14 @@ export class OtpComponent implements OnInit {
       password: this.form.controls['code'].value,
     };
 
-    this.authService.login(model);
+    this.authService.login(model).subscribe({
+      next: (result) => {
+        this.router.navigate(['panel/project/list']);
+      },
+      error: (error: Error) => {
+        this.snackbar.fail(error.message);
+      },
+    });
   }
 
   private standardizePhoneNumber(phoneNumber: string): string {