mirror of
https://github.com/koel/koel
synced 2024-12-20 17:43:36 +00:00
58 lines
1.8 KiB
Vue
58 lines
1.8 KiB
Vue
<template>
|
|
<div class="flex items-center justify-center h-screen">
|
|
<form
|
|
v-if="validPayload"
|
|
class="flex flex-col gap-3 sm:w-[480px] sm:bg-white/10 sm:rounded-lg p-7"
|
|
@submit.prevent="submit"
|
|
>
|
|
<h1 class="text-2xl mb-2">Set New Password</h1>
|
|
<label>
|
|
<PasswordField v-model="password" minlength="10" placeholder="New password" required />
|
|
<span class="help block mt-4">Min. 10 characters. Should be a mix of characters, numbers, and symbols.</span>
|
|
</label>
|
|
<div>
|
|
<Btn :disabled="loading" type="submit">Save</Btn>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref } from 'vue'
|
|
import { authService } from '@/services'
|
|
import { base64Decode } from '@/utils'
|
|
import { useMessageToaster, useRouter } from '@/composables'
|
|
|
|
import PasswordField from '@/components/ui/form/PasswordField.vue'
|
|
import Btn from '@/components/ui/form/Btn.vue'
|
|
|
|
const { getRouteParam, go } = useRouter()
|
|
const { toastSuccess, toastError } = useMessageToaster()
|
|
|
|
const email = ref('')
|
|
const token = ref('')
|
|
const password = ref('')
|
|
const loading = ref(false)
|
|
|
|
const validPayload = computed(() => email.value && token.value)
|
|
|
|
try {
|
|
[email.value, token.value] = base64Decode(decodeURIComponent(getRouteParam('payload')!)).split('|')
|
|
} catch (err) {
|
|
toastError('Invalid reset password link.')
|
|
}
|
|
|
|
const submit = async () => {
|
|
try {
|
|
loading.value = true
|
|
await authService.resetPassword(email.value, password.value, token.value)
|
|
toastSuccess('Password set.')
|
|
await authService.login(email.value, password.value)
|
|
setTimeout(() => go('/', true))
|
|
} catch (err: any) {
|
|
toastError(err.response.data?.message || 'Failed to set new password. Please try again.')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
</script>
|