mirror of
https://github.com/versia-pub/frontend.git
synced 2025-12-06 16:38:20 +01:00
105 lines
4.5 KiB
Vue
105 lines
4.5 KiB
Vue
<template>
|
|
<div class="flex min-h-screen relative flex-col justify-center py-12 px-8">
|
|
<img crossorigin="anonymous" src="https://cdn.lysand.org/logo-long-dark.webp" alt="Lysand logo"
|
|
class="mx-auto h-24 hidden md:block mb-10" />
|
|
<div v-if="validUrlParameters"
|
|
class="sm:mx-auto w-full sm:max-w-md px-10 py-10 rounded md:ring-1 md:ring-white/10">
|
|
<div v-if="error" class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white mb-10">
|
|
<h2 class="font-bold text-lg">An error occured</h2>
|
|
<span class="text-sm">{{ error_description }}</span>
|
|
</div>
|
|
<VeeForm class="space-y-6" method="POST" :validation-schema="schema" action="/api/auth/reset">
|
|
<input type="hidden" name="token" :value="token" />
|
|
|
|
<h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Reset your password</h1>
|
|
|
|
<VeeField name="password" as="div" v-slot="{ errors, field }" validate-on-change>
|
|
<LoginInput label="Password" placeholder="Password here" type="password"
|
|
autocomplete="current-password" required :is-invalid="errors.length > 0" v-bind="field" />
|
|
<VeeErrorMessage name="password" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
|
|
{{ message }}
|
|
</VeeErrorMessage>
|
|
</VeeField>
|
|
|
|
<VeeField name="password2" as="div" v-slot="{ errors, field }" validate-on-change>
|
|
<LoginInput label="Confirm password" placeholder="Confirm password" type="password"
|
|
autocomplete="current-password" required :is-invalid="errors.length > 0" v-bind="field" />
|
|
<VeeErrorMessage name="password2" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
|
|
{{ message }}
|
|
</VeeErrorMessage>
|
|
</VeeField>
|
|
|
|
<p class="mt-6 text-sm leading-8 font-semibold text-red-300">This will reset your
|
|
password. Be sure to put it in a password manager.
|
|
</p>
|
|
|
|
<ButtonsPrimary type="submit" class="w-full">Reset</ButtonsPrimary>
|
|
</VeeForm>
|
|
</div>
|
|
<div v-else-if="success">
|
|
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl text-center">Password reset
|
|
successful!
|
|
</h1>
|
|
<p class="mt-6 text-lg leading-8 text-gray-300 text-center">
|
|
You can now login to your account with your new password.
|
|
</p>
|
|
</div>
|
|
<div v-else class="mx-auto max-w-md">
|
|
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Invalid access
|
|
parameters
|
|
</h1>
|
|
<p class="mt-6 text-lg leading-8 text-gray-300">This page should be accessed
|
|
through a valid password reset request. Please ask your admin to reset your password.
|
|
</p>
|
|
|
|
<p class="mt-6 text-lg leading-8 text-gray-300">
|
|
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
|
|
target="_blank" class="underline text-primary-700">the issue tracker</a>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { toTypedSchema } from "@vee-validate/zod";
|
|
import { z } from "zod";
|
|
import LoginInput from "../../components/LoginInput.vue";
|
|
|
|
const identity = useCurrentIdentity();
|
|
identity.value = null;
|
|
|
|
const schema = toTypedSchema(
|
|
z
|
|
.object({
|
|
password: z.string().min(3).max(100),
|
|
password2: z.string().min(3).max(100),
|
|
})
|
|
.superRefine((data, ctx) => {
|
|
if (data.password !== data.password2) {
|
|
ctx.addIssue({
|
|
path: [...ctx.path, "password2"],
|
|
code: "custom",
|
|
message: "Passwords do not match",
|
|
});
|
|
}
|
|
return {};
|
|
}),
|
|
);
|
|
|
|
const query = new URLSearchParams(
|
|
window?.location.search ?? useRequestURL().search,
|
|
);
|
|
const token = query.get("token");
|
|
const login_reset = query.get("login_reset") === "true";
|
|
const success = query.get("success") === "true";
|
|
let error = query.get("error");
|
|
let error_description = query.get("error_description");
|
|
|
|
if (login_reset) {
|
|
error = "Login reset";
|
|
error_description =
|
|
"Your password has been reset by an administrator. Please change it here.";
|
|
}
|
|
|
|
const validUrlParameters = token;
|
|
</script> |