// SPDX-FileCopyrightText: © 2017 EteSync Authors // SPDX-License-Identifier: AGPL-3.0-only import * as React from "react"; import * as Etebase from "etebase"; import Button from "@material-ui/core/Button"; import TextField from "@material-ui/core/TextField"; import FormGroup from "@material-ui/core/FormGroup"; import FormControlLabel from "@material-ui/core/FormControlLabel"; import Switch from "@material-ui/core/Switch"; import { routeResolver } from "./App"; import Container from "./widgets/Container"; import LoadingIndicator from "./widgets/LoadingIndicator"; import Alert from "@material-ui/lab/Alert"; import { CircularProgress } from "@material-ui/core"; import { Redirect } from "react-router"; import { useCredentials } from "./credentials"; import { useDispatch } from "react-redux"; import { startTask } from "./helpers"; import { login } from "./store/actions"; import { Link } from "react-router-dom"; interface FormErrors { errorUsername?: string; errorEmail?: string; errorPassword?: string; errorEncryptionPassword?: string; errorServer?: string; errorGeneral?: string; } const PASSWORD_MIN_LENGTH = 8; export default function SignupPage() { const credentials = useCredentials(); const dispatch = useDispatch(); const [username, setUsername] = React.useState(""); const [email, setEmail] = React.useState(""); const [password, setPassword] = React.useState(""); const [server, setServer] = React.useState(""); const [showAdvanced, setShowAdvanced] = React.useState(false); const [loading, setLoading] = React.useState(false); const [errors, setErrors] = React.useState({}); if (credentials) { return ( ); } async function signup(e: React.FormEvent) { e.preventDefault(); setLoading(true); try { const errors: FormErrors = {}; const fieldRequired = "This field is required!"; if (!username) { errors.errorUsername = fieldRequired; } if (!email) { errors.errorEmail = fieldRequired; } if (!password) { errors.errorPassword = fieldRequired; } else if (password.length < PASSWORD_MIN_LENGTH) { errors.errorPassword = `Passwourds should be at least ${PASSWORD_MIN_LENGTH} digits long.`; } if (process.env.NODE_ENV !== "development") { if (showAdvanced && !server.startsWith("https://")) { errors.errorServer = "Server URI must start with https://"; } } if (Object.keys(errors).length) { setErrors(errors); return; } else { setErrors({}); } const serverUrl = (showAdvanced) ? server : undefined; const user: Etebase.User = { username, email, }; const etebase = await startTask((async () => { return await Etebase.Account.signup(user, password, serverUrl); })); dispatch(login(etebase)); } catch (e) { if ((e instanceof Etebase.HttpError) && (e.content)) { let found = false; if (e.content.errors) { for (const field of e.content.errors) { if (field.field === "user.username") { errors.errorUsername = field.detail; found = true; } else if (!field.field) { errors.errorGeneral = field.detail; found = true; } } } if (!found) { errors.errorGeneral = e.content.detail ?? e.toString(); } } else { errors.errorGeneral = e.toString(); } setErrors(errors); } finally { setLoading(false); } } const styles = { form: { }, textField: { marginTop: 20, }, submit: { marginTop: 40, textAlign: "right" as any, }, }; function handleInputChange(func: (value: string) => void) { return (event: React.ChangeEvent) => { func(event.target.value); }; } let advancedSettings = null; if (showAdvanced) { advancedSettings = (
); } if (loading) { return (

Deriving encryption data...

); } return (

Signup

or log in to your account


setShowAdvanced(!showAdvanced)} /> } label="Advanced settings" /> {advancedSettings} {errors.errorGeneral && ( {errors.errorGeneral} )} Please make sure you remember your password, as it can't be recovered if lost!
); }