feat: add login page

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

@@ -48,5 +48,12 @@ export const appRoutes: Route[] = [
                 (mod) => mod.CommonPageComponent,
             ),
     },
+    {
+        path: 'login',
+        loadComponent: async () =>
+            import('../../dashboards/login/login.component').then(
+                (mod) => mod.LoginComponent,
+            ),
+    },
     {path: '**', redirectTo: 'dashboards'},
 ];

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

@@ -49,4 +49,21 @@
             </header>
         </div>
     </div>
+    <div
+        routerLink="/login"
+        tuiAppearance="whiteblock"
+        tuiCardLarge="normal"
+        class="card"
+    >
+        <div>
+            <header tuiHeader>
+                <h2
+                    tuiTitle
+                    [style.text-align]="'center'"
+                >
+                    Login
+                </h2>
+            </header>
+        </div>
+    </div>
 </div>

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

@@ -0,0 +1,130 @@
+<div
+    tuiAppearance="whiteblock"
+    tuiCardLarge="normal"
+    class="card"
+>
+    <header tuiHeader>
+        <h2
+            tuiTitle
+            [style.text-align]="'center'"
+        >
+            Login
+        </h2>
+    </header>
+    <form
+        [formGroup]="form"
+        (submit)="onSubmit()"
+    >
+        <tui-input
+            formControlName="email"
+            tuiHintContent="Email"
+            type="email"
+            class="block-input"
+        >
+            email
+            <input tuiTextfieldLegacy />
+        </tui-input>
+
+        <tui-error
+            formControlName="email"
+            [error]="[] | tuiFieldError | async"
+            [style.margin-bottom]="'0.8rem'"
+            [style.margin-right]="'auto'"
+        />
+
+        <tui-input-password
+            formControlName="password"
+            tuiHintContent="Password"
+            type="password"
+            class="block-input"
+        >
+            password
+            <input tuiTextfieldLegacy />
+        </tui-input-password>
+        <tui-error
+            formControlName="password"
+            [error]="[] | tuiFieldError | async"
+            [style.margin-bottom]="'0.8rem'"
+            [style.margin-right]="'auto'"
+        />
+        <div class="under-password">
+            <label tuiLabel>
+                <input
+                    checked
+                    formControlName="rememberMe"
+                    tuiCheckbox
+                    type="checkbox"
+                />
+                <span
+                    tuiTitle
+                    [style.color]="'var(--tui-text-secondary)'"
+                >
+                    Remember me
+                </span>
+            </label>
+            <a tuiLink>Forgot password?</a>
+        </div>
+
+        <button
+            size="m"
+            tuiButton
+            [style.width]="'100%'"
+        >
+            Login
+        </button>
+        <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="iconLogin"
+            >
+                <img
+                    alt=""
+                    src="./google.svg"
+                    class="iconLogin"
+                />
+            </button>
+            <button
+                appearance="icon"
+                tuiButton
+                class="iconLogin"
+            >
+                <img
+                    alt=""
+                    src="./github-mark.svg"
+                    class="iconLogin"
+                />
+            </button>
+            <button
+                appearance="icon"
+                tuiButton
+                class="iconLogin"
+            >
+                <img
+                    alt=""
+                    src="./apple.svg"
+                    class="iconLogin"
+                />
+            </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,68 @@
+: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;
+}
+
+.iconLogin {
+    width: 1.8rem;
+    height: 1.8rem;
+}
+
+.icons {
+    display: flex;
+    gap: 1rem;
+}
+
+.icons-title {
+    font-weight: 700;
+}

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

@@ -0,0 +1,63 @@
+import {CommonModule} from '@angular/common';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {
+    FormControl,
+    FormGroup,
+    FormsModule,
+    ReactiveFormsModule,
+    Validators,
+} from '@angular/forms';
+import {
+    TuiAppearance,
+    TuiButton,
+    TuiError,
+    TuiLabel,
+    TuiLink,
+    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';
+
+@Component({
+    standalone: true,
+    selector: 'lmb-login',
+    imports: [
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        TuiAppearance,
+        TuiButton,
+        TuiCardLarge,
+        TuiCheckbox,
+        TuiError,
+        TuiFieldErrorPipe,
+        TuiHeader,
+        TuiInputModule,
+        TuiInputPasswordModule,
+        TuiLabel,
+        TuiLink,
+        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: 'Value should be email',
+            },
+        },
+    ],
+})
+export class LoginComponent {
+    protected readonly form = new FormGroup({
+        email: new FormControl('', [Validators.required, Validators.email]),
+        password: new FormControl('', [Validators.required]),
+        rememberMe: new FormControl(false),
+    });
+
+    protected onSubmit(): void {}
+}