809e2e16bb
All checks were successful
Build Docker Image / Build Docker Image (push) Successful in 6m18s
121 lines
6.9 KiB
HTML
121 lines
6.9 KiB
HTML
<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 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 z-50 overflow-y-auto" role="dialog" aria-modal="true" [formGroup]="forgotFrm">
|
|
|
|
<div class="fixed inset-0 bg-black/60 backdrop-blur-sm transition-opacity" aria-hidden="true"></div>
|
|
|
|
|
|
<div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
|
|
|
|
<div class="relative transform overflow-hidden rounded-2xl bg-white text-left shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-md md:max-w-lg">
|
|
|
|
<div class="bg-red-900 h-2 w-full"></div>
|
|
|
|
<div class="px-8 pt-6 pb-8">
|
|
<div class="sm:flex sm:items-start mb-6">
|
|
<div class="mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-red-900">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
|
|
</svg>
|
|
</div>
|
|
<div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
|
|
<h3 class="text-xl font-bold leading-6 text-gray-900" id="modal-title">เปลี่ยนรหัสผ่าน</h3>
|
|
<p class="text-sm text-gray-500 mt-1">กรุณากรอกรหัสผ่านใหม่ของคุณด้านล่าง</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="space-y-5">
|
|
<div>
|
|
<label for="newPassword" class="block text-sm font-semibold text-gray-700 mb-2">รหัสผ่านใหม่</label>
|
|
<input type="password" id="newPassword" class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all shadow-sm" formControlName="newPassword" placeholder="········">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="confirmPassword" class="block text-sm font-semibold text-gray-700 mb-2">ยืนยันรหัสผ่านใหม่</label>
|
|
<input type="password" id="confirmPassword" class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all shadow-sm" formControlName="confirmPassword" placeholder="········">
|
|
|
|
@if ( this.forgotFrm.get('confirmPassword')!.touched && this.forgotFrm.get('newPassword')?.value !== this.forgotFrm.get('confirmPassword')?.value ){
|
|
<div class="flex items-center text-red-600 text-sm mt-2 transition-all">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4 mr-1">
|
|
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
|
|
</svg>
|
|
<span>รหัสผ่านไม่ตรงกัน</span>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 px-6 py-4 sm:flex sm:flex-row-reverse sm:px-8 rounded-b-2xl">
|
|
<button type="button" class="inline-flex w-full justify-center rounded-xl bg-red-900 px-5 py-3 text-sm font-semibold text-white shadow-sm hover:bg-red-950 sm:ml-3 sm:w-auto transition-colors" (click)="onSetNewPassword()">
|
|
ยืนยันการเปลี่ยนแปลง
|
|
</button>
|
|
<button type="button" class="mt-3 inline-flex w-full justify-center rounded-xl bg-white px-5 py-3 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto transition-colors" (click)="isModalOpen = false">
|
|
ยกเลิก
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|