ttc/micro-frontend
2
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

-commit
All checks were successful
Build Docker Image / Build Docker Image (push) Successful in 6m18s
Details

Browse Source
This commit is contained in:
x2Skyz
2025-11-23 12:23:28 +07:00
parent 3ebfd37400
commit 809e2e16bb
8 changed files with 272 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
accounting-ng-nuttakit/src/app/component/login-forgot/login-forgot.component.html
View File

@@ -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">

4
accounting-ng-nuttakit/src/app/component/login-page/login-page.component.html
View File

@@ -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">

17
accounting-ng-nuttakit/src/app/component/login-register/login-register.component.css
View File

@@ -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;
}

253
accounting-ng-nuttakit/src/app/component/login-register/login-register.component.html
View File

@@ -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>

39
accounting-ng-nuttakit/src/app/component/login-register/login-register.component.ts
View File

@@ -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);
}
}

15
accounting-ng-nuttakit/src/app/content/login-content/login-content.component.ts
View File

@@ -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 = {

5
accounting-ng-nuttakit/src/environments/environment.development.ts
View File

@@ -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'
};