lk
3 months ago
5 changed files with 275 additions and 243 deletions
-
1package.json
-
179src/pages/login/index.tsx
-
183src/pages/websites/cert/apply.tsx
-
73src/service/websites.ts
-
82src/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 { 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 = () => { |
|||
form.validateFields().then(() => { |
|||
mutate(values); |
|||
}); |
|||
}; |
|||
|
|||
const handleSubmit = () => { |
|||
form.validateFields().then(() => { |
|||
mutate(values) |
|||
}) |
|||
} |
|||
const [loginMod, setLoginMod] = useState([ |
|||
{ value: "single", info: "帐号密码登录" }, |
|||
{ value: "multiple-email", info: "邮箱登录" }, |
|||
{ value: "multiple-plane", info: "飞机登录" }, |
|||
]); |
|||
|
|||
const [selectedMode, setSelectedMode] = useState(loginMod[0].value); |
|||
|
|||
useLayoutEffect(() => { |
|||
const handleModeChange = (e: any) => { |
|||
setSelectedMode(e.target.value); |
|||
}; |
|||
|
|||
document.body.className = 'login' |
|||
return () => { |
|||
document.body.className = document.body.className.replace('login', '') |
|||
} |
|||
useLayoutEffect(() => { |
|||
document.body.className = "login"; |
|||
return () => { |
|||
document.body.className = document.body.className.replace("login", ""); |
|||
}; |
|||
}, []); |
|||
|
|||
}, []) |
|||
return ( |
|||
<div className={styles.container}> |
|||
<div className={styles.language}> |
|||
<SelectLang /> |
|||
</div> |
|||
<div className={styles.loginBlock}> |
|||
<div className={styles.innerBlock}> |
|||
<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} |
|||
initialValues={values} |
|||
onValuesChange={(_, allValues) => { |
|||
setValues(allValues); |
|||
}} |
|||
size="large" |
|||
> |
|||
<Form.Item name={"username"} rules={[{ required: true, message: t("login.usernameMsg") }]}> |
|||
<Input maxLength={20} placeholder={t("login.username")} /> |
|||
</Form.Item> |
|||
<Form.Item name={"password"} rules={[{ required: true, message: t("login.passwordMsg") }]}> |
|||
<Input.Password placeholder={t("login.password")} /> |
|||
</Form.Item> |
|||
<Form.Item noStyle> |
|||
<Space direction="horizontal"> |
|||
<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="验证码" />*/} |
|||
</Form.Item> |
|||
</Space> |
|||
</Form.Item> |
|||
<Form.Item style={{ marginBottom: 10 }}> |
|||
<Button |
|||
htmlType={"submit"} |
|||
type="primary" |
|||
onClick={handleSubmit} |
|||
className={"submitBtn"} |
|||
loading={isPending} |
|||
disabled={isPending} |
|||
> |
|||
{t("login.submit")} |
|||
</Button> |
|||
</Form.Item> |
|||
</Form> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
); |
|||
}); |
|||
|
|||
return ( |
|||
<div className={styles.container}> |
|||
<div className={styles.language}> |
|||
<SelectLang/> |
|||
</div> |
|||
<div className={styles.loginBlock}> |
|||
<div className={styles.innerBlock}> |
|||
export const Route = createFileRoute("/login")({ |
|||
component: Login, |
|||
}); |
|||
|
|||
<div className={styles.desc}> |
|||
<span className={styles.active}> |
|||
{t('login.title')} |
|||
</span> |
|||
|
|||
</div> |
|||
|
|||
<Form form={form} |
|||
disabled={isPending} |
|||
initialValues={values} |
|||
onValuesChange={(_, allValues) => { |
|||
setValues(allValues) |
|||
}} |
|||
size="large"> |
|||
<Form.Item name={'username'} |
|||
rules={[ { required: true, message: t('login.usernameMsg') } ]}> |
|||
<Input maxLength={20} placeholder={t('login.username')}/> |
|||
</Form.Item> |
|||
<Form.Item name={'password'} |
|||
rules={[ { required: true, message: t('login.passwordMsg') } ]}> |
|||
<Input.Password placeholder={t('login.password')}/> |
|||
</Form.Item> |
|||
<Form.Item noStyle> |
|||
<Space direction="horizontal"> |
|||
<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="验证码" />*/} |
|||
</Form.Item> |
|||
</Space> |
|||
</Form.Item> |
|||
<Form.Item style={{ marginBottom: 10 }}> |
|||
<Button |
|||
htmlType={'submit'} |
|||
type="primary" |
|||
onClick={handleSubmit} |
|||
className={'submitBtn'} |
|||
loading={isPending} |
|||
disabled={isPending} |
|||
> |
|||
{t('login.submit')} |
|||
</Button> |
|||
</Form.Item> |
|||
</Form> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
) |
|||
}) |
|||
|
|||
export const Route = createFileRoute('/login')({ |
|||
component: Login |
|||
}) |
|||
|
|||
export default Login |
|||
export default Login; |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue