106 lines
5.5 KiB
HTML
106 lines
5.5 KiB
HTML
|
<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>
|