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
Ryan Wang 2024-05-23 10:58:50 +08:00 committed by GitHub
parent 99eae2f31b
commit a8fb28a105
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 70 additions and 69 deletions

View File

@ -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";

View File

@ -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",
},
},
],
}, },
]; ];

View File

@ -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>