feat: add login page

apps/taiga-lumbermill/src/components/app/app.routes.ts

@@ -48,6 +48,13 @@ export const appRoutes: Route[] = [
                 (mod) => mod.CommonPageComponent,
             ),
     },
+    {
+        path: 'login',
+        loadComponent: async () =>
+            import('../../dashboards/login/login.component').then(
+                (mod) => mod.LoginComponent,
+            ),
+    },
     {
         path: 'sign-up',
         loadComponent: async () =>

apps/taiga-lumbermill/src/dashboards/common-page/common-page.component.html

@@ -49,6 +49,23 @@
             </header>
         </div>
     </div>
+    <div
+        routerLink="/login"
+        tuiAppearance="whiteblock"
+        tuiCardLarge="normal"
+        class="card"
+    >
+        <div>
+            <header tuiHeader>
+                <h2
+                    tuiTitle
+                    [style.text-align]="'center'"
+                >
+                    Log in
+                </h2>
+            </header>
+        </div>
+    </div>
     <div
         routerLink="/sign-up"
         tuiAppearance="whiteblock"

apps/taiga-lumbermill/src/dashboards/login/login.component.html

@@ -0,0 +1,128 @@
+<div
+    tuiAppearance="whiteblock"
+    tuiCardLarge="normal"
+    class="card"
+>
+    <header tuiHeader>
+        <h2
+            tuiTitle
+            [style.text-align]="'center'"
+        >
+            Log in
+        </h2>
+    </header>
+    <form
+        [formGroup]="form"
+        (submit)="onSubmit()"
+    >
+        <tui-input
+            formControlName="email"
+            type="email"
+            class="block-input"
+        >
+            email
+            <input tuiTextfieldLegacy />
+        </tui-input>
+
+        <tui-error
+            formControlName="email"
+            class="error"
+            [error]="[] | tuiFieldError | async"
+        />
+
+        <tui-input-password
+            formControlName="password"
+            type="password"
+            class="block-input"
+        >
+            password
+            <input tuiTextfieldLegacy />
+        </tui-input-password>
+        <tui-error
+            formControlName="password"
+            class="error"
+            [error]="[] | tuiFieldError | async"
+        />
+        <div class="under-password">
+            <label tuiLabel>
+                <input
+                    checked
+                    formControlName="rememberMe"
+                    tuiCheckbox
+                    type="checkbox"
+                />
+                <span [style.color]="'var(--tui-text-secondary)'">Remember me</span>
+            </label>
+            <a tuiLink>Forgot password?</a>
+        </div>
+
+        <tui-loader
+            [inheritColor]="true"
+            [overlay]="true"
+            [showLoader]="submitLoader()"
+            [style.width]="'100%'"
+        >
+            <button
+                size="m"
+                tuiButton
+                [style.width]="'100%'"
+            >
+                Log in
+            </button>
+        </tui-loader>
+        <div class="or">
+            <hr class="line" />
+            <p
+                tuiSubtitle
+                class="tui-space_top-0 tui-space_bottom-0"
+            >
+                or
+            </p>
+            <hr class="line" />
+        </div>
+        <p class="tui-space_top-2 tui-space_bottom-2 icons-title">Login with</p>
+        <div class="icons">
+            <button
+                appearance="icon"
+                tuiButton
+                class="icon-login"
+            >
+                <img
+                    alt="google icon"
+                    src="./google.svg"
+                    class="icon-login"
+                />
+            </button>
+            <button
+                appearance="icon"
+                tuiButton
+                class="icon-login"
+            >
+                <img
+                    alt="github icon"
+                    src="./github-mark.svg"
+                    class="icon-login"
+                />
+            </button>
+            <button
+                appearance="icon"
+                tuiButton
+                class="icon-login"
+            >
+                <img
+                    alt="apple icon"
+                    src="./apple.svg"
+                    class="icon-login"
+                />
+            </button>
+        </div>
+        <a
+            tuiLink
+            class="center"
+            [style.margin-top]="'0.5rem'"
+        >
+            Don't have an account?
+            <span [style.font-weight]="'500'">Sign up</span>
+        </a>
+    </form>
+</div>

apps/taiga-lumbermill/src/dashboards/login/login.component.less

@@ -0,0 +1,82 @@
+:host {
+    height: calc(100vh - 3rem);
+}
+
+.card {
+    top: 50%;
+    bottom: 50%;
+    width: max-content;
+    margin: auto;
+    transform: translateY(-50%);
+    height: max-content;
+}
+
+.block-input {
+    margin-bottom: 0.3rem;
+    width: 20rem;
+
+    @media (max-width: 29rem) {
+        width: 16rem;
+    }
+}
+
+.center {
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.under-password {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    margin-bottom: 1.5rem;
+}
+
+.or {
+    display: flex;
+    margin-top: 0.5rem;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    color: var(--tui-text-secondary);
+    gap: 0.5rem;
+}
+
+.line {
+    flex-grow: 1;
+}
+
+.icon-login {
+    transition: opacity 0.3s;
+    width: 1.8rem;
+    height: 1.8rem;
+
+    &:hover {
+        opacity: 0.8;
+    }
+
+    &:active {
+        opacity: 0.95;
+    }
+}
+
+.icons {
+    display: flex;
+    gap: 1rem;
+}
+
+.icons-title {
+    font-weight: 700;
+}
+
+.error {
+    margin-right: auto;
+    margin-bottom: 0.8rem;
+}

apps/taiga-lumbermill/src/dashboards/login/login.component.ts

@@ -0,0 +1,91 @@
+import {CommonModule} from '@angular/common';
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
+import {toSignal} from '@angular/core/rxjs-interop';
+import {FormControl, FormGroup, 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, of, startWith, Subject, switchMap, timer} from 'rxjs';
+
+@Component({
+    standalone: true,
+    selector: 'lmb-login',
+    imports: [
+        CommonModule,
+        ReactiveFormsModule,
+        TuiAppearance,
+        TuiButton,
+        TuiCardLarge,
+        TuiCheckbox,
+        TuiError,
+        TuiFieldErrorPipe,
+        TuiHeader,
+        TuiInputModule,
+        TuiInputPasswordModule,
+        TuiLabel,
+        TuiLink,
+        TuiLoader,
+        TuiTitle,
+    ],
+    templateUrl: './login.component.html',
+    styleUrl: './login.component.less',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: TUI_VALIDATION_ERRORS,
+            useValue: {
+                required: "Value can't be empty",
+                email: 'Invalid email',
+                minlength: ({requiredLength}: {requiredLength: string}) =>
+                    of(`Minimum length — ${requiredLength}`),
+            },
+        },
+    ],
+})
+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, Validators.minLength(5)]),
+        rememberMe: new FormControl(false),
+    });
+
+    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 {
+        if (!this.form.valid) {
+            return;
+        }
+
+        this.form.disable();
+        this.submit$.next();
+    }
+}