x2Skyz
15308ababa
All checks were successful
Build Docker Image / Preparing Dependecies (push) Successful in 4s
-caching -budget
87 lines
4.6 KiB
HTML
87 lines
4.6 KiB
HTML
<div class="login-backdrop">
|
|
<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 mb-2"/>
|
|
<h1 id="signin-title" class="kanit-bold">ลืมรหัสผ่าน</h1>
|
|
<p class="subtitle">โปรดกรอก Email ของท่าน</p>
|
|
</div>
|
|
|
|
<form [formGroup]="forgotFrm" class="form">
|
|
<label class="field">
|
|
<span class="label-text">อีเมล์</span>
|
|
<input type="email" formControlName="email" class="input-field" 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="text" formControlName="otp" class="input-field" autocomplete="one-time-code" placeholder="123456" alt required/>
|
|
</label>
|
|
}
|
|
|
|
<div class="actions justify-end-custom mt-4">
|
|
|
|
<div class="flex-row hover-lift">
|
|
<button class="primary secondary-button" type="button" (click)="isModalOpen = true">
|
|
เปิด Modal
|
|
</button>
|
|
</div>
|
|
|
|
@if (isSendOtp === false) {
|
|
<div class="flex justify-end">
|
|
@if (isLoading === true) {
|
|
<button type="submit" class="primary" 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 secondary-button" (click)="onSubmin()">
|
|
{{ 'ส่งอีกครั้ง' }}
|
|
</button>
|
|
<button type="submit" class="primary" (click)="onVerifySubmit()">
|
|
{{ 'รีเซ็ตรหัสผ่าน' }}
|
|
</button>
|
|
</div>
|
|
}
|
|
</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-xl max-w-sm w-fit modal-reset-password">
|
|
<h2 class="text-xl font-bold mb-4 text-center">เปลี่ยนรหัสผ่าน</h2>
|
|
<hr class="w-full h-px bg-gray-200 border-0 my-3">
|
|
<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 text-xs mt-1 block">รหัสผ่านไม่ตรงกัน</span>
|
|
}
|
|
</div>
|
|
<div class="flex justify-end gap-2 mt-5">
|
|
<button class="bg-gray-400 text-white px-4 py-2 rounded-lg transition-colors hover:bg-gray-500" (click)="isModalOpen = false">
|
|
ปิด
|
|
</button>
|
|
<button class="bg-green-600 text-white px-4 py-2 rounded-lg font-semibold shadow-md transition-all duration-300 ease-in-out hover:bg-green-700 hover:shadow-lg" (click)="onSetNewPassword()">
|
|
ยืนยัน
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|