From 809e2e16bb5dd44a07d5ee3d0dd89e4c8b5cd1cb Mon Sep 17 00:00:00 2001
From: x2Skyz <nuttakitpothong96@gmail.com>
Date: Sun, 23 Nov 2025 12:23:28 +0700
Subject: [PATCH] -commit

---
 accounting-ng-nuttakit/angular.json           |   2 +-
 .../login-forgot/login-forgot.component.html  |   2 +-
 .../login-page/login-page.component.html      |   4 +-
 .../login-register.component.css              |  17 ++
 .../login-register.component.html             | 253 ++++++++++++++----
 .../login-register.component.ts               |  39 ++-
 .../login-content/login-content.component.ts  |  15 +-
 .../environments/environment.development.ts   |   5 +-
 8 files changed, 272 insertions(+), 65 deletions(-)

diff --git a/accounting-ng-nuttakit/angular.json b/accounting-ng-nuttakit/angular.json
index c46546a..225a3ba 100644
--- a/accounting-ng-nuttakit/angular.json
+++ b/accounting-ng-nuttakit/angular.json
@@ -84,7 +84,7 @@
           "builder": "@angular/build:dev-server",
           "options": {
             "host": "0.0.0.0",
-            "allowedHosts": ["accounting.nuttakit.work", "localhost", "avon-reid-link-statistics.trycloudflare.com"]
+            "allowedHosts": ["accounting.nuttakit.work", "localhost", "meal-demand-virtual-referrals.trycloudflare.com"]
           },
           "configurations": {
             "production": {
diff --git a/accounting-ng-nuttakit/src/app/component/login-forgot/login-forgot.component.html b/accounting-ng-nuttakit/src/app/component/login-forgot/login-forgot.component.html
index ab9f676..5c2ddc1 100644
--- a/accounting-ng-nuttakit/src/app/component/login-forgot/login-forgot.component.html
+++ b/accounting-ng-nuttakit/src/app/component/login-forgot/login-forgot.component.html
@@ -1,4 +1,4 @@
-<div class="login-backdrop">
+<div class="min-h-screen flex items-center justify-center p-4 sm:p-6 bg-linear-to-br from-red-50 via-white to-red-100 relative overflow-hidden">
   <div class="login-modal d-flex align-items-center justify-content-center bg-white rounded-2xl">
     <div class="card modal-card" role="dialog" aria-labelledby="signin-title" aria-modal="true">
 
diff --git a/accounting-ng-nuttakit/src/app/component/login-page/login-page.component.html b/accounting-ng-nuttakit/src/app/component/login-page/login-page.component.html
index 2b3818f..af072e5 100644
--- a/accounting-ng-nuttakit/src/app/component/login-page/login-page.component.html
+++ b/accounting-ng-nuttakit/src/app/component/login-page/login-page.component.html
@@ -1,11 +1,11 @@
-<div class="login-backdrop">
+<div class="min-h-screen flex items-center justify-center p-4 sm:p-6 bg-linear-to-br from-red-50 via-white to-red-100 relative overflow-hidden">
   <div class="login-modal d-flex align-items-center justify-content-center bg-white rounded-2xl">
     <div class="card modal-card" role="dialog" aria-labelledby="signin-title" aria-modal="true">
 
       <div class="brand">
         <img src="/logo.png" alt="Company logo" class="logo"/>
         <h1 id="signin-title" class="kanit-bold">เข้าสู่ระบบ</h1>
-        <p class="subtitle">บัญชีโปรแกรมจัดการแผนงานงบประมาณของท่าน</p>
+        <p class="subtitle">บัญชีโปรแกรมจัดการบัญชีของท่าน</p>
       </div>
 
       <form [formGroup]="loginForm" (ngSubmit)="signIn()" class="form">
diff --git a/accounting-ng-nuttakit/src/app/component/login-register/login-register.component.css b/accounting-ng-nuttakit/src/app/component/login-register/login-register.component.css
index e69de29..ce8a2cc 100644
--- a/accounting-ng-nuttakit/src/app/component/login-register/login-register.component.css
+++ b/accounting-ng-nuttakit/src/app/component/login-register/login-register.component.css
@@ -0,0 +1,17 @@
+
+        /* Custom animation for blobs */
+        @keyframes blob {
+            0% { transform: translate(0px, 0px) scale(1); }
+            33% { transform: translate(30px, -50px) scale(1.1); }
+            66% { transform: translate(-20px, 20px) scale(0.9); }
+            100% { transform: translate(0px, 0px) scale(1); }
+        }
+        .animate-blob {
+            animation: blob 7s infinite;
+        }
+        .animation-delay-2000 {
+            animation-delay: 2s;
+        }
+        .animation-delay-4000 {
+            animation-delay: 4s;
+        }
diff --git a/accounting-ng-nuttakit/src/app/component/login-register/login-register.component.html b/accounting-ng-nuttakit/src/app/component/login-register/login-register.component.html
index ce66c96..ef8b01a 100644
--- a/accounting-ng-nuttakit/src/app/component/login-register/login-register.component.html
+++ b/accounting-ng-nuttakit/src/app/component/login-register/login-register.component.html
@@ -1,67 +1,214 @@
-<div class="min-h-screen bg-gray-100 flex items-center justify-center p-4 sm:p-6">
-    <div class="bg-white p-8 sm:p-10 rounded-xl shadow-2xl w-full max-w-md border border-gray-200">
+<body class="bg-gray-50">
 
-        <h1 class="text-3xl font-bold text-gray-800 mb-2">สร้างบัญชีใหม่</h1>
-        <p class="text-gray-500 mb-8">กรอกข้อมูลเพื่อเริ่มต้นใช้งานระบบ</p>
+    <div class="min-h-screen w-full flex flex-col justify-center py-12 px-4 sm:px-6 lg:px-8 bg-linear-to-br from-red-50 via-white to-red-100 relative overflow-hidden">
 
-        <form class="space-y-6">
+        <!-- Decorative Blobs -->
+        <div class="absolute top-0 left-0 w-72 h-72 bg-red-300 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob"></div>
+        <div class="absolute top-0 right-0 w-72 h-72 bg-orange-300 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000"></div>
+        <div class="absolute -bottom-8 left-20 w-72 h-72 bg-rose-300 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-4000"></div>
 
-            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                <div>
-                    <label for="firstName" class="block text-sm font-medium text-gray-700 mb-1">ชื่อจริง</label>
-                    <input type="text" id="firstName" name="firstName" required
-                           class="w-full p-3 border border-gray-300 rounded-lg focus:ring-red-500 focus:border-red-500 shadow-sm"
-                           placeholder="เช่น สมชาย">
+        <!-- Card Container -->
+        <div class="bg-white/80 backdrop-blur-lg px-6 py-8 sm:p-10 rounded-3xl shadow-2xl w-full max-w-lg border border-white/50 relative z-10 mx-auto flex flex-col min-h-[500px]">
+
+            <!-- Header & Stepper Progress -->
+            <div class="mb-6">
+                <div class="text-center mb-6">
+                    <h1 class="text-3xl font-bold text-red-950 tracking-tight">สร้างบัญชีใหม่</h1>
+                    <p class="text-gray-500 mt-1 text-sm">ขั้นตอนที่ {{ currentStep }} จาก 3</p>
                 </div>
-                <div>
-                    <label for="lastName" class="block text-sm font-medium text-gray-700 mb-1">นามสกุล</label>
-                    <input type="text" id="lastName" name="lastName" required
-                           class="w-full p-3 border border-gray-300 rounded-lg focus:ring-red-500 focus:border-red-500 shadow-sm"
-                           placeholder="เช่น ใจดี">
+
+                <!-- Progress Bar -->
+                <div class="relative h-2 bg-gray-200 rounded-full overflow-hidden">
+                    <div class="absolute top-0 left-0 h-full bg-red-900 transition-all duration-500 ease-out rounded-full"
+                         [style.width.%]="(currentStep / 3) * 100"></div>
+                </div>
+
+                <!-- Step Labels (Optional visual aid) -->
+                <div class="flex justify-between text-xs text-gray-400 mt-2 font-medium px-1">
+                    <span [class.text-red-900]="currentStep >= 1">ข้อมูลส่วนตัว</span>
+                    <span [class.text-red-900]="currentStep >= 2">ตั้งรหัสผ่าน</span>
+                    <span [class.text-red-900]="currentStep >= 3">ยืนยัน</span>
                 </div>
             </div>
 
-            <div>
-                <label for="email" class="block text-sm font-medium text-gray-700 mb-1">อีเมล</label>
-                <input type="email" id="email" name="email" required
-                       class="w-full p-3 border border-gray-300 rounded-lg focus:ring-red-500 focus:border-red-500 shadow-sm"
-                       placeholder="you@example.com">
-            </div>
+            <!-- Form Bindings -->
+            <form [formGroup]="registerFrm" (ngSubmit)="onSubmit()" class="flex-1 flex flex-col justify-between">
 
-            <div>
-                <label for="password" class="block text-sm font-medium text-gray-700 mb-1">รหัสผ่าน</label>
-                <input type="password" id="password" name="password" required
-                       class="w-full p-3 border border-gray-300 rounded-lg focus:ring-red-500 focus:border-red-500 shadow-sm"
-                       placeholder="********">
-            </div>
+                <!-- STEP 1: Personal Info -->
+                @if (currentStep === 1) {
+                <div class="space-y-5 step-content">
+                    <div>
+                        <label for="username" class="block text-sm font-semibold text-gray-700 mb-1.5">ชื่อจริง</label>
+                        <div class="relative">
+                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" /></svg>
+                            </div>
+                            <input type="text" id="username" formControlName="username"
+                                class="w-full pl-10 pr-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-red-900 focus:border-transparent outline-none transition-all shadow-sm placeholder-gray-400"
+                                [class.border-red-500]="registerFrm.get('username')?.invalid && (registerFrm.get('username')?.dirty || registerFrm.get('username')?.touched)"
+                                placeholder="สมชาย">
+                        </div>
+                        @if (registerFrm.get('username')?.invalid && (registerFrm.get('username')?.dirty || registerFrm.get('username')?.touched)) {
+                            <div class="text-red-600 text-xs mt-1.5 ml-1">กรุณาระบุชื่อจริง</div>
+                        }
+                    </div>
 
-            <div>
-                <label for="confirmPassword" class="block text-sm font-medium text-gray-700 mb-1">ยืนยันรหัสผ่าน</label>
-                <input type="password" id="confirmPassword" name="confirmPassword" required
-                       class="w-full p-3 border border-gray-300 rounded-lg focus:ring-red-500 focus:border-red-500 shadow-sm"
-                       placeholder="********">
-            </div>
+                    <div>
+                        <label for="userlastname" class="block text-sm font-semibold text-gray-700 mb-1.5">นามสกุล</label>
+                        <div class="relative">
+                             <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" /></svg>
+                            </div>
+                            <input type="text" id="userlastname" formControlName="userlastname"
+                                class="w-full pl-10 pr-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-red-900 focus:border-transparent outline-none transition-all shadow-sm placeholder-gray-400"
+                                [class.border-red-500]="registerFrm.get('userlastname')?.invalid && (registerFrm.get('userlastname')?.dirty || registerFrm.get('userlastname')?.touched)"
+                                placeholder="ใจดี">
+                        </div>
+                        @if (registerFrm.get('userlastname')?.invalid && (registerFrm.get('userlastname')?.dirty || registerFrm.get('userlastname')?.touched)) {
+                            <div class="text-red-600 text-xs mt-1.5 ml-1">กรุณาระบุนามสกุล</div>
+                        }
+                    </div>
+                </div>
+                }
 
-            <div class="flex items-start">
-                <input type="checkbox" id="terms" name="terms" required
-                       class="mt-1 h-4 w-4 text-red-600 border-gray-300 rounded focus:ring-red-500">
-                <label for="terms" class="ml-2 block text-sm text-gray-900">
-                    ฉันยอมรับ <a href="#" class="font-medium text-red-600 hover:text-red-500">ข้อตกลงและเงื่อนไข</a>
-                </label>
-            </div>
+                <!-- STEP 2: Account Info -->
+                @if (currentStep === 2) {
+                <div class="space-y-5 step-content">
+                    <div>
+                        <label for="email" class="block text-sm font-semibold text-gray-700 mb-1.5">อีเมล</label>
+                        <div class="relative">
+                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" /><path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" /></svg>
+                            </div>
+                            <input type="email" id="email" formControlName="email"
+                                class="w-full pl-10 pr-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-red-900 focus:border-transparent outline-none transition-all shadow-sm placeholder-gray-400"
+                                [class.border-red-500]="registerFrm.get('email')?.invalid && (registerFrm.get('email')?.dirty || registerFrm.get('email')?.touched)"
+                                placeholder="you@example.com">
+                        </div>
+                        @if (registerFrm.get('email')?.invalid && (registerFrm.get('email')?.dirty || registerFrm.get('email')?.touched)) {
+                            <div class="text-red-600 text-xs mt-1.5 ml-1">กรุณาระบุอีเมลที่ถูกต้อง</div>
+                        }
+                    </div>
 
-            <div>
-                <button type="submit"
-                        class="w-full py-3 bg-red-600 text-white font-semibold rounded-lg shadow-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition duration-150">
-                    สมัครสมาชิก
-                </button>
-            </div>
-        </form>
+                    <div>
+                        <label for="password" class="block text-sm font-semibold text-gray-700 mb-1.5">รหัสผ่าน</label>
+                        <div class="relative">
+                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" /></svg>
+                            </div>
+                            <input type="password" id="password" formControlName="password"
+                                class="w-full pl-10 pr-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-red-900 focus:border-transparent outline-none transition-all shadow-sm placeholder-gray-400"
+                                [class.border-red-500]="registerFrm.get('password')?.invalid && (registerFrm.get('password')?.dirty || registerFrm.get('password')?.touched)"
+                                placeholder="••••••••">
+                        </div>
+                        @if (registerFrm.get('password')?.invalid && (registerFrm.get('password')?.dirty || registerFrm.get('password')?.touched)) {
+                            <div class="text-red-600 text-xs mt-1.5 ml-1">กรุณาระบุรหัสผ่าน</div>
+                        }
+                    </div>
 
-        <p class="mt-6 text-center text-sm text-gray-600">
-            เป็นสมาชิกอยู่แล้วใช่ไหม?
-            <a href="#" class="font-medium text-red-600 hover:text-red-500">เข้าสู่ระบบ</a>
-        </p>
+                    <div>
+                        <label for="confirmPassword" class="block text-sm font-semibold text-gray-700 mb-1.5">ยืนยันรหัสผ่าน</label>
+                        <div class="relative">
+                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" /></svg>
+                            </div>
+                            <input type="password" id="confirmPassword" formControlName="confirmPassword"
+                                class="w-full pl-10 pr-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-red-900 focus:border-transparent outline-none transition-all shadow-sm placeholder-gray-400"
+                                [class.border-red-500]="(registerFrm.get('confirmPassword')?.invalid || registerFrm.get('password')?.value !== registerFrm.get('confirmPassword')?.value) && (registerFrm.get('confirmPassword')?.dirty || registerFrm.get('confirmPassword')?.touched)"
+                                placeholder="••••••••">
+                        </div>
+                        @if (registerFrm.get('confirmPassword')?.dirty && registerFrm.get('password')?.value !== registerFrm.get('confirmPassword')?.value) {
+                            <div class="text-red-600 text-xs mt-1.5 ml-1">รหัสผ่านไม่ตรงกัน</div>
+                        }
+                    </div>
+                </div>
+                }
 
+                <!-- STEP 3: Confirmation -->
+                @if (currentStep === 3) {
+                <div class="step-content flex flex-col justify-center items-center h-full space-y-6 text-center">
+
+                    <div class="w-20 h-20 bg-red-50 rounded-full flex items-center justify-center mb-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-10 h-10 text-red-900">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                    </div>
+
+                    <div>
+                        <h3 class="text-xl font-bold text-gray-900">เกือบเสร็จแล้ว!</h3>
+                        <p class="text-gray-500 text-sm mt-1">กรุณายอมรับเงื่อนไขเพื่อสร้างบัญชีของคุณ</p>
+                    </div>
+
+                    <div class="bg-gray-50 p-4 rounded-xl w-full text-left border border-gray-100">
+                        <p class="text-sm text-gray-600 font-medium mb-2">สรุปข้อมูล:</p>
+                        <div class="text-sm text-gray-800 flex items-center gap-2">
+                            <svg class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg>
+                            {{ registerFrm.get('username')?.value }} {{ registerFrm.get('userlastname')?.value }}
+                        </div>
+                        <div class="text-sm text-gray-800 flex items-center gap-2 mt-1">
+                            <svg class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
+                            {{ registerFrm.get('email')?.value }}
+                        </div>
+                    </div>
+
+                    <div class="w-full">
+                        <div class="flex items-center justify-center">
+                            <input type="checkbox" id="terms" formControlName="terms"
+                                class="h-5 w-5 text-red-900 border-gray-300 rounded focus:ring-red-900 cursor-pointer transition-all">
+                            <label for="terms" class="ml-2 block text-sm text-gray-600 cursor-pointer select-none">
+                                ฉันยอมรับ <a href="/license" class="font-semibold text-red-900 hover:text-red-700 underline decoration-2 decoration-transparent hover:decoration-red-700 transition-all">ข้อตกลงและเงื่อนไข</a>
+                            </label>
+                        </div>
+                         @if (registerFrm.get('terms')?.invalid && (registerFrm.get('terms')?.dirty || registerFrm.get('terms')?.touched)) {
+                            <div class="text-red-600 text-xs mt-2">กรุณายอมรับเงื่อนไข</div>
+                        }
+                    </div>
+                </div>
+                }
+
+                <!-- Navigation Buttons -->
+                <div class="pt-6 mt-auto flex gap-3">
+                    <!-- Back Button (Hide on step 1) -->
+                    @if (currentStep > 1) {
+                        <button type="button" (click)="currentStep = currentStep - 1"
+                            class="w-1/3 py-3.5 px-4 bg-gray-100 hover:bg-gray-200 text-gray-700 font-bold rounded-xl transition-colors">
+                            ย้อนกลับ
+                        </button>
+                    }
+
+                    <!-- Next Button (Step 1 & 2) -->
+                    @if (currentStep < 3) {
+                        <button type="button" (click)="currentStep = currentStep + 1"
+                            [disabled]="(currentStep === 1 && (registerFrm.get('username')?.invalid || registerFrm.get('userlastname')?.invalid)) ||
+                                      (currentStep === 2 && (registerFrm.get('email')?.invalid || registerFrm.get('password')?.invalid || registerFrm.get('confirmPassword')?.invalid || registerFrm.get('password')?.value !== registerFrm.get('confirmPassword')?.value))"
+                            class="flex-1 py-3.5 px-4 bg-red-900 hover:bg-red-950 text-white font-bold rounded-xl shadow-lg shadow-red-900/30 transition-all disabled:opacity-50 disabled:cursor-not-allowed">
+                            ถัดไป
+                        </button>
+                    }
+
+                    <!-- Submit Button (Step 3 Only) -->
+                    @if (currentStep === 3) {
+                        <button type="submit"
+                            [disabled]="registerFrm.invalid"
+                            class="flex-1 py-3.5 px-4 bg-red-900 hover:bg-red-950 text-white font-bold rounded-xl shadow-lg shadow-red-900/30 transition-all disabled:opacity-50 disabled:cursor-not-allowed">
+                            สมัครสมาชิก
+                        </button>
+                    }
+                </div>
+
+            </form>
+
+            <!-- Footer Link -->
+            @if (currentStep === 1) {
+                <p class="mt-6 text-center text-sm text-gray-500">
+                    เป็นสมาชิกอยู่แล้วใช่ไหม?
+                    <a href="#" class="font-bold text-red-900 hover:text-red-950 hover:underline transition-all">
+                        เข้าสู่ระบบ
+                    </a>
+                </p>
+            }
+
+        </div>
     </div>
-</div>
+
+</body>
diff --git a/accounting-ng-nuttakit/src/app/component/login-register/login-register.component.ts b/accounting-ng-nuttakit/src/app/component/login-register/login-register.component.ts
index 99067df..5203127 100644
--- a/accounting-ng-nuttakit/src/app/component/login-register/login-register.component.ts
+++ b/accounting-ng-nuttakit/src/app/component/login-register/login-register.component.ts
@@ -1,4 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
+import { GeneralService } from '../../services/generalservice';
 
 @Component({
   selector: 'app-login-register',
@@ -6,6 +8,39 @@ import { Component } from '@angular/core';
   templateUrl: './login-register.component.html',
   styleUrl: './login-register.component.css',
 })
-export class LoginRegisterComponent {
+export class LoginRegisterComponent implements OnInit {
+  @Output() registeredEventSubmit = new EventEmitter<any>();
+  registerFrm!: FormGroup;
+  currentStep = 1;
 
+  constructor(){}
+
+  ngOnInit(): void {
+    this.setupFormControl();
+  }
+
+  setupFormControl(): void {
+    this.registerFrm = new FormGroup({
+      username: new FormControl('',[Validators.required, Validators.maxLength(100)]),
+      userlastname: new FormControl('',[Validators.required, Validators.maxLength(100)]),
+      email: new FormControl('',[Validators.required, Validators.email, Validators.maxLength(100)]),
+      password: new FormControl('',[Validators.required, Validators.maxLength(50)]),
+      confirmPassword: new FormControl('',[Validators.required, Validators.maxLength(50)]),
+      terms: new FormControl(false, [Validators.requiredTrue])
+    });
+  }
+
+  onSubmit(){
+    let data = {
+      username: this.registerFrm.get('username')?.value,
+      userlastname: this.registerFrm.get('userlastname')?.value,
+      email: this.registerFrm.get('email')?.value,
+      password: this.registerFrm.get('password')?.value
+    }
+    this.RegisteredEventSubmit(data);
+  }
+
+  RegisteredEventSubmit(event: any){
+    this.registeredEventSubmit.emit(event);
+  }
 }
diff --git a/accounting-ng-nuttakit/src/app/content/login-content/login-content.component.ts b/accounting-ng-nuttakit/src/app/content/login-content/login-content.component.ts
index dbad907..ebf142c 100644
--- a/accounting-ng-nuttakit/src/app/content/login-content/login-content.component.ts
+++ b/accounting-ng-nuttakit/src/app/content/login-content/login-content.component.ts
@@ -82,26 +82,31 @@ export class LoginContentComponent implements OnInit {
 onRegisterSubmit(value: any){
     const uri = '/api/login/register';
     const request = {
-      username: value.username,
+      firstname: value.username,
+      lastname: value.userlastname,
       password: value.password,
-      email: value.email
+      email: value.email,
+      organization: 'accpj'
     };
 
     this.generalService.postRequest(uri, request).subscribe({
       next: (result: any) => {
-        if (result.code === '200') {  }
+        if (result.code === '200') {
+            this.generalService.trowApi(result);
+         }
         else {
           this.generalService.trowApi(result);
         }
       },
       error: (error: any) => {
         this.generalService.trowApi(error);
+      },
+      complete: () => {
+        this.router.navigate(['/login']);
       }
     });
   }
 
-
-
   onOtpSendSubmit(value: any){
     let uri = '/api/login/otp/send';
     let request = {
diff --git a/accounting-ng-nuttakit/src/environments/environment.development.ts b/accounting-ng-nuttakit/src/environments/environment.development.ts
index d0503a7..8be19a8 100644
--- a/accounting-ng-nuttakit/src/environments/environment.development.ts
+++ b/accounting-ng-nuttakit/src/environments/environment.development.ts
@@ -1,4 +1,7 @@
 export const environment = {
   production: false,
-  apiBaseUrl: 'http://localhost:8000'
+  apiBaseUrl: 'https://bread-leader-move-created.trycloudflare.com'
+
+
+  // apiBaseUrl: 'http://localhost:8000'
 };