chamomind/elearning
7
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages 3 Wiki Activity Actions

feat: add user dashboard, profile management, and password reset pages.

Browse source
This commit is contained in:
supalerk-ar66 2026-02-02 16:33:51 +07:00
parent ec67c7c6b6
commit 0ec99b140a
3 changed files with 59 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

25
Frontend-Learner/pages/reset-password.vue
View file

@ -25,6 +25,9 @@ const resetForm = reactive({
confirmPassword: ''
})
const showPassword = ref(false)
const showConfirmPassword = ref(false)
const resetRules = {
password: {
rules: {
@ -126,11 +129,18 @@ const resetPassword = async () => {
<input
:value="resetForm.password"
@input="(e) => handlePasswordInput('password', (e.target as HTMLInputElement).value)"
type="password"
class="w-full h-12 pl-12 pr-4 rounded-xl bg-slate-50 border border-slate-200 text-slate-900 placeholder-slate-400 text-base focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all font-medium"
:type="showPassword ? 'text' : 'password'"
class="w-full h-12 pl-12 pr-12 rounded-xl bg-slate-50 border border-slate-200 text-slate-900 placeholder-slate-400 text-base focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all font-medium"
placeholder="อย่างน้อย 8 ตัวอักษร"
:class="{'border-red-500 focus:ring-red-500/20 focus:border-red-500': errors.password}"
/>
<button
type="button"
@click="showPassword = !showPassword"
class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 transition-colors focus:outline-none flex items-center"
>
<span class="material-icons text-lg">{{ showPassword ? 'visibility_off' : 'visibility' }}</span>
</button>
</div>
<span v-if="errors.password" class="text-xs text-red-500 font-medium ml-1 mt-1 block slide-up-sm">{{ errors.password }}</span>
</div>
@ -145,11 +155,18 @@ const resetPassword = async () => {
<input
v-model="resetForm.confirmPassword"
@input="clearFieldError('confirmPassword')"
type="password"
class="w-full h-12 pl-12 pr-4 rounded-xl bg-slate-50 border border-slate-200 text-slate-900 placeholder-slate-400 text-base focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all font-medium"
:type="showConfirmPassword ? 'text' : 'password'"
class="w-full h-12 pl-12 pr-12 rounded-xl bg-slate-50 border border-slate-200 text-slate-900 placeholder-slate-400 text-base focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all font-medium"
placeholder="กรอกรหัสผ่านอีกครั้ง"
:class="{'border-red-500 focus:ring-red-500/20 focus:border-red-500': errors.confirmPassword}"
/>
<button
type="button"
@click="showConfirmPassword = !showConfirmPassword"
class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 transition-colors focus:outline-none flex items-center"
>
<span class="material-icons text-lg">{{ showConfirmPassword ? 'visibility_off' : 'visibility' }}</span>
</button>
</div>
<span v-if="errors.confirmPassword" class="text-xs text-red-500 font-medium ml-1 mt-1 block slide-up-sm">{{ errors.confirmPassword }}</span>
</div>