|
|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div class="login-form-wrapper">
|
|
|
- <div class="login-form-title">{{ $t('login.form.title') }}</div>
|
|
|
+ <div class="login-form-title">{{ $t("login.form.title") }}</div>
|
|
|
<!-- <div class="login-form-sub-title">{{ $t('login.form.title') }}</div>-->
|
|
|
<div class="login-form-error-msg">{{ errorMessage }}</div>
|
|
|
<a-form
|
|
|
@@ -45,12 +45,12 @@
|
|
|
:model-value="loginConfig.rememberPassword"
|
|
|
@change="setRememberPassword as any"
|
|
|
>
|
|
|
- {{ $t('login.form.rememberPassword') }}
|
|
|
+ {{ $t("login.form.rememberPassword") }}
|
|
|
</a-checkbox>
|
|
|
- <a-link>{{ $t('login.form.forgetPassword') }}</a-link>
|
|
|
+ <a-link>{{ $t("login.form.forgetPassword") }}</a-link>
|
|
|
</div>
|
|
|
<a-button type="primary" html-type="submit" long :loading="loading">
|
|
|
- {{ $t('login.form.login') }}
|
|
|
+ {{ $t("login.form.login") }}
|
|
|
</a-button>
|
|
|
<!-- <a-button type="text" long class="login-form-register-btn">
|
|
|
{{ $t('login.form.register') }}
|
|
|
@@ -61,108 +61,116 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
- import { ref, reactive } from 'vue';
|
|
|
- import { useRouter } from 'vue-router';
|
|
|
- import { Message } from '@arco-design/web-vue';
|
|
|
- import { ValidatedError } from '@arco-design/web-vue/es/form/interface';
|
|
|
- import { useI18n } from 'vue-i18n';
|
|
|
- import { useStorage } from '@vueuse/core';
|
|
|
- import { useUserStore } from '@/store';
|
|
|
- import useLoading from '@/hooks/loading';
|
|
|
- import type { LoginData } from '@/api/user';
|
|
|
- import { rsaPsw } from '@/utils/ras';
|
|
|
+import { reactive, ref } from "vue";
|
|
|
+import { useRouter } from "vue-router";
|
|
|
+import { Message } from "@arco-design/web-vue";
|
|
|
+import { ValidatedError } from "@arco-design/web-vue/es/form/interface";
|
|
|
+import { useI18n } from "vue-i18n";
|
|
|
+import { useStorage } from "@vueuse/core";
|
|
|
+import { useUserStore } from "@/store";
|
|
|
+import useLoading from "@/hooks/loading";
|
|
|
+import type { LoginData } from "@/api/user";
|
|
|
+import { rsaPsw } from "@/utils/ras";
|
|
|
|
|
|
- const router = useRouter();
|
|
|
- const { t } = useI18n();
|
|
|
- const errorMessage = ref('');
|
|
|
- const { loading, setLoading } = useLoading();
|
|
|
- const userStore = useUserStore();
|
|
|
+const router = useRouter();
|
|
|
+const { t } = useI18n();
|
|
|
+const errorMessage = ref("");
|
|
|
+const { loading, setLoading } = useLoading();
|
|
|
+const userStore = useUserStore();
|
|
|
|
|
|
- const loginConfig = useStorage('login-config', {
|
|
|
- rememberPassword: true,
|
|
|
- email: '', // 演示默认值
|
|
|
- password: '', // demo default value
|
|
|
- });
|
|
|
- const userInfo = reactive({
|
|
|
- email: '', // 演示默认值
|
|
|
- password: '', // demo default value
|
|
|
- });
|
|
|
+const loginConfig = useStorage("login-config", {
|
|
|
+ rememberPassword: true,
|
|
|
+ email: "", // 演示默认值
|
|
|
+ password: "" // demo default value
|
|
|
+});
|
|
|
+const userInfo = reactive({
|
|
|
+ email: "", // 演示默认值
|
|
|
+ password: "" // demo default value
|
|
|
+});
|
|
|
|
|
|
- const handleSubmit = async ({
|
|
|
- errors,
|
|
|
- values,
|
|
|
- }: {
|
|
|
- errors: Record<string, ValidatedError> | undefined;
|
|
|
- values: Record<string, any>;
|
|
|
- }) => {
|
|
|
- if (loading.value) return;
|
|
|
- if (!errors) {
|
|
|
- setLoading(true);
|
|
|
- try {
|
|
|
- const rsaPassWord = rsaPsw(values.password) as string;
|
|
|
- console.log(values, '登录信息');
|
|
|
- await userStore.login({
|
|
|
- email: values.email,
|
|
|
- password: rsaPassWord,
|
|
|
- } as LoginData);
|
|
|
- const { redirect, ...othersQuery } = router.currentRoute.value.query;
|
|
|
- router.push({
|
|
|
- name: 'knowledgeLib',
|
|
|
- query: {
|
|
|
- ...othersQuery,
|
|
|
- },
|
|
|
- });
|
|
|
- Message.success(t('登录成功'));
|
|
|
- const { rememberPassword } = loginConfig.value;
|
|
|
- const { email, password } = values;
|
|
|
- // 实际生产环境需要进行加密存储。
|
|
|
- // The actual production environment requires encrypted storage.
|
|
|
- loginConfig.value.email = rememberPassword ? email : '';
|
|
|
- loginConfig.value.password = rememberPassword ? password : '';
|
|
|
- } catch (err) {
|
|
|
- errorMessage.value = (err as Error).message;
|
|
|
- } finally {
|
|
|
- setLoading(false);
|
|
|
- }
|
|
|
+const handleSubmit = async ({
|
|
|
+ errors,
|
|
|
+ values
|
|
|
+ }: {
|
|
|
+ errors: Record<string, ValidatedError> | undefined;
|
|
|
+ values: Record<string, any>;
|
|
|
+}) => {
|
|
|
+ if (loading.value) return;
|
|
|
+ if (!errors) {
|
|
|
+ setLoading(true);
|
|
|
+ try {
|
|
|
+ const rsaPassWord = rsaPsw(values.password) as string;
|
|
|
+ console.log(values, "登录信息");
|
|
|
+ let goto = await userStore.login({
|
|
|
+ email: values.email,
|
|
|
+ password: rsaPassWord
|
|
|
+ } as LoginData);
|
|
|
+ const { redirect, ...othersQuery } = router.currentRoute.value.query;
|
|
|
+ router.push({
|
|
|
+ name: goto,
|
|
|
+ query: {
|
|
|
+ ...othersQuery
|
|
|
+ }
|
|
|
+ });
|
|
|
+ Message.success(t("登录成功"));
|
|
|
+ const { rememberPassword } = loginConfig.value;
|
|
|
+ const { email, password } = values;
|
|
|
+ // 实际生产环境需要进行加密存储。
|
|
|
+ // The actual production environment requires encrypted storage.
|
|
|
+ loginConfig.value.email = rememberPassword ? email : "";
|
|
|
+ loginConfig.value.password = rememberPassword ? password : "";
|
|
|
+ } catch (err) {
|
|
|
+ errorMessage.value = (err as Error).message;
|
|
|
+ } finally {
|
|
|
+ setLoading(false);
|
|
|
}
|
|
|
- };
|
|
|
- const setRememberPassword = (value: boolean) => {
|
|
|
- loginConfig.value.rememberPassword = value;
|
|
|
- };
|
|
|
+ }
|
|
|
+};
|
|
|
+const setRememberPassword = (value: boolean) => {
|
|
|
+ loginConfig.value.rememberPassword = value;
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
- .login-form {
|
|
|
- &-wrapper {
|
|
|
- width: 320px;
|
|
|
- }
|
|
|
+.login-form {
|
|
|
|
|
|
- &-title {
|
|
|
- color: var(--color-text-1);
|
|
|
- font-weight: 500;
|
|
|
- font-size: 24px;
|
|
|
- line-height: 32px;
|
|
|
- }
|
|
|
+&
|
|
|
+-wrapper {
|
|
|
+ width: 320px;
|
|
|
+}
|
|
|
|
|
|
- &-sub-title {
|
|
|
- color: var(--color-text-3);
|
|
|
- font-size: 16px;
|
|
|
- line-height: 24px;
|
|
|
- }
|
|
|
+&
|
|
|
+-title {
|
|
|
+ color: var(--color-text-1);
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 24px;
|
|
|
+ line-height: 32px;
|
|
|
+}
|
|
|
|
|
|
- &-error-msg {
|
|
|
- height: 32px;
|
|
|
- color: rgb(var(--red-6));
|
|
|
- line-height: 32px;
|
|
|
- }
|
|
|
+&
|
|
|
+-sub-title {
|
|
|
+ color: var(--color-text-3);
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+}
|
|
|
|
|
|
- &-password-actions {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
+&
|
|
|
+-error-msg {
|
|
|
+ height: 32px;
|
|
|
+ color: rgb(var(--red-6));
|
|
|
+ line-height: 32px;
|
|
|
+}
|
|
|
|
|
|
- &-register-btn {
|
|
|
- color: var(--color-text-3) !important;
|
|
|
- }
|
|
|
- }
|
|
|
+&
|
|
|
+-password-actions {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+&
|
|
|
+-register-btn {
|
|
|
+ color: var(--color-text-3) !important;
|
|
|
+}
|
|
|
+
|
|
|
+}
|
|
|
</style>
|