🚧 wip

Author: mckenziearts

src/app/modules/authentication/pages/login/login.component.html

@@ -6,6 +6,9 @@ <h2 class="mt-6 text-3xl font-semibold text-slate-900">Connectez-vous</h2>
   </p>
 </div>
 
+<!-- Validation Errors -->
+<cosna-errors *ngIf="error$ | async; let error" [message]="error" class="mt-4"></cosna-errors>
+
 <form [formGroup]="form" (submit)="submit()" class="mt-10 space-y-6">
   <!-- Email Address -->
   <div>
@@ -38,8 +41,8 @@ <h2 class="mt-6 text-3xl font-semibold text-slate-900">Connectez-vous</h2>
   </div>
 
   <div>
-    <cosna-button-primary type="submit" class="relative justify-center w-full group">
-      <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+    <cosna-button-primary type="submit" class="relative justify-center w-full group disabled:opacity-50 disabled:cursor-not-allowed" [loading$]="(loading$)">
+      <span *ngIf="!(loading$ | async)" class="absolute inset-y-0 left-0 flex items-center pl-3">
         <svg class="w-5 h-5 text-primary-500 group-hover:text-primary-400" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
           <path fill-rule="evenodd" clip-rule="evenodd" d="M10 1C7.51472 1 5.5 3.01472 5.5 5.5V9H5C3.89543 9 3 9.89543 3 11V17C3 18.1046 3.89543 19 5 19H15C16.1046 19 17 18.1046 17 17V11C17 9.89543 16.1046 9 15 9H14.5V5.5C14.5 3.01472 12.4853 1 10 1ZM13 9V5.5C13 3.84315 11.6569 2.5 10 2.5C8.34315 2.5 7 3.84315 7 5.5V9H13Z" />
         </svg>

src/app/modules/authentication/pages/login/login.component.ts

@@ -4,7 +4,7 @@ import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
 
 import { authenticateAction } from '../../store/auth.actions';
-import { selectError } from '../../store/auth.selectors';
+import { selectError, selectLoading } from '../../store/auth.selectors';
 
 @Component({
   templateUrl: './login.component.html',
@@ -15,14 +15,14 @@ export class LoginComponent implements OnInit {
     password: ['', Validators.required],
   });
   public error$: Observable<string | null> = this.store.select(selectError);
+  public loading$: Observable<boolean> = this.store.select(selectLoading);
 
   constructor(private formBuilder: FormBuilder, private store: Store) {}
 
   ngOnInit(): void {}
 
   public submit() {
     if (this.form.valid) {
-      // console.log(this.form.getRawValue());
       this.store.dispatch(authenticateAction({ credentials: this.form.getRawValue() }));
     }
   }

src/app/modules/authentication/store/auth.effects.ts

@@ -24,7 +24,7 @@ export class AuthEffects {
           catchError((error) => {
             return of(
               AuthActions.authenticateFailureAction({
-                error: error?.message ?? 'Unknown error occurred',
+                error: error.error?.message ?? 'Unknown error occurred',
               })
             )
           })

src/app/modules/user/interfaces/user.interface.ts

@@ -1,3 +1,10 @@
+export interface AuthResponse {
+  user: User;
+  access_token: string;
+  token_type: string;
+  expires_at: Date;
+}
+
 export interface User {
   id: number;
   name: string;

src/app/shared/shared.module.ts

@@ -6,12 +6,14 @@ import { ThemeModule } from './themes/theme.module';
 
 import { OverlapingLabelComponent } from './components/inputs/overlaping-label/overlaping-label.component';
 import { PrimaryComponent as ButtonPrimary } from './components/buttons/primary/primary.component';
+import { ErrorComponent } from './components/error/error.component';
 
 
 const MODULES = [CommonModule, ThemeModule];
 const DECLARATIONS = [
   ButtonPrimary,
   OverlapingLabelComponent,
+  ErrorComponent,
 ];
 
 @NgModule({