/** @format */ import { GithubOutlined, GitlabOutlined, LockOutlined, MobileOutlined, QqOutlined, SafetyOutlined, UserOutlined, WechatOutlined, } from "@ant-design/icons"; import { CaptFieldRef, ProFormCaptcha, ProFormCheckbox, ProFormText, } from "@ant-design/pro-components"; import { Alert, Button, ConfigProvider, Divider, Form, Image, message, Space, Tabs, Tooltip, } from "antd"; import { CSSProperties, useRef, useState } from "react"; import logo from "@/assets/icons/schisandra.svg"; import qrCode from "@/assets/images/login_qrcode-landaiqing.jpg"; import styles from "./index.module.less"; import { observer } from "mobx-react"; import FooterComponent from "@/components/Footer"; import RotateCaptcha, { CaptchaInstance, type TicketInfoType } from "react-rotate-captcha"; import { get, load } from "@/api/captcha/index.ts"; import { getSms, login, oauthLogin } from "@/api/user"; import { TinyColor } from "@ctrl/tinycolor"; type LoginType = "account" | "phone"; const iconStyles: CSSProperties = { color: "rgba(0, 0, 0, 0.2)", fontSize: "18px", verticalAlign: "middle", cursor: "pointer", }; export default observer(() => { const [form] = Form.useForm(); const smsCaptcha = useRef(null); const loginCaptcha = useRef(null); const captchaRef = useRef(); const colors = ["#40e495", "#30dd8a", "#2bb673"]; const getHoverColors = (colors: string[]) => colors.map((color) => new TinyColor(color).lighten(5).toString()); const getActiveColors = (colors: string[]) => colors.map((color) => new TinyColor(color).darken(5).toString()); async function smsVerify(token: string, deg: number): Promise { const phone = form.getFieldValue("mobile"); const data: any = { token: token, deg: deg, phone: phone, }; const res: any = await getSms(data); if (res && res.code === 0) { message.open({ content: res.data, type: "success", duration: 5, }); } else { message.open({ content: res.data, type: "warning", duration: 5, }); } return res; } async function loginVerify(token: string, deg: number): Promise { const userName = form.getFieldValue("username"); const password = form.getFieldValue("password"); const data: any = { token: token, deg: deg, userName: userName, password: password, }; const res: any = await login(data); if (res && res.success && res.code === 0) { message.open({ content: "登录成功!", type: "success", duration: 5, }); } else if (res.code === 0 && !res.success) { message.open({ content: "登录失败!用户名或密码错误!", type: "error", duration: 5, }); } return res; } const items = [ { label: ( 账户登录 ), key: "account", }, { label: ( 短信登录 ), key: "phone", }, ]; async function oAuthLogin(type: string) { const res: any = await oauthLogin(type); window.open(res.data, "_blank"); } const [loginType, setLoginType] = useState("account"); async function openSmsCaptcha() { smsCaptcha.current!.open(); } async function openLoginCaptcha() { loginCaptcha.current!.open(); } return (
微信扫码登录 微信扫码关注公众号)} description={
微信扫码 关注公众号
登录更快更安全
} // type="success" showIcon={true} className={styles.alert} icon={} />
logo 五味子云存储
随时随地分享你的美好瞬间
setLoginType(activeKey as LoginType) }> {loginType === "account" && ( <> , }} placeholder={"请输入邮箱或电话号码"} rules={[ { required: true, message: "请输入用户名!", }, ]} /> , }} placeholder={"请输入密码"} rules={[ { required: true, message: "请输入密码!", }, { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,18}$/, message: "密码长度需在6~18位字符,且必须包含字母和数字!", }, ]} /> )} {loginType === "phone" && ( <> , autoComplete: "off", }} name="mobile" placeholder={"请输入手机号"} rules={[ { required: true, message: "请输入手机号!", }, { pattern: /^1\d{10}$/, message: "手机号格式错误!", }, ]} /> , }} captchaProps={{ size: "large", }} placeholder={"请输入验证码"} captchaTextRender={(timing: boolean) => { if (timing) { // return `${count} ${"获取验证码"}`; return `${"获取验证码"}`; } return "获取验证码"; }} name="captcha" phoneName={"mobile"} rules={[ { required: true, message: "请输入验证码!", }, ]} fieldRef={captchaRef} countDown={300} onGetCaptcha={async () => { await openSmsCaptcha(); }} /> )}
自动登录 忘记密码
其他登录方式
{ oAuthLogin("github").then(); }} style={{ ...iconStyles, color: "#333333" }} />
{ oAuthLogin("gitee").then(); }} style={{ ...iconStyles, color: "#FF6A10" }} />
注册
); });