-accouting Wep
All checks were successful
Build Docker Image / Build Docker Image (push) Successful in 8m54s
All checks were successful
Build Docker Image / Build Docker Image (push) Successful in 8m54s
This commit is contained in:
x2Skyz
@@ -1,105 +1,120 @@
|
||||
<div class="login-backdrop">
|
||||
<div class="login-modal d-flex align-items-center justify-content-center ">
|
||||
<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="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 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>
|
||||
<!-- <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="กรอกรหัสผ่านใหม่">
|
||||
|
||||
<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="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 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>
|
||||
|
||||
Reference in New Issue
Block a user