Password reset & user lookup API

This commit is contained in:
2024-06-30 17:20:05 +08:00
parent e5d8f1ab3b
commit a4ccf12b7a
6 changed files with 71 additions and 41 deletions

View File

@ -5,7 +5,7 @@
<div>
<v-avatar color="accent" icon="mdi-check-decagram" size="large" class="card-rounded mb-2" />
<h1 class="text-2xl">Confirm registration</h1>
<p>Confirm your account to keep your account longer than 48 hours.</p>
<p>Confirm your account to unlock more abilities.</p>
</div>
<v-window :touch="false" :model-value="panel" class="pa-2 mx-[-0.5rem]">
@ -30,7 +30,7 @@
<h1 class="font-bold text-xl">Confirmed</h1>
<p>You're done! We successfully confirmed your account.</p>
<p class="mt-3">Now you can continue use Solarpass, we will redirect to dashboard you soon.</p>
<p class="mt-3">Now you can continue to use Solarpass, we will redirect you to dashboard soon.</p>
</div>
</v-window-item>
</v-window>
@ -77,7 +77,7 @@ async function confirm() {
loading.value = true
panel.value = "callback"
await readProfiles()
router.push({ name: "dashboard" })
await router.push({ name: "dashboard" })
}
loading.value = false
}

View File

@ -3,34 +3,54 @@
<v-card class="w-full max-w-[720px] overflow-auto" :loading="loading">
<v-card-text class="card-grid pa-9">
<div>
<v-avatar color="accent" icon="mdi-check-decagram" size="large" class="card-rounded mb-2" />
<h1 class="text-2xl">Confirm registration</h1>
<p>Confirm your account to keep your account longer than 48 hours.</p>
<v-avatar color="accent" icon="mdi-lock-reset" size="large" class="card-rounded mb-2" />
<h1 class="text-2xl">Reset password</h1>
<p>Reset password to get back access of your account.</p>
</div>
<v-window :touch="false" :model-value="panel" class="pa-2 mx-[-0.5rem]">
<v-window-item value="confirm">
<div>
<v-expand-transition>
<v-alert v-show="error" variant="tonal" type="error" class="text-xs mb-3">
Something went wrong... {{ error }}
</v-alert>
</v-expand-transition>
<div class="flex items-center">
<v-form class="flex-grow-1" @submit.prevent="confirm">
<v-text-field
label="New Password"
type="password"
autocomplete="new-password"
variant="solo"
density="comfortable"
:disabled="loading"
v-model="newPassword"
/>
<v-progress-circular v-if="!error" indeterminate size="32" color="grey-darken-3" class="mb-3" />
<v-expand-transition>
<v-alert v-show="error" variant="tonal" type="error" class="text-xs mb-3">
Something went wrong... {{ error }}
</v-alert>
</v-expand-transition>
<h1 class="font-bold text-xl">Confirming</h1>
<p>We are confirming your account. Please stand by, this won't took a long time...</p>
<div class="flex justify-end">
<v-btn
type="submit"
variant="text"
color="primary"
class="justify-self-end"
append-icon="mdi-arrow-right"
:disabled="loading"
>
Next
</v-btn>
</div>
</v-form>
</div>
</v-window-item>
<v-window-item value="callback">
<div>
<v-icon icon="mdi-fire" size="32" color="grey-darken-3" class="mb-3" />
<h1 class="font-bold text-xl">Confirmed</h1>
<p>You're done! We successfully confirmed your account.</p>
<h1 class="font-bold text-xl">Applied</h1>
<p>The password of your account has updated successfully.</p>
<p class="mt-3">Now you can continue use Solarpass, we will redirect to dashboard you soon.</p>
<p class="mt-3">Now you can continue to use Solarpass, we will redirect you to sign-in soon.</p>
</div>
</v-window-item>
</v-window>
@ -45,12 +65,10 @@
import { ref } from "vue"
import { useRoute, useRouter } from "vue-router"
import { request } from "@/scripts/request"
import { useUserinfo } from "@/stores/userinfo"
import Copyright from "@/components/Copyright.vue"
const route = useRoute()
const router = useRouter()
const { readProfiles } = useUserinfo()
const error = ref<string | null>(null)
@ -58,17 +76,20 @@ const loading = ref(false)
const panel = ref("confirm")
const newPassword = ref("")
async function confirm() {
if (!route.query["tk"]) {
if (!route.query["code"]) {
error.value = "code was not exists"
return
}
const res = await request("/api/users/me/confirm", {
method: "POST",
const res = await request("/api/users/me/password-reset", {
method: "PATCH",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
code: route.query["tk"],
code: route.query["code"],
new_password: newPassword.value,
}),
})
if (res.status !== 200) {
@ -76,13 +97,10 @@ async function confirm() {
} else {
loading.value = true
panel.value = "callback"
await readProfiles()
router.push({ name: "dashboard" })
await router.push({ name: "auth.sign-in" })
}
loading.value = false
}
confirm()
</script>
<style scoped>