chore: update login

taiga-family · Aug 22, 2024 · 22cb68b · 22cb68b
1 parent f3f95eb
commit 22cb68b
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 10 deletions.
diff --git a/apps/taiga-lumbermill/src/dashboards/login/login.component.html b/apps/taiga-lumbermill/src/dashboards/login/login.component.html
@@ -17,9 +17,9 @@
     >
         <tui-input
             formControlName="email"
-            tuiHintContent="Email"
             type="email"
             class="block-input"
+            [readOnly]="submitLoader()"
         >
             email
             <input tuiTextfieldLegacy />
@@ -34,9 +34,9 @@
 
         <tui-input-password
             formControlName="password"
-            tuiHintContent="Password"
             type="password"
             class="block-input"
+            [readOnly]="submitLoader()"
         >
             password
             <input tuiTextfieldLegacy />
@@ -65,13 +65,20 @@
             <a tuiLink>Forgot password?</a>
         </div>
 
-        <button
-            size="m"
-            tuiButton
+        <tui-loader
+            [inheritColor]="true"
+            [overlay]="true"
+            [showLoader]="submitLoader()"
             [style.width]="'100%'"
         >
-            Login
-        </button>
+            <button
+                size="m"
+                tuiButton
+                [style.width]="'100%'"
+            >
+                Login
+            </button>
+        </tui-loader>
         <div class="or">
             <hr class="line" />
             <p

diff --git a/apps/taiga-lumbermill/src/dashboards/login/login.component.less b/apps/taiga-lumbermill/src/dashboards/login/login.component.less
@@ -56,6 +56,14 @@ form {
 .iconLogin {
     width: 1.8rem;
     height: 1.8rem;
+
+    &:hover {
+        opacity: 0.8;
+    }
+
+    &:active {
+        opacity: 0.95;
+    }
 }
 
 .icons {

diff --git a/apps/taiga-lumbermill/src/dashboards/login/login.component.ts b/apps/taiga-lumbermill/src/dashboards/login/login.component.ts
@@ -1,23 +1,27 @@
 import {CommonModule} from '@angular/common';
-import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
+import {toSignal} from '@angular/core/rxjs-interop';
 import {
     FormControl,
     FormGroup,
     FormsModule,
     ReactiveFormsModule,
     Validators,
 } from '@angular/forms';
+import {Router} from '@angular/router';
 import {
     TuiAppearance,
     TuiButton,
     TuiError,
     TuiLabel,
     TuiLink,
+    TuiLoader,
     TuiTitle,
 } from '@taiga-ui/core';
 import {TUI_VALIDATION_ERRORS, TuiCheckbox, TuiFieldErrorPipe} from '@taiga-ui/kit';
 import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';
 import {TuiInputModule, TuiInputPasswordModule} from '@taiga-ui/legacy';
+import {map, startWith, Subject, switchMap, timer} from 'rxjs';
 
 @Component({
     standalone: true,
@@ -37,6 +41,7 @@ import {TuiInputModule, TuiInputPasswordModule} from '@taiga-ui/legacy';
         TuiInputPasswordModule,
         TuiLabel,
         TuiLink,
+        TuiLoader,
         TuiTitle,
     ],
     templateUrl: './login.component.html',
@@ -47,17 +52,40 @@ import {TuiInputModule, TuiInputPasswordModule} from '@taiga-ui/legacy';
             provide: TUI_VALIDATION_ERRORS,
             useValue: {
                 required: "Value can't be empty",
-                email: 'Value should be email',
+                email: 'Invalid email',
             },
         },
     ],
 })
 export class LoginComponent {
+    private readonly router = inject(Router);
     protected readonly form = new FormGroup({
         email: new FormControl('', [Validators.required, Validators.email]),
         password: new FormControl('', [Validators.required]),
         rememberMe: new FormControl(false),
     });
 
-    protected onSubmit(): void {}
+    protected readonly submit$ = new Subject<void>();
+
+    protected readonly submitLoader = toSignal(
+        this.submit$.pipe(
+            switchMap(() =>
+                timer(4000).pipe(
+                    map(() => this.goMain()),
+                    startWith(true),
+                ),
+            ),
+        ),
+        {initialValue: false},
+    );
+
+    protected goMain(): boolean {
+        this.router.navigate(['']);
+
+        return false;
+    }
+
+    protected onSubmit(): void {
+        this.submit$.next();
+    }
 }