mirror of https://github.com/halo-dev/halo
refactor: layout of reset password page (#5960)
#### What type of PR is this? /area ui /kind improvement /milestone 2.16.x #### What this PR does / why we need it: 让 UC 端的重置密码页面使用和登录相关页面一样的 GatewayLayout 布局组件。 #### Does this PR introduce a user-facing change? ```release-note None ```pull/5975/head
parent
99eae2f31b
commit
a8fb28a105
|
@ -2,7 +2,7 @@ import type { RouteRecordRaw } from "vue-router";
|
||||||
import NotFound from "@/views/exceptions/NotFound.vue";
|
import NotFound from "@/views/exceptions/NotFound.vue";
|
||||||
import Forbidden from "@/views/exceptions/Forbidden.vue";
|
import Forbidden from "@/views/exceptions/Forbidden.vue";
|
||||||
import BasicLayout from "@console/layouts/BasicLayout.vue";
|
import BasicLayout from "@console/layouts/BasicLayout.vue";
|
||||||
import GatewayLayout from "@console/layouts/GatewayLayout.vue";
|
import GatewayLayout from "@/layouts/GatewayLayout.vue";
|
||||||
import Setup from "@console/views/system/Setup.vue";
|
import Setup from "@console/views/system/Setup.vue";
|
||||||
import Redirect from "@console/views/system/Redirect.vue";
|
import Redirect from "@console/views/system/Redirect.vue";
|
||||||
import SetupInitialData from "@console/views/system/SetupInitialData.vue";
|
import SetupInitialData from "@console/views/system/SetupInitialData.vue";
|
||||||
|
|
|
@ -3,6 +3,7 @@ import NotFound from "@/views/exceptions/NotFound.vue";
|
||||||
import Forbidden from "@/views/exceptions/Forbidden.vue";
|
import Forbidden from "@/views/exceptions/Forbidden.vue";
|
||||||
import BasicLayout from "@uc/layouts/BasicLayout.vue";
|
import BasicLayout from "@uc/layouts/BasicLayout.vue";
|
||||||
import ResetPassword from "@uc/views/ResetPassword.vue";
|
import ResetPassword from "@uc/views/ResetPassword.vue";
|
||||||
|
import GatewayLayout from "@/layouts/GatewayLayout.vue";
|
||||||
|
|
||||||
export const routes: Array<RouteRecordRaw> = [
|
export const routes: Array<RouteRecordRaw> = [
|
||||||
{
|
{
|
||||||
|
@ -23,11 +24,17 @@ export const routes: Array<RouteRecordRaw> = [
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/reset-password/:username",
|
path: "/reset-password/:username",
|
||||||
component: ResetPassword,
|
component: GatewayLayout,
|
||||||
name: "ResetPassword",
|
children: [
|
||||||
meta: {
|
{
|
||||||
title: "core.uc_reset_password.title",
|
path: "",
|
||||||
},
|
name: "ResetPassword",
|
||||||
|
component: ResetPassword,
|
||||||
|
meta: {
|
||||||
|
title: "core.uc_reset_password.title",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
@ -4,7 +4,6 @@ import { Toast, VButton } from "@halo-dev/components";
|
||||||
import { useRouteParams, useRouteQuery } from "@vueuse/router";
|
import { useRouteParams, useRouteQuery } from "@vueuse/router";
|
||||||
import { ref } from "vue";
|
import { ref } from "vue";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import IconLogo from "~icons/core/logo?width=5rem&height=2rem";
|
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
@ -46,69 +45,64 @@ const inputClasses = {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div class="flex w-72 flex-col">
|
||||||
class="flex h-screen flex-col items-center overflow-auto bg-white/90 pt-[30vh]"
|
<FormKit
|
||||||
>
|
id="reset-password-form"
|
||||||
<IconLogo class="mb-8 flex-none" />
|
name="reset-password-form"
|
||||||
<div class="flex w-72 flex-col">
|
type="form"
|
||||||
|
:classes="{
|
||||||
|
form: '!divide-none',
|
||||||
|
}"
|
||||||
|
:config="{ validationVisibility: 'submit' }"
|
||||||
|
@submit="onSubmit"
|
||||||
|
@keyup.enter="$formkit.submit('reset-password-form')"
|
||||||
|
>
|
||||||
<FormKit
|
<FormKit
|
||||||
id="reset-password-form"
|
:classes="inputClasses"
|
||||||
name="reset-password-form"
|
name="username"
|
||||||
type="form"
|
:model-value="username"
|
||||||
:classes="{
|
:placeholder="$t('core.uc_reset_password.fields.username.label')"
|
||||||
form: '!divide-none',
|
:validation-label="$t('core.uc_reset_password.fields.username.label')"
|
||||||
|
:autofocus="true"
|
||||||
|
type="text"
|
||||||
|
disabled
|
||||||
|
validation="required"
|
||||||
|
></FormKit>
|
||||||
|
<FormKit
|
||||||
|
:classes="inputClasses"
|
||||||
|
name="password"
|
||||||
|
type="password"
|
||||||
|
:placeholder="$t('core.uc_reset_password.fields.password.label')"
|
||||||
|
:validation-label="$t('core.uc_reset_password.fields.password.label')"
|
||||||
|
validation="required:trim|length:5,100|matches:/^\S.*\S$/"
|
||||||
|
:validation-messages="{
|
||||||
|
matches: $t('core.formkit.validation.trim'),
|
||||||
}"
|
}"
|
||||||
:config="{ validationVisibility: 'submit' }"
|
></FormKit>
|
||||||
@submit="onSubmit"
|
<FormKit
|
||||||
@keyup.enter="$formkit.submit('reset-password-form')"
|
:classes="inputClasses"
|
||||||
>
|
name="password_confirm"
|
||||||
<FormKit
|
type="password"
|
||||||
:classes="inputClasses"
|
:placeholder="
|
||||||
name="username"
|
$t('core.uc_reset_password.fields.password_confirm.label')
|
||||||
:model-value="username"
|
"
|
||||||
:placeholder="$t('core.uc_reset_password.fields.username.label')"
|
:validation-label="
|
||||||
:validation-label="$t('core.uc_reset_password.fields.username.label')"
|
$t('core.uc_reset_password.fields.password_confirm.label')
|
||||||
:autofocus="true"
|
"
|
||||||
type="text"
|
validation="confirm|required:trim|length:5,100|matches:/^\S.*\S$/"
|
||||||
disabled
|
:validation-messages="{
|
||||||
validation="required"
|
matches: $t('core.formkit.validation.trim'),
|
||||||
></FormKit>
|
}"
|
||||||
<FormKit
|
></FormKit>
|
||||||
:classes="inputClasses"
|
</FormKit>
|
||||||
name="password"
|
<VButton
|
||||||
type="password"
|
class="mt-8"
|
||||||
:placeholder="$t('core.uc_reset_password.fields.password.label')"
|
block
|
||||||
:validation-label="$t('core.uc_reset_password.fields.password.label')"
|
:loading="loading"
|
||||||
validation="required:trim|length:5,100|matches:/^\S.*\S$/"
|
type="secondary"
|
||||||
:validation-messages="{
|
@click="$formkit.submit('reset-password-form')"
|
||||||
matches: $t('core.formkit.validation.trim'),
|
>
|
||||||
}"
|
{{ $t("core.uc_reset_password.operations.reset.button") }}
|
||||||
></FormKit>
|
</VButton>
|
||||||
<FormKit
|
|
||||||
:classes="inputClasses"
|
|
||||||
name="password_confirm"
|
|
||||||
type="password"
|
|
||||||
:placeholder="
|
|
||||||
$t('core.uc_reset_password.fields.password_confirm.label')
|
|
||||||
"
|
|
||||||
:validation-label="
|
|
||||||
$t('core.uc_reset_password.fields.password_confirm.label')
|
|
||||||
"
|
|
||||||
validation="confirm|required:trim|length:5,100|matches:/^\S.*\S$/"
|
|
||||||
:validation-messages="{
|
|
||||||
matches: $t('core.formkit.validation.trim'),
|
|
||||||
}"
|
|
||||||
></FormKit>
|
|
||||||
</FormKit>
|
|
||||||
<VButton
|
|
||||||
class="mt-8"
|
|
||||||
block
|
|
||||||
:loading="loading"
|
|
||||||
type="secondary"
|
|
||||||
@click="$formkit.submit('reset-password-form')"
|
|
||||||
>
|
|
||||||
{{ $t("core.uc_reset_password.operations.reset.button") }}
|
|
||||||
</VButton>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
Loading…
Reference in New Issue