You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
53 lines
1.9 KiB
53 lines
1.9 KiB
import React, { useRef } from "react"
|
|
import cn from "classnames"
|
|
import style from "./index.module.scss"
|
|
import { useLocation, Route, Switch } from "react-router-dom"
|
|
import { useState } from "react"
|
|
import Bubbles from "@/components/Loading/Bubbles"
|
|
import { Trans, Translation, useTranslation } from "react-i18next"
|
|
|
|
export default function Login(props: any) {
|
|
const [isSuccess, setIsSuccess] = useState(false)
|
|
const [usename, setUsername] = useState("23")
|
|
const [password, setPassword] = useState("")
|
|
const { t ,i18n} = useTranslation()
|
|
|
|
function clickLogin(event: any) {
|
|
event.preventDefault()
|
|
|
|
setIsSuccess(true)
|
|
setTimeout(() => {
|
|
setUsername('')
|
|
setPassword('')
|
|
setIsSuccess(false)
|
|
}, 2000)
|
|
}
|
|
|
|
return (
|
|
<div className={cn(style.login, style.page)}>
|
|
|
|
<div style={{background:"red"}}>
|
|
<button onClick={()=>i18n.changeLanguage(i18n.language=='en'?'zh':'en')}>{i18n.language=='en'?'zh':'en'}</button>
|
|
<h1>{t('home')}阿松大</h1>
|
|
<h1>{usename}</h1>
|
|
<h1>{password}</h1>
|
|
<h2><Trans>home</Trans></h2>
|
|
<Translation>{t => <h3>{t('home')}</h3>}</Translation>
|
|
</div>
|
|
|
|
<div className={cn(style.wrapper, isSuccess ? style["form-success"] : "")}>
|
|
<div className={cn(style.container)}>
|
|
<h1><Trans>login.title</Trans></h1>
|
|
<form className={cn(style.form)}>
|
|
<input type="text" value={usename} onChange={(e)=>setUsername(e.target.value)} placeholder={t('login.username_placeholder')} />
|
|
<input type="password" value={password} onChange={(e)=>setPassword(e.target.value)} placeholder={t('login.password_placeholder')} autoComplete="" />
|
|
<button type="submit" id={cn(style["login-login"])} onClick={clickLogin}>
|
|
<Trans>login.btnText</Trans>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
<Bubbles></Bubbles>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|