mirror of
https://github.com/hay-kot/homebox.git
synced 2024-11-22 08:35:43 +00:00
reset password form UI
This commit is contained in:
Hayden
parent
c83d178182
commit
0c968de1fb
4 changed files with 245 additions and 172 deletions
66
frontend/layouts/center-card.vue
Normal file
66
frontend/layouts/center-card.vue
Normal file
|
|
@ -0,0 +1,66 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import MdiGithub from "~icons/mdi/github";
|
||||||
|
import MdiTwitter from "~icons/mdi/twitter";
|
||||||
|
import MdiDiscord from "~icons/mdi/discord";
|
||||||
|
import MdiFolder from "~icons/mdi/folder";
|
||||||
|
|
||||||
|
const api = usePublicApi();
|
||||||
|
|
||||||
|
const { data: status } = useAsyncData(async () => {
|
||||||
|
const { data } = await api.status();
|
||||||
|
return data;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<AppToast />
|
||||||
|
<div class="flex flex-col min-h-screen">
|
||||||
|
<div class="fill-primary min-w-full absolute top-0 z-[-1]">
|
||||||
|
<div class="bg-primary flex-col flex min-h-[20vh]" />
|
||||||
|
<svg
|
||||||
|
class="fill-primary drop-shadow-xl"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 1440 320"
|
||||||
|
preserveAspectRatio="none"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-opacity="1"
|
||||||
|
d="M0,32L80,69.3C160,107,320,181,480,181.3C640,181,800,107,960,117.3C1120,128,1280,224,1360,272L1440,320L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<header class="p-4 sm:px-6 lg:p-14 sm:py-6 sm:flex sm:items-end mx-auto">
|
||||||
|
<div>
|
||||||
|
<h2 class="mt-1 text-4xl font-bold tracking-tight text-neutral-content sm:text-5xl lg:text-6xl flex">
|
||||||
|
HomeB
|
||||||
|
<AppLogo class="w-12 -mb-4" />
|
||||||
|
x
|
||||||
|
</h2>
|
||||||
|
<p class="ml-1 text-lg text-base-content/50">Track, Organize, and Manage your Things.</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex mt-6 sm:mt-0 gap-4 ml-auto text-neutral-content">
|
||||||
|
<a class="tooltip" data-tip="Project Github" href="https://github.com/hay-kot/homebox" target="_blank">
|
||||||
|
<MdiGithub class="h-8 w-8" />
|
||||||
|
</a>
|
||||||
|
<a href="https://twitter.com/haybytes" class="tooltip" data-tip="Follow The Developer" target="_blank">
|
||||||
|
<MdiTwitter class="h-8 w-8" />
|
||||||
|
</a>
|
||||||
|
<a href="https://discord.gg/tuncmNrE4z" class="tooltip" data-tip="Join The Discord" target="_blank">
|
||||||
|
<MdiDiscord class="h-8 w-8" />
|
||||||
|
</a>
|
||||||
|
<a href="https://hay-kot.github.io/homebox/" class="tooltip" data-tip="Read The Docs" target="_blank">
|
||||||
|
<MdiFolder class="h-8 w-8" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="grid p-6 sm:place-items-center min-h-[50vh]">
|
||||||
|
<slot :status="status" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer v-if="status" class="mt-auto text-center w-full bottom-0 pb-4">
|
||||||
|
<p class="text-center text-sm">Version: {{ status.build.version }} ~ Build: {{ status.build.commit }}</p>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
<script setup lang="ts"></script>
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<AppToast />
|
<AppToast />
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useRouteHash } from "@vueuse/router";
|
import { useRouteHash } from "@vueuse/router";
|
||||||
import MdiGithub from "~icons/mdi/github";
|
|
||||||
import MdiTwitter from "~icons/mdi/twitter";
|
|
||||||
import MdiDiscord from "~icons/mdi/discord";
|
|
||||||
import MdiFolder from "~icons/mdi/folder";
|
|
||||||
import MdiAccount from "~icons/mdi/account";
|
import MdiAccount from "~icons/mdi/account";
|
||||||
import MdiAccountPlus from "~icons/mdi/account-plus";
|
import MdiAccountPlus from "~icons/mdi/account-plus";
|
||||||
import MdiLogin from "~icons/mdi/login";
|
import MdiLogin from "~icons/mdi/login";
|
||||||
|
|
@ -40,23 +36,6 @@
|
||||||
const pageForm = useRouteHash(PageForms.Login);
|
const pageForm = useRouteHash(PageForms.Login);
|
||||||
const pageFormStr = computed(() => (pageForm.value[0] === "#" ? pageForm.value.slice(1) : pageForm.value));
|
const pageFormStr = computed(() => (pageForm.value[0] === "#" ? pageForm.value.slice(1) : pageForm.value));
|
||||||
|
|
||||||
const { data: status } = useAsyncData(async () => {
|
|
||||||
const { data } = await api.status();
|
|
||||||
|
|
||||||
if (data.demo) {
|
|
||||||
username.value = "demo@example.com";
|
|
||||||
password.value = "demo";
|
|
||||||
}
|
|
||||||
return data;
|
|
||||||
});
|
|
||||||
|
|
||||||
whenever(status, status => {
|
|
||||||
if (status?.demo) {
|
|
||||||
email.value = "demo@example.com";
|
|
||||||
loginPassword.value = "demo";
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
|
|
@ -148,162 +127,117 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col min-h-screen">
|
<NuxtLayout v-slot="{ status }" name="center-card">
|
||||||
<div class="fill-primary min-w-full absolute top-0 z-[-1]">
|
|
||||||
<div class="bg-primary flex-col flex min-h-[20vh]" />
|
|
||||||
<svg
|
|
||||||
class="fill-primary drop-shadow-xl"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 1440 320"
|
|
||||||
preserveAspectRatio="none"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
fill-opacity="1"
|
|
||||||
d="M0,32L80,69.3C160,107,320,181,480,181.3C640,181,800,107,960,117.3C1120,128,1280,224,1360,272L1440,320L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
<header class="p-4 sm:px-6 lg:p-14 sm:py-6 sm:flex sm:items-end mx-auto">
|
<Transition name="slide-fade">
|
||||||
<div>
|
<form v-if="pageFormStr === PageForms.Register" @submit.prevent="registerUser">
|
||||||
<h2 class="mt-1 text-4xl font-bold tracking-tight text-neutral-content sm:text-5xl lg:text-6xl flex">
|
<div class="card w-max-[500px] md:w-[500px] bg-base-100 shadow-xl">
|
||||||
HomeB
|
<div class="card-body">
|
||||||
<AppLogo class="w-12 -mb-4" />
|
<h2 class="card-title text-2xl align-center">
|
||||||
x
|
<MdiAccount class="mr-1 w-7 h-7" />
|
||||||
</h2>
|
Register
|
||||||
<p class="ml-1 text-lg text-base-content/50">Track, Organize, and Manage your Things.</p>
|
</h2>
|
||||||
</div>
|
<FormTextField v-model="email" label="Set your email?" />
|
||||||
<div class="flex mt-6 sm:mt-0 gap-4 ml-auto text-neutral-content">
|
<FormTextField v-model="username" label="What's your name?" />
|
||||||
<a class="tooltip" data-tip="Project Github" href="https://github.com/hay-kot/homebox" target="_blank">
|
<div v-if="!(groupToken == '')" class="pt-4 pb-1 text-center">
|
||||||
<MdiGithub class="h-8 w-8" />
|
<p>You're Joining an Existing Group!</p>
|
||||||
</a>
|
<button type="button" class="text-xs underline" @click="groupToken = ''">
|
||||||
<a href="https://twitter.com/haybytes" class="tooltip" data-tip="Follow The Developer" target="_blank">
|
Don't Want To Join a Group?
|
||||||
<MdiTwitter class="h-8 w-8" />
|
</button>
|
||||||
</a>
|
|
||||||
<a href="https://discord.gg/tuncmNrE4z" class="tooltip" data-tip="Join The Discord" target="_blank">
|
|
||||||
<MdiDiscord class="h-8 w-8" />
|
|
||||||
</a>
|
|
||||||
<a href="https://hay-kot.github.io/homebox/" class="tooltip" data-tip="Read The Docs" target="_blank">
|
|
||||||
<MdiFolder class="h-8 w-8" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div class="grid p-6 sm:place-items-center min-h-[50vh]">
|
|
||||||
<div>
|
|
||||||
<Transition name="slide-fade">
|
|
||||||
<form v-if="pageFormStr === PageForms.Register" @submit.prevent="registerUser">
|
|
||||||
<div class="card w-max-[500px] md:w-[500px] bg-base-100 shadow-xl">
|
|
||||||
<div class="card-body">
|
|
||||||
<h2 class="card-title text-2xl align-center">
|
|
||||||
<MdiAccount class="mr-1 w-7 h-7" />
|
|
||||||
Register
|
|
||||||
</h2>
|
|
||||||
<FormTextField v-model="email" label="Set your email?" />
|
|
||||||
<FormTextField v-model="username" label="What's your name?" />
|
|
||||||
<div v-if="!(groupToken == '')" class="pt-4 pb-1 text-center">
|
|
||||||
<p>You're Joining an Existing Group!</p>
|
|
||||||
<button type="button" class="text-xs underline" @click="groupToken = ''">
|
|
||||||
Don't Want To Join a Group?
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<FormPassword v-model="password" label="Set your password" />
|
|
||||||
<PasswordScore v-model:valid="canRegister" :password="password" />
|
|
||||||
<div class="card-actions justify-end">
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
class="btn btn-primary mt-2"
|
|
||||||
:class="loading ? 'loading' : ''"
|
|
||||||
:disabled="loading || !canRegister"
|
|
||||||
>
|
|
||||||
Register
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
<FormPassword v-model="password" label="Set your password" />
|
||||||
<form v-else-if="pageFormStr === PageForms.ForgotPassword" @submit.prevent="resetPassword">
|
<PasswordScore v-model:valid="canRegister" :password="password" />
|
||||||
<div class="card w-max-[500px] md:w-[500px] bg-base-100 shadow-xl">
|
<div class="card-actions justify-end">
|
||||||
<div class="card-body">
|
<button
|
||||||
<h2 class="card-title text-2xl align-center">
|
type="submit"
|
||||||
<MdiAccount class="mr-1 w-7 h-7" />
|
class="btn btn-primary mt-2"
|
||||||
Reset Password
|
:class="loading ? 'loading' : ''"
|
||||||
</h2>
|
:disabled="loading || !canRegister"
|
||||||
<FormTextField v-model="email" label="Email" />
|
>
|
||||||
<p class="text-sm text-base-content/50">
|
Register
|
||||||
If you have an account with us, we will send you a password reset link.
|
</button>
|
||||||
</p>
|
|
||||||
<div class="card-actions justify-end mt-4">
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
class="btn btn-primary btn-block"
|
|
||||||
:class="loading ? 'loading' : ''"
|
|
||||||
:disabled="loading"
|
|
||||||
>
|
|
||||||
Reset Password
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</div>
|
||||||
<form v-else @submit.prevent="login">
|
|
||||||
<div class="card w-max-[500px] md:w-[500px] bg-base-100 shadow-xl">
|
|
||||||
<div class="card-body">
|
|
||||||
<h2 class="card-title text-2xl align-center">
|
|
||||||
<MdiAccount class="mr-1 w-7 h-7" />
|
|
||||||
Login
|
|
||||||
</h2>
|
|
||||||
<template v-if="status && status.demo">
|
|
||||||
<p class="text-xs italic text-center">This is a demo instance</p>
|
|
||||||
<p class="text-xs text-center"><b>Email</b> demo@example.com</p>
|
|
||||||
<p class="text-xs text-center"><b>Password</b> demo</p>
|
|
||||||
</template>
|
|
||||||
<FormTextField v-model="email" label="Email" />
|
|
||||||
<FormPassword v-model="loginPassword" label="Password" />
|
|
||||||
<div class="max-w-[140px]">
|
|
||||||
<FormCheckbox v-model="remember" label="Remember Me" />
|
|
||||||
</div>
|
|
||||||
<div class="card-actions justify-end">
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
class="btn btn-primary btn-block"
|
|
||||||
:class="loading ? 'loading' : ''"
|
|
||||||
:disabled="loading"
|
|
||||||
>
|
|
||||||
Login
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</Transition>
|
|
||||||
<div class="text-center mt-6">
|
|
||||||
<BaseButton
|
|
||||||
v-if="status && status.allowRegistration"
|
|
||||||
class="btn-primary btn-wide"
|
|
||||||
:to="pageFormStr === PageForms.Register ? `#${PageForms.Login}` : `#${PageForms.Register}`"
|
|
||||||
>
|
|
||||||
<template #icon>
|
|
||||||
<MdiAccountPlus v-if="pageFormStr === PageForms.Register" class="w-5 h-5 swap-off" />
|
|
||||||
<MdiLogin v-else class="w-5 h-5 swap-off" />
|
|
||||||
<MdiArrowRight class="w-5 h-5 swap-on" />
|
|
||||||
</template>
|
|
||||||
{{ pageFormStr === PageForms.Register ? "Login" : "Register" }}
|
|
||||||
</BaseButton>
|
|
||||||
<p v-else class="text-base-content italic text-sm inline-flex items-center gap-2">
|
|
||||||
<MdiLock class="w-4 h-4 inline-block" />
|
|
||||||
Registration Disabled
|
|
||||||
</p>
|
|
||||||
<NuxtLink :to="`#${PageForms.ForgotPassword}`">
|
|
||||||
<p class="text-xs text-base-content/50 mt-2">Forgot your password?</p>
|
|
||||||
</NuxtLink>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</form>
|
||||||
|
<form v-else-if="pageFormStr === PageForms.ForgotPassword" @submit.prevent="resetPassword">
|
||||||
|
<div class="card w-max-[500px] md:w-[500px] bg-base-100 shadow-xl">
|
||||||
|
<div class="card-body">
|
||||||
|
<h2 class="card-title text-2xl align-center">
|
||||||
|
<MdiAccount class="mr-1 w-7 h-7" />
|
||||||
|
Reset Password
|
||||||
|
</h2>
|
||||||
|
<FormTextField v-model="email" label="Email" />
|
||||||
|
<p class="text-sm text-base-content/50">
|
||||||
|
If you have an account with us, we will send you a password reset link.
|
||||||
|
</p>
|
||||||
|
<div class="card-actions justify-end mt-4">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="btn btn-primary btn-block"
|
||||||
|
:class="loading ? 'loading' : ''"
|
||||||
|
:disabled="loading"
|
||||||
|
>
|
||||||
|
Reset Password
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<form v-else @submit.prevent="login">
|
||||||
|
<div class="card w-max-[500px] md:w-[500px] bg-base-100 shadow-xl">
|
||||||
|
<div class="card-body">
|
||||||
|
<h2 class="card-title text-2xl align-center">
|
||||||
|
<MdiAccount class="mr-1 w-7 h-7" />
|
||||||
|
Login
|
||||||
|
</h2>
|
||||||
|
<template v-if="status && status.demo">
|
||||||
|
<p class="text-xs italic text-center">This is a demo instance</p>
|
||||||
|
<p class="text-xs text-center"><b>Email</b> demo@example.com</p>
|
||||||
|
<p class="text-xs text-center"><b>Password</b> demo</p>
|
||||||
|
</template>
|
||||||
|
<FormTextField v-model="email" label="Email" />
|
||||||
|
<FormPassword v-model="loginPassword" label="Password" />
|
||||||
|
<div class="max-w-[140px]">
|
||||||
|
<FormCheckbox v-model="remember" label="Remember Me" />
|
||||||
|
</div>
|
||||||
|
<div class="card-actions justify-end">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="btn btn-primary btn-block"
|
||||||
|
:class="loading ? 'loading' : ''"
|
||||||
|
:disabled="loading"
|
||||||
|
>
|
||||||
|
Login
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Transition>
|
||||||
|
<div class="text-center mt-6">
|
||||||
|
<BaseButton
|
||||||
|
v-if="status && status.allowRegistration"
|
||||||
|
class="btn-primary btn-wide"
|
||||||
|
:to="pageFormStr === PageForms.Register ? `#${PageForms.Login}` : `#${PageForms.Register}`"
|
||||||
|
>
|
||||||
|
<template #icon>
|
||||||
|
<MdiAccountPlus v-if="pageFormStr === PageForms.Register" class="w-5 h-5 swap-off" />
|
||||||
|
<MdiLogin v-else class="w-5 h-5 swap-off" />
|
||||||
|
<MdiArrowRight class="w-5 h-5 swap-on" />
|
||||||
|
</template>
|
||||||
|
{{ pageFormStr === PageForms.Register ? "Login" : "Register" }}
|
||||||
|
</BaseButton>
|
||||||
|
<p v-else class="text-base-content italic text-sm inline-flex items-center gap-2">
|
||||||
|
<MdiLock class="w-4 h-4 inline-block" />
|
||||||
|
Registration Disabled
|
||||||
|
</p>
|
||||||
|
<NuxtLink :to="`#${PageForms.ForgotPassword}`">
|
||||||
|
<p class="text-xs text-base-content/50 mt-2">Forgot your password?</p>
|
||||||
|
</NuxtLink>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<footer v-if="status" class="mt-auto text-center w-full bottom-0 pb-4">
|
</NuxtLayout>
|
||||||
<p class="text-center text-sm">Version: {{ status.build.version }} ~ Build: {{ status.build.commit }}</p>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="css" scoped>
|
<style lang="css" scoped>
|
||||||
|
|
|
||||||
74
frontend/pages/reset-password.vue
Normal file
74
frontend/pages/reset-password.vue
Normal file
|
|
@ -0,0 +1,74 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<Title>Password Reset</Title>
|
||||||
|
<form @submit.prevent="resetPassword">
|
||||||
|
<div class="card w-max-[500px] md:w-[500px] bg-base-100 shadow-xl">
|
||||||
|
<div class="card-body">
|
||||||
|
<h2 class="card-title text-2xl align-center">
|
||||||
|
<MdiAccount class="mr-1 w-7 h-7" />
|
||||||
|
Password Reset
|
||||||
|
</h2>
|
||||||
|
<FormPassword v-model="form.password" label="New Password" />
|
||||||
|
<FormPassword v-model="form.passwordConfirm" label="Confirm Password" />
|
||||||
|
<PasswordScore v-model:valid="form.requirementsMet" :password="form.password" />
|
||||||
|
<div class="card-actions justify-end">
|
||||||
|
<button type="submit" class="btn btn-primary mt-2" :class="loading ? 'loading' : ''">Reset Password</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<div class="grid place-content-center pt-4">
|
||||||
|
<NuxtLink to="/#login">
|
||||||
|
<p class="text-xs text-base-content/50 mt-2">Account Login</p>
|
||||||
|
</NuxtLink>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import MdiAccount from "~icons/mdi/account";
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
|
||||||
|
definePageMeta({
|
||||||
|
title: "Password Reset",
|
||||||
|
layout: "center-card",
|
||||||
|
middleware: [
|
||||||
|
() => {
|
||||||
|
const ctx = useAuthContext();
|
||||||
|
if (ctx.isAuthorized()) {
|
||||||
|
return "/home";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
|
const toast = useNotifier();
|
||||||
|
|
||||||
|
const loading = ref(false);
|
||||||
|
|
||||||
|
const token = route.query.token;
|
||||||
|
|
||||||
|
const form = reactive({
|
||||||
|
requirementsMet: false,
|
||||||
|
password: "",
|
||||||
|
passwordConfirm: "",
|
||||||
|
});
|
||||||
|
function resetPassword() {
|
||||||
|
if (token === undefined) {
|
||||||
|
return toast.error("Invalid reset token");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (form.password !== form.passwordConfirm) {
|
||||||
|
return toast.error("Passwords do not match");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!form.requirementsMet) {
|
||||||
|
return toast.error("Password does not meet requirements");
|
||||||
|
}
|
||||||
|
|
||||||
|
loading.value = true;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
Loading…
Reference in a new issue