begin auth

client/src/app/app.routes.ts

@@ -2,6 +2,7 @@ import { Routes } from '@angular/router';
 import { ScreenSend } from './screens/screen-send/screen-send';
 import { ScreenReceive } from './screens/screen-receive/screen-receive';
 import { ScreenProfile } from './screens/screen-profile/screen-profile';
+import { ScreenLogin } from './screens/screen-login/screen-login';
 
 export const routes: Routes = [
     {
@@ -9,6 +10,10 @@ export const routes: Routes = [
         pathMatch:'full',
         redirectTo: '/send'
     },
+    {
+        path: 'login',
+        component: ScreenLogin,
+    },
     {
         path:'send',
         component: ScreenSend,

client/src/app/screens/screen-login/screen-login.html

@@ -0,0 +1,79 @@
+<div class="d-flex align-items-center min-vh-100 bg-light">
+  <div class="container">
+    <div class="row justify-content-center">
+      <div class="col-lg-4 col-md-6 col-sm-8">
+        <div class="card shadow-sm">
+          <div class="card-body p-4">
+            <div class="text-center mb-4">
+              <i class="bi bi-lock-fill fs-1 text-primary"></i>
+              <h3 class="mt-2">Sign In</h3>
+            </div>
+
+            <form [formGroup]="loginForm" (ngSubmit)="onSubmit()" novalidate>
+              <!-- Email -->
+              <div class="mb-3">
+                <label for="email" class="form-label">Email</label>
+                <input
+                  type="text"
+                  id="username"
+                  class="form-control"
+                  formControlName="username"
+                  placeholder="Enter your username"
+                >
+              </div>
+
+              <!-- Password -->
+              <div class="mb-3">
+                <label for="password" class="form-label">Password</label>
+                <div class="input-group">
+                  <input
+                    [type]="showPassword ? 'text' : 'password'"
+                    id="password"
+                    class="form-control"
+                    formControlName="password"
+                    placeholder="Enter your password"
+                  >
+                  <button
+                    class="btn btn-outline-secondary"
+                    type="button"
+                    (click)="showPassword = !showPassword"
+                  >
+                    <i class="bi" [class.bi-eye-fill]="showPassword" [class.bi-eye-slash-fill]="!showPassword"></i>
+                  </button>
+                </div>
+                </div>
+
+                <!-- Submit Button -->
+              <button
+                type="submit"
+                class="btn btn-primary w-100 mb-3"
+              >
+              @if (loading) {
+                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true">
+                  Signing In...
+                </span>
+              }@else {
+                <span>Sign In</span>
+              }
+              </button>
+
+
+              <!-- Error Alert -->
+              <ngb-alert
+                *ngIf="error"
+                type="danger"
+                (closed)="error = null"
+                [dismissible]="true"
+              >
+                {{ error }}
+              </ngb-alert>
+
+            </form>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</div>
+

client/src/app/screens/screen-login/screen-login.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ScreenLogin } from './screen-login';
+
+describe('ScreenLogin', () => {
+  let component: ScreenLogin;
+  let fixture: ComponentFixture<ScreenLogin>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ScreenLogin],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ScreenLogin);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

client/src/app/screens/screen-login/screen-login.ts

@@ -0,0 +1,55 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { Validators, FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-screen-login',
+  imports: [FormsModule, NgbModule, ReactiveFormsModule, CommonModule],
+  templateUrl: './screen-login.html',
+  styleUrl: './screen-login.less',
+})
+export class ScreenLogin {
+  loginForm: FormGroup;
+  submitted = false;
+  loading = false;
+  showPassword = false;
+  error: string | null = null;
+
+  constructor(
+    private fb: FormBuilder,
+    private router: Router
+  ) {
+    this.loginForm = this.fb.group({
+      email: ['', [Validators.required, Validators.email]],
+      password: ['', [Validators.required, Validators.minLength(6)]],
+      rememberMe: [false]
+    });
+  }
+
+  onSubmit() {
+    this.submitted = true;
+    this.error = null;
+
+    if (this.loginForm.invalid) {
+      return;
+    }
+
+    this.loading = true;
+    const { email, password, rememberMe } = this.loginForm.value;
+
+    /*
+    this.authService.login(email, password, rememberMe).subscribe({
+      next: () => {
+        this.router.navigate(['/dashboard']); // Redirect after login
+      },
+      error: (err) => {
+        this.error = err.error?.message || 'Login failed. Please try again.';
+        this.loading = false;
+      }
+    });
+  */
+  }
+}
+