lk
1 year ago
5 changed files with 275 additions and 243 deletions
-
1package.json
-
113src/pages/login/index.tsx
-
183src/pages/websites/cert/apply.tsx
-
73src/service/websites.ts
-
70src/store/websites/cert.ts
@ -1,97 +1,102 @@ |
|||||
import SelectLang from '@/components/select-lang' |
|
||||
import { createFileRoute } from '@tanstack/react-router' |
|
||||
import { Button, Form, Input, Space } from 'antd' |
|
||||
import { useAtom, useAtomValue } from 'jotai' |
|
||||
import { useTranslation } from '@/i18n.ts' |
|
||||
import { loginAtom, loginFormAtom } from '@/store/system/user.ts' |
|
||||
import { memo, useLayoutEffect } from 'react' |
|
||||
import { useStyles } from './style.ts' |
|
||||
|
import SelectLang from "@/components/select-lang"; |
||||
|
import { createFileRoute } from "@tanstack/react-router"; |
||||
|
import { Button, Form, Input, Radio, Space } from "antd"; |
||||
|
import { useAtom, useAtomValue } from "jotai"; |
||||
|
import { useTranslation } from "@/i18n.ts"; |
||||
|
import { loginAtom, loginFormAtom } from "@/store/system/user.ts"; |
||||
|
import React, {memo, useLayoutEffect, useState} from "react"; |
||||
|
import { useStyles } from "./style.ts"; |
||||
|
|
||||
const Login = memo(() => { |
const Login = memo(() => { |
||||
|
|
||||
const { styles } = useStyles() |
|
||||
const { t } = useTranslation() |
|
||||
const [ values, setValues ] = useAtom(loginFormAtom) |
|
||||
const { isPending, mutate } = useAtomValue(loginAtom) |
|
||||
const [ form ] = Form.useForm() |
|
||||
|
const { styles } = useStyles(); |
||||
|
const { t } = useTranslation(); |
||||
|
const [values, setValues] = useAtom(loginFormAtom); |
||||
|
const { isPending, mutate } = useAtomValue(loginAtom); |
||||
|
const [form] = Form.useForm(); |
||||
|
|
||||
const handleSubmit = () => { |
const handleSubmit = () => { |
||||
form.validateFields().then(() => { |
form.validateFields().then(() => { |
||||
mutate(values) |
|
||||
}) |
|
||||
} |
|
||||
|
mutate(values); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
const [loginMod, setLoginMod] = useState([ |
||||
|
{ value: "single", info: "帐号密码登录" }, |
||||
|
{ value: "multiple-email", info: "邮箱登录" }, |
||||
|
{ value: "multiple-plane", info: "飞机登录" }, |
||||
|
]); |
||||
|
|
||||
useLayoutEffect(() => { |
|
||||
|
const [selectedMode, setSelectedMode] = useState(loginMod[0].value); |
||||
|
|
||||
document.body.className = 'login' |
|
||||
return () => { |
|
||||
document.body.className = document.body.className.replace('login', '') |
|
||||
} |
|
||||
|
const handleModeChange = (e: any) => { |
||||
|
setSelectedMode(e.target.value); |
||||
|
}; |
||||
|
|
||||
}, []) |
|
||||
|
useLayoutEffect(() => { |
||||
|
document.body.className = "login"; |
||||
|
return () => { |
||||
|
document.body.className = document.body.className.replace("login", ""); |
||||
|
}; |
||||
|
}, []); |
||||
|
|
||||
return ( |
return ( |
||||
<div className={styles.container}> |
<div className={styles.container}> |
||||
<div className={styles.language}> |
<div className={styles.language}> |
||||
<SelectLang/> |
|
||||
|
<SelectLang /> |
||||
</div> |
</div> |
||||
<div className={styles.loginBlock}> |
<div className={styles.loginBlock}> |
||||
<div className={styles.innerBlock}> |
<div className={styles.innerBlock}> |
||||
|
|
||||
<div className={styles.desc}> |
|
||||
<span className={styles.active}> |
|
||||
{t('login.title')} |
|
||||
</span> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
<Form form={form} |
|
||||
|
<Radio.Group style={{ marginBottom: 8 }} value={selectedMode} onChange={handleModeChange}> |
||||
|
{loginMod.map((mod) => ( |
||||
|
<Radio.Button key={mod.value} value={mod.value}> |
||||
|
{mod.info} |
||||
|
</Radio.Button> |
||||
|
))} |
||||
|
</Radio.Group> |
||||
|
<Form |
||||
|
form={form} |
||||
disabled={isPending} |
disabled={isPending} |
||||
initialValues={values} |
initialValues={values} |
||||
onValuesChange={(_, allValues) => { |
onValuesChange={(_, allValues) => { |
||||
setValues(allValues) |
|
||||
|
setValues(allValues); |
||||
}} |
}} |
||||
size="large"> |
|
||||
<Form.Item name={'username'} |
|
||||
rules={[ { required: true, message: t('login.usernameMsg') } ]}> |
|
||||
<Input maxLength={20} placeholder={t('login.username')}/> |
|
||||
|
size="large" |
||||
|
> |
||||
|
<Form.Item name={"username"} rules={[{ required: true, message: t("login.usernameMsg") }]}> |
||||
|
<Input maxLength={20} placeholder={t("login.username")} /> |
||||
</Form.Item> |
</Form.Item> |
||||
<Form.Item name={'password'} |
|
||||
rules={[ { required: true, message: t('login.passwordMsg') } ]}> |
|
||||
<Input.Password placeholder={t('login.password')}/> |
|
||||
|
<Form.Item name={"password"} rules={[{ required: true, message: t("login.passwordMsg") }]}> |
||||
|
<Input.Password placeholder={t("login.password")} /> |
||||
</Form.Item> |
</Form.Item> |
||||
<Form.Item noStyle> |
<Form.Item noStyle> |
||||
<Space direction="horizontal"> |
<Space direction="horizontal"> |
||||
<Form.Item name={'code'} |
|
||||
rules={[ { required: true, message: t('login.codeMsg') } ]}> |
|
||||
<Input placeholder={t('login.code')}/> |
|
||||
|
<Form.Item name={"code"} rules={[{ required: true, message: t("login.codeMsg") }]}> |
||||
|
<Input placeholder={t("login.code")} /> |
||||
{/*<img src="https://img.alicdn.com/tfs/TB1KtN6mKH2gK0jSZJnXXaT1FXa-1014-200.png" alt="验证码" />*/} |
{/*<img src="https://img.alicdn.com/tfs/TB1KtN6mKH2gK0jSZJnXXaT1FXa-1014-200.png" alt="验证码" />*/} |
||||
</Form.Item> |
</Form.Item> |
||||
</Space> |
</Space> |
||||
</Form.Item> |
</Form.Item> |
||||
<Form.Item style={{ marginBottom: 10 }}> |
<Form.Item style={{ marginBottom: 10 }}> |
||||
<Button |
<Button |
||||
htmlType={'submit'} |
|
||||
|
htmlType={"submit"} |
||||
type="primary" |
type="primary" |
||||
onClick={handleSubmit} |
onClick={handleSubmit} |
||||
className={'submitBtn'} |
|
||||
|
className={"submitBtn"} |
||||
loading={isPending} |
loading={isPending} |
||||
disabled={isPending} |
disabled={isPending} |
||||
> |
> |
||||
{t('login.submit')} |
|
||||
|
{t("login.submit")} |
||||
</Button> |
</Button> |
||||
</Form.Item> |
</Form.Item> |
||||
</Form> |
</Form> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
|
|
||||
</div> |
</div> |
||||
) |
|
||||
}) |
|
||||
|
); |
||||
|
}); |
||||
|
|
||||
export const Route = createFileRoute('/login')({ |
|
||||
component: Login |
|
||||
}) |
|
||||
|
export const Route = createFileRoute("/login")({ |
||||
|
component: Login, |
||||
|
}); |
||||
|
|
||||
export default Login |
|
||||
|
export default Login; |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue