UI work, config.js stuff

web/src/components/Signup.js

@@ -1,52 +1,41 @@
 import * as React from 'react';
-import {Avatar, Link} from "@mui/material";
 import TextField from "@mui/material/TextField";
 import Button from "@mui/material/Button";
 import Box from "@mui/material/Box";
 import api from "../app/Api";
 import routes from "./routes";
 import session from "../app/Session";
-import logo from "../img/ntfy2.svg";
 import Typography from "@mui/material/Typography";
 import {NavLink} from "react-router-dom";
+import AvatarBox from "./AvatarBox";
+import {useTranslation} from "react-i18next";
 
 const Signup = () => {
+    const { t } = useTranslation();
     const handleSubmit = async (event) => {
         event.preventDefault();
         const data = new FormData(event.currentTarget);
-        const username = data.get('username');
-        const password = data.get('password');
         const user = {
-            username: username,
-            password: password
-        }; // FIXME omg so awful
-
-        await api.createAccount("http://localhost:2586"/*window.location.origin*/, username, password);
-        const token = await api.login("http://localhost:2586"/*window.location.origin*/, user);
+            username: data.get('username'),
+            password: data.get('password')
+        };
+        await api.createAccount(config.baseUrl, user.username, user.password);
+        const token = await api.login(config.baseUrl, user);
         console.log(`[Api] User auth for user ${user.username} successful, token is ${token}`);
         session.store(user.username, token);
         window.location.href = routes.app;
     };
-
+    if (!config.enableSignup) {
+        return (
+            <AvatarBox>
+                <Typography sx={{ typography: 'h6' }}>{t("Signup is disabled")}</Typography>
+            </AvatarBox>
+        );
+    }
     return (
-        <Box
-            sx={{
-                display: 'flex',
-                flexGrow: 1,
-                justifyContent: 'center',
-                flexDirection: 'column',
-                alignContent: 'center',
-                alignItems: 'center',
-                height: '100vh'
-            }}
-        >
-            <Avatar
-                sx={{ m: 2, width: 64, height: 64, borderRadius: 3 }}
-                src={logo}
-                variant="rounded"
-            />
+        <AvatarBox>
             <Typography sx={{ typography: 'h6' }}>
-                Create a ntfy account
+                {t("Create a ntfy account")}
             </Typography>
             <Box component="form" onSubmit={handleSubmit} noValidate sx={{mt: 1, maxWidth: 400}}>
                 <TextField
@@ -83,15 +72,17 @@ const Signup = () => {
                     variant="contained"
                     sx={{mt: 2, mb: 2}}
                 >
-                    Sign up
+                    {t("Sign up")}
                 </Button>
             </Box>
-            <Typography sx={{mb: 4}}>
-                <NavLink to={routes.login} variant="body1">
-                    Already have an account? Sign in!
-                </NavLink>
-            </Typography>
-        </Box>
+            {config.enableLogin &&
+                <Typography sx={{mb: 4}}>
+                    <NavLink to={routes.login} variant="body1">
+                        {t("Already have an account? Sign in!")}
+                    </NavLink>
+                </Typography>
+            }
+        </AvatarBox>
     );
 }