first commit

templete/src/app/content/login-content/login-content.component.css

@@ -0,0 +1,19 @@
+:host {
+  display: block;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;         /* ครอบเต็มหน้าจอ */
+  overflow: hidden;      /* ปิด scroll bar */
+  box-sizing: border-box;
+}
+
+.login-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;   /* ✅ แก้ตรงนี้ จาก row → column */
+  align-items: center;      /* ✅ จัดให้อยู่กลางแนวนอน */
+  justify-content: center;  /* ✅ จัดให้อยู่กลางแนวตั้ง */
+  text-align: center;       /* ✅ ให้ข้อความตรงกลาง */
+}

templete/src/app/content/login-content/login-content.component.html

@@ -0,0 +1,11 @@
+<div class="justify-content-center flex-column">
+    <!-- <h2>Login | เข้าสู่ระบบ ({{ mode }})</h2> -->
+  @if (mode == "default") {
+    <app-login-page [mode]="mode"></app-login-page>
+  } @else if(mode == "forgot-password"){
+    <app-login-forgot (otpEventSubmit)="onOtpSendSubmit($event)" (otpVerifyEventSubmit)="onVerifySubmit($event)"></app-login-forgot>
+  }
+   <!-- @else {
+
+  } -->
+</div>

templete/src/app/content/login-content/login-content.component.ts

@@ -0,0 +1,98 @@
+import { Component, OnInit, ViewChild  } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { GeneralService } from '../../services/generalservice';
+import { LoginForgotComponent } from '../../../app/component/login-forgot/login-forgot.component';
+
+@Component({
+  selector: 'app-login-content',
+  standalone: false,
+  templateUrl: './login-content.component.html',
+  styleUrl: './login-content.component.css'
+})
+export class LoginContentComponent implements OnInit {
+ @ViewChild(LoginForgotComponent) loginForgotComponent!: LoginForgotComponent;
+  mode: 'forgot-password' | 'default' = 'default';
+
+  constructor(
+    private generalService: GeneralService,
+    private route: ActivatedRoute,
+    private router: Router
+  ) {}
+
+  ngOnInit(): void {
+     let param = this.route.snapshot.paramMap.get('mode');
+
+    if (param === 'forgot-password') {
+      this.mode = 'forgot-password';
+    } else {
+      this.router.navigate(['/login']);
+      this.mode = 'default';
+    }
+
+    switch (this.mode) {
+      case 'default':
+        break;
+
+      case 'forgot-password':
+        break;
+
+      default:
+        this.mode = 'default'; // กันพลาดไว้เลย
+        break;
+    }
+  }
+
+
+  onOtpSendSubmit(value: any){
+    let uri = 'http://49.231.182.24:1012/api/otp/send';
+    let request = {
+      email: value.email
+      // otp: value.otp
+    }
+
+    this.loginForgotComponent.isLoading = true;
+    this.generalService.postRequest(uri, request).subscribe({
+      next: (result: any) => {
+        if (result.code === '200') {
+          console.log(`✅ OTP ส่งไปที่ ${value.email}`);
+        } else {
+          console.warn('⚠️ ไม่สามารถส่ง OTP ได้:', result.message_th);
+        }
+      },
+      error: (error: any) => {
+        this.loginForgotComponent.isSendOtp = false;
+        this.loginForgotComponent.isLoading = false;
+        console.error('❌ Error sending OTP:', error);
+      },
+      complete: () => {
+        this.loginForgotComponent.isLoading = false;
+        this.loginForgotComponent.isSendOtp = true;
+        console.log('📨 OTP send request completed');
+      }
+    });
+  }
+
+  onVerifySubmit(value: any){
+      let uri = 'http://49.231.182.24:1012/api/otp/verify';
+      let request = {
+        email: value.email,
+        otp: value.otp
+    }
+    this.generalService.postRequest(uri, request).subscribe({
+      next: (result: any) => {
+        if (result.code === '200') {
+          console.log(`OTP ส่งไปยืนยันสำเร็จ`);
+        } else {
+          console.warn('⚠️ ไม่สามารถส่ง OTP ได้:', result.message_th);
+        }
+      },
+      error: (error: any) => {
+        console.error('❌ Error sending OTP:', error);
+      },
+      complete: () => {
+        this.router.navigate(['/login']);
+        console.log('📨 OTP send request completed');
+      }
+    });
+  }
+}

templete/src/app/content/main-dashboard-content/main-dashboard-content.component.html

@@ -0,0 +1 @@
+<p>main-dashboard-content works!</p>

templete/src/app/content/main-dashboard-content/main-dashboard-content.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MainDashboardContentComponent } from './main-dashboard-content.component';
+
+describe('MainDashboardContentComponent', () => {
+  let component: MainDashboardContentComponent;
+  let fixture: ComponentFixture<MainDashboardContentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [MainDashboardContentComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MainDashboardContentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

templete/src/app/content/main-dashboard-content/main-dashboard-content.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-main-dashboard-content',
+  standalone: false,
+  templateUrl: './main-dashboard-content.component.html',
+  styleUrl: './main-dashboard-content.component.css'
+})
+export class MainDashboardContentComponent {
+
+}

templete/src/app/content/sidebar-content/sidebar-content.component.css

@@ -0,0 +1,11 @@
+.layout {
+  display: flex;
+  height: 100vh;
+  width: 100%;
+}
+.main-container {
+  flex: 1;
+  background: #f5f5f5;
+  overflow-y: auto;
+  padding: 20px;
+}

templete/src/app/content/sidebar-content/sidebar-content.component.html

@@ -0,0 +1,9 @@
+<div class="flex h-screen overflow-hidden">
+  <!-- Sidebar (เฉพาะ main) -->
+  <app-sidebar></app-sidebar>
+
+  <!-- Content -->
+  <div class="flex-1 overflow-y-auto bg-gray-50 text-gray-900">
+    <router-outlet></router-outlet>
+  </div>
+</div>

templete/src/app/content/sidebar-content/sidebar-content.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-sidebar-content',
+  standalone: false,
+  templateUrl: './sidebar-content.component.html',
+  styleUrl: './sidebar-content.component.css'
+})
+export class SidebarContentComponent {
+
+}