kevin/matrix-veles
1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/matrix-veles.git synced 2025-06-07 21:22:00 +02:00
Code Issues Projects Releases Wiki Activity

webui: Add API authentication

Browse source
This commit is contained in:
Kevin Kandlbinder 2022-03-25 21:18:45 +01:00
parent 35a2070fb9
commit 0aa91fa99f
34 changed files with 2088 additions and 135 deletions
Download patch file Download diff file Expand all files Collapse all files

57
webui/src/components/auth/RegisterView.tsx
View file

@ -8,12 +8,18 @@ import {AuthLocationState} from "../../layouts/AuthLayout";
import {useAppDispatch} from "../../app/hooks";
import {Helmet} from "react-helmet";
import {Trans, useTranslation} from "react-i18next";
import {logIn} from "../../features/auth/authSlice";
import RegisterMutation from "../../mutations/RegisterMutation";
import {Key} from "lucide-react";
const RegisterView = () => {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [matrix, setMatrix] = useState("");
const [error, setError] = useState("");
const [loading, setLoading] = useState(false);
const location = useLocation()
const locationState = location.state as AuthLocationState
@ -22,26 +28,57 @@ const RegisterView = () => {
const {t} = useTranslation()
const onSubmit = () => {
console.log(username, password, matrix)
const onSubmit = async () => {
setLoading(true)
setError("")
try {
const res = await RegisterMutation(username, password, matrix)
const jwt = res.register;
dispatch(logIn(jwt))
} catch (e: any) {
setError("An error occurred: " + e.source?.errors[0]?.message)
} finally {
setLoading(false)
}
}
return <>
<Logo width={64} height={64} />
<Logo width={64} height={64}/>
<Helmet>
<title>{t("auth:register.htmlTitle", "Register with Veles")}</title>
</Helmet>
<h1><Trans i18nKey={"auth:register.title"}>Register</Trans></h1>
<form onSubmit={(e) => {e.preventDefault(); onSubmit()}} className={styles.authForm}>
<input onChange={(ev) => setUsername(ev.target.value)} value={username} placeholder={t("auth:username", "Username")} autoCapitalize={"no"} autoCorrect={"no"} />
<input onChange={(ev) => setPassword(ev.target.value)} value={password} placeholder={t("auth:password", "Password")} type={"password"} autoCapitalize={"no"} autoCorrect={"no"} />
<input onChange={(ev) => setMatrix(ev.target.value)} value={matrix} placeholder={t("auth:matrix_handle", "Matrix-Handle")+" (@user:matrix.org)"} autoCapitalize={"no"} autoCorrect={"no"} />
<button onClick={() => onSubmit()}><Trans i18nKey={"auth:register.register"}>Register</Trans></button>
</form>
{loading && <div className={styles.loader}>
<Key/>
<span><Trans i18nKey={"auth:login.logging_in"}>Logging in...</Trans></span>
</div>}
<Link to={"/auth/login"} className={styles.mindChangedLink} aria-label={t("auth:login.login", "Login")} state={locationState}><Trans i18nKey={"auth:register.login_instead"}>I already have an account</Trans></Link>
{!loading && <>
{error !== "" && <span className={styles.error}>{error}</span>}
<form onSubmit={(e) => {
e.preventDefault();
onSubmit()
}} className={styles.authForm}>
<input onChange={(ev) => setUsername(ev.target.value)} value={username}
placeholder={t("auth:username", "Username")} autoCapitalize={"no"} autoCorrect={"no"}/>
<input onChange={(ev) => setPassword(ev.target.value)} value={password}
placeholder={t("auth:password", "Password")} type={"password"} autoCapitalize={"no"}
autoCorrect={"no"}/>
<input onChange={(ev) => setMatrix(ev.target.value)} value={matrix}
placeholder={t("auth:matrix_handle", "Matrix-Handle") + " (@user:matrix.org)"}
autoCapitalize={"no"} autoCorrect={"no"}/>
<button onClick={() => onSubmit()}><Trans i18nKey={"auth:register.register"}>Register</Trans></button>
</form>
<Link to={"/auth/login"} className={styles.mindChangedLink} aria-label={t("auth:login.login", "Login")}
state={locationState}><Trans i18nKey={"auth:register.login_instead"}>I already have an account</Trans></Link>
</>}
</>
}