Init
This commit is contained in:
72
pages/forgot-password/index.vue
Normal file
72
pages/forgot-password/index.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<script setup lang="ts">
|
||||
definePageMeta({ middleware: ['guest'] })
|
||||
|
||||
const router = useRouter()
|
||||
const { forgotPassword } = useAuth()
|
||||
|
||||
const form = ref()
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
const state = ref({
|
||||
email: '' as string,
|
||||
})
|
||||
|
||||
const status = ref('')
|
||||
|
||||
const {
|
||||
submit,
|
||||
inProgress,
|
||||
validationErrors,
|
||||
} = useSubmit(
|
||||
() => {
|
||||
status.value = ''
|
||||
return forgotPassword(state.value.email)
|
||||
},
|
||||
{
|
||||
onSuccess: () => router.push('/login'),
|
||||
onError: error => toast.add({ title: 'Error', description: error.message, color: 'red' }),
|
||||
},
|
||||
)
|
||||
|
||||
watch(validationErrors, async (errors) => {
|
||||
if (errors.length > 0) {
|
||||
await form.value?.setErrors(errors)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UMain>
|
||||
<UPage>
|
||||
<div class="mx-auto flex min-h-screen w-full items-center justify-center">
|
||||
<UCard class="w-96">
|
||||
<template #header>
|
||||
<div class="space-y-4 text-center ">
|
||||
<h1 class="text-2xl font-bold">
|
||||
Forgot Password
|
||||
</h1>
|
||||
<p class="text-sm">
|
||||
Remember your password? <NuxtLink to="/login" class="text-primary hover:text-primary-300 font-semibold">
|
||||
Login here
|
||||
</NuxtLink>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<UForm ref="form" :state="state" class="space-y-8" @submit="submit">
|
||||
<UFormGroup label="Email" name="email">
|
||||
<UInput v-model="state.email" />
|
||||
</UFormGroup>
|
||||
|
||||
<UButton block size="md" type="submit" :loading="inProgress" icon="i-heroicons-envelope">
|
||||
Reset Password
|
||||
</UButton>
|
||||
</UForm>
|
||||
|
||||
<!-- <UDivider label="OR" class=" my-4"/> -->
|
||||
</UCard>
|
||||
</div>
|
||||
</UPage>
|
||||
</UMain>
|
||||
</template>
|
||||
11
pages/index.vue
Normal file
11
pages/index.vue
Normal file
@@ -0,0 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
definePageMeta({ middleware: ['auth'], layout: 'app' })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
This is the Page Content
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
89
pages/login/index.vue
Normal file
89
pages/login/index.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<script setup lang="ts">
|
||||
definePageMeta({ middleware: ['guest'] })
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const { login } = useAuth()
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
const form = ref()
|
||||
|
||||
const state = ref<LoginCredentials>({
|
||||
email: '',
|
||||
password: '',
|
||||
remember: false,
|
||||
})
|
||||
|
||||
const status = ref(
|
||||
(route.query.reset ?? '').length > 0 ? atob(route.query.reset as string) : '',
|
||||
)
|
||||
|
||||
const {
|
||||
submit,
|
||||
inProgress,
|
||||
validationErrors,
|
||||
} = useSubmit(
|
||||
() => {
|
||||
status.value = ''
|
||||
return login(state.value)
|
||||
},
|
||||
{
|
||||
onSuccess: () => router.push('/'),
|
||||
onError: (error) => {
|
||||
toast.add({ title: 'Error', description: error.message, color: 'red' })
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
watch(validationErrors, async (errors) => {
|
||||
if (errors.length > 0) {
|
||||
await form.value?.setErrors(errors)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UMain>
|
||||
<UPage>
|
||||
<div class="mx-auto flex min-h-screen w-full items-center justify-center">
|
||||
<UCard class="w-96">
|
||||
<template #header>
|
||||
<h1 class="text-center text-2xl font-bold">
|
||||
Login
|
||||
</h1>
|
||||
</template>
|
||||
|
||||
<UForm ref="form" :state="state" class="space-y-4" @submit="submit">
|
||||
<UFormGroup label="Email" name="email">
|
||||
<UInput v-model="state.email" />
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="Password" name="password">
|
||||
<UInput v-model="state.password" type="password" />
|
||||
</UFormGroup>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<UCheckbox id="remember-me" v-model="state.remember" label="Remember me" name="remember-me" />
|
||||
|
||||
<div class="text-sm leading-6">
|
||||
<NuxtLink to="/forgot-password" class="text-primary hover:text-primary-300 font-semibold">
|
||||
Forgot
|
||||
password?
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UButton block size="md" type="submit" :loading="inProgress" icon="i-heroicons-arrow-right-on-rectangle">
|
||||
Login
|
||||
</UButton>
|
||||
</UForm>
|
||||
|
||||
<!-- <UDivider label="OR" class=" my-4"/> -->
|
||||
</UCard>
|
||||
</div>
|
||||
</UPage>
|
||||
</UMain>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
87
pages/password-reset/[token].vue
Normal file
87
pages/password-reset/[token].vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<script setup lang="ts">
|
||||
definePageMeta({ middleware: ['guest'] })
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const { resetPassword } = useAuth()
|
||||
|
||||
if (!route.query.email) {
|
||||
router.push('/')
|
||||
}
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
const state = ref<ResetPasswordCredentials>({
|
||||
email: route.query.email as string,
|
||||
password: '',
|
||||
password_confirmation: '',
|
||||
token: route.params.token as string,
|
||||
})
|
||||
|
||||
const status = ref(
|
||||
(route.query.reset ?? '').length > 0 ? atob(route.query.reset as string) : '',
|
||||
)
|
||||
|
||||
const form = ref()
|
||||
|
||||
const {
|
||||
submit,
|
||||
inProgress,
|
||||
validationErrors,
|
||||
} = useSubmit(
|
||||
() => {
|
||||
status.value = ''
|
||||
return resetPassword(state.value)
|
||||
},
|
||||
{
|
||||
onSuccess: () => router.push('/'),
|
||||
onError: (error) => {
|
||||
toast.add({ title: 'Error', description: error.message, color: 'red' })
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
watch(validationErrors, async (errors) => {
|
||||
if (errors.length > 0) {
|
||||
await form.value?.setErrors(errors)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UMain>
|
||||
<UPage>
|
||||
<div class="mx-auto flex min-h-screen w-full items-center justify-center">
|
||||
<UCard class="w-96">
|
||||
<template #header>
|
||||
<h1 class="text-center text-2xl font-bold">
|
||||
Reset Password
|
||||
</h1>
|
||||
</template>
|
||||
|
||||
<UForm ref="form" :state="state" class="space-y-4" @submit="submit">
|
||||
<UFormGroup label="Email" name="email">
|
||||
<UInput v-model="state.email" disabled />
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="Password" name="password">
|
||||
<UInput v-model="state.password" type="password" />
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="Confirm Password" name="password_confirmation">
|
||||
<UInput v-model="state.password_confirmation" type="password" />
|
||||
</UFormGroup>
|
||||
|
||||
<UButton block size="md" type="submit" :loading="inProgress" icon="i-heroicon-lock-closed">
|
||||
Change Password
|
||||
</UButton>
|
||||
</UForm>
|
||||
|
||||
<!-- <UDivider label="OR" class=" my-4"/> -->
|
||||
</UCard>
|
||||
</div>
|
||||
</UPage>
|
||||
</UMain>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user