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

first

Browse Source
This commit is contained in:
ttc@2026
2025-11-11 10:52:30 +07:00
commit c838b2a979
56 changed files with 4014 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
accounting-ng-nuttakit/src/app/component/login-forgot/login-forgot.component.html Normal file
View File

@@ -0,0 +1,105 @@
<div class="login-backdrop">
<div class="login-modal d-flex align-items-center justify-content-center ">
<div class="card modal-card" role="dialog" aria-labelledby="signin-title" aria-modal="true">
<div class="brand">
<!-- <img src="assets/logo.png" alt="Company logo" class="logo" /> -->
<img src="logo.png" alt="Company logo" class="logo mb-2"/>
<h1 id="signin-title" class='kanit-bold'>ลืมรหัสผ่าน</h1>
<p class="subtitle">โปรดกรอก Email ของท่าน</p>
</div>
<form [formGroup]="forgotFrm" class="form px-3 pb-3 login-mobile">
<label class="field">
<span class="label-text ">อีเมล์</span>
<input type="email" formControlName="email" class="px-2 " id="englishInput" autocomplete="username" placeholder="nuttakit@gmail.com" aria-label="Email address" required />
</label>
@if (isSendOtp === true) {
<label class="field">
<span class="label-text">รหัสยืนยัน OTP</span>
<input type="email" formControlName="otp" autocomplete="otp" placeholder="123456" alt required/>
</label>
}
<!-- <div class="justify-end flex"> -->
<!-- <label class="stay-signed">
<input type="checkbox" formControlName="remember" />
<span>จดจำรหัสผ่าน</span>
</label> -->
<div class="flex flex-row gap-2 mt-4 justify-end">
<div class="flex-row hover:-translate-y-2.5 transform transition-all">
<button class="bg-[linear-gradient(180deg,var(--primary)_0%,var(--primary-600)_100%)]
text-black
border-0
px-3.5 py-2.5
rounded-md
font-semibold
cursor-pointer
text-[14px]
shadow-[0_6px_18px_var(--color-blue-500)]
transition
ease-in-out
duration-100
hover:scale-[1.02]
active:opacity-90" (click)="isModalOpen = true">
เปิด Modal
</button>
</div>
@if (isSendOtp === false) {
<div class="flex justify-end">
@if (isLoading === true) {
<button type="submit" class="primary cursor-progress!" disabled>
กำลังส่ง...
</button>
} @else {
<button type="submit" class="primary" (click)="onSubmin()">
{{ 'ยืนยันส่ง OTP รีเซ็ตรหัสผ่าน' }}
</button>
}
</div>
} @else if(isSendOtp === true) {
<div class="flex justify-end gap-2">
<button type="button" class="primary" (click)="onSubmin()">
{{ 'ส่งอีกครั้ง' }}
</button>
<button type="submit" class="primary" (click)="onVerifySubmit()">
{{ 'รีเซ็ตรหัสผ่าน' }}
</button>
</div>
}
</div>
<!-- <button mat-raised-button color="primary" [disabled]="isLoading">
{{ isLoading ? 'กำลังส่ง...' : 'ส่งรหัส OTP' }}
</button> -->
<!-- } -->
<!-- </div> -->
</form>
@if(isModalOpen){
<div class="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50" [formGroup]="forgotFrm">
<div class="bg-white p-6 rounded-lg shadow-lg max-w-sm w-fit">
<h2 class="text-xl font-bold mb-4">เปลี่ยนรหัสผ่าน</h2>
<hr class="w-full h-1 bg-gray-300 rounded-sm shadow-neutral-400 md:my-1">
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">รหัสผ่านใหม่</label>
<input type="password" id="newPassword" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" formControlName="newPassword" placeholder="กรอกรหัสผ่านใหม่">
</div>
<div class="mb-4">
<label for="confirmPassword" class="block text-sm font-medium text-gray-700 mb-1">ยืนยันรหัสผ่านใหม่</label>
<input type="password" id="confirmPassword" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" formControlName="confirmPassword" placeholder="กรอกยืนยันรหัสผ่านใหม่">
@if ( this.forgotFrm.get('confirmPassword')!.touched && this.forgotFrm.get('newPassword')?.value !== this.forgotFrm.get('confirmPassword')?.value ){
<span class="text-red-600 md">รหัสผ่านไม่ตรงกัน</span>
}
</div>
<!-- <hr class="w-full h-[] bg-gray-100 border-0 rounded-sm md:my-1 dark:bg-gray-700"> -->
<div class="flex justify-end gap-2">
<button class="bg-red-500 text-white px-4 py-2 rounded" (click)="isModalOpen = false">
ปิด
</button>
<button class="bg-green-500 text-white px-4 py-2 rounded shadow-[0_1px_18px_var(--color-green-300)] hover:-translate-y-1.5 hover:shadow-[0_6px_18px_var(--color-green-500)] transition-all duration-500 ease-in-out" (click)="onSetNewPassword()">
ยืนยัน
</button>
</div>
</div>
</div>
}
</div>
</div>
</div>