stuff

web/src/app/Api.js

@@ -149,18 +149,6 @@ class Api {
         }
     }
 
-    async userStats(baseUrl) {
-        const url = userStatsUrl(baseUrl);
-        console.log(`[Api] Fetching user stats ${url}`);
-        const response = await fetch(url);
-        if (response.status !== 200) {
-            throw new Error(`Unexpected server response ${response.status}`);
-        }
-        const stats = await response.json();
-        console.log(`[Api] Stats`, stats);
-        return stats;
-    }
-
     async createAccount(baseUrl, username, password) {
         const url = accountUrl(baseUrl);
         const body = JSON.stringify({

web/src/app/utils.js

@@ -18,7 +18,6 @@ export const topicUrlJsonPoll = (baseUrl, topic) => `${topicUrlJson(baseUrl, top
 export const topicUrlJsonPollWithSince = (baseUrl, topic, since) => `${topicUrlJson(baseUrl, topic)}?poll=1&since=${since}`;
 export const topicUrlAuth = (baseUrl, topic) => `${topicUrl(baseUrl, topic)}/auth`;
 export const topicShortUrl = (baseUrl, topic) => shortUrl(topicUrl(baseUrl, topic));
-export const userStatsUrl = (baseUrl) => `${baseUrl}/user/stats`;
 export const accountUrl = (baseUrl) => `${baseUrl}/v1/account`;
 export const accountPasswordUrl = (baseUrl) => `${baseUrl}/v1/account/password`;
 export const accountTokenUrl = (baseUrl) => `${baseUrl}/v1/account/token`;

web/src/components/ActionBar.js

@@ -264,11 +264,10 @@ const ProfileIcon = (props) => {
         session.reset();
         window.location.href = routes.app;
     };
-
     return (
         <>
             {session.exists() &&
-                <IconButton color="inherit" size="large" edge="end" onClick={handleClick} sx={{marginRight: 0}} aria-label={t("xxxxxxx")}>
+                <IconButton color="inherit" size="large" edge="end" onClick={handleClick} aria-label={t("xxxxxxx")}>
                     <AccountCircleIcon/>
                 </IconButton>
             }

web/src/components/Login.js

@@ -15,13 +15,11 @@ import {useState} from "react";
 const Login = () => {
     const { t } = useTranslation();
     const [error, setError] = useState("");
+    const [username, setUsername] = useState("");
+    const [password, setPassword] = useState("");
     const handleSubmit = async (event) => {
         event.preventDefault();
-        const data = new FormData(event.currentTarget);
-        const user = {
-            username: data.get('username'),
-            password: data.get('password'),
-        }
+        const user = { username, password };
         try {
             const token = await api.login(config.baseUrl, user);
             if (token) {
@@ -61,6 +59,8 @@ const Login = () => {
                     id="username"
                     label={t("Username")}
                     name="username"
+                    value={username}
+                    onChange={ev => setUsername(ev.target.value.trim())}
                     autoFocus
                 />
                 <TextField
@@ -71,12 +71,15 @@ const Login = () => {
                     label={t("Password")}
                     type="password"
                     id="password"
+                    value={password}
+                    onChange={ev => setPassword(ev.target.value.trim())}
                     autoComplete="current-password"
                 />
                 <Button
                     type="submit"
                     fullWidth
                     variant="contained"
+                    disabled={username === "" || password === ""}
                     sx={{mt: 2, mb: 2}}
                 >
                     {t("Sign in")}

web/src/components/Signup.js

@@ -9,21 +9,37 @@ import Typography from "@mui/material/Typography";
 import {NavLink} from "react-router-dom";
 import AvatarBox from "./AvatarBox";
 import {useTranslation} from "react-i18next";
+import {useState} from "react";
+import WarningAmberIcon from "@mui/icons-material/WarningAmber";
 
 const Signup = () => {
     const { t } = useTranslation();
+    const [error, setError] = useState("");
+    const [username, setUsername] = useState("");
+    const [password, setPassword] = useState("");
+    const [confirm, setConfirm] = useState("");
     const handleSubmit = async (event) => {
         event.preventDefault();
-        const data = new FormData(event.currentTarget);
-        const 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;
+        const user = { username, password };
+        try {
+            await api.createAccount(config.baseUrl, user.username, user.password);
+            const token = await api.login(config.baseUrl, user);
+            if (token) {
+                console.log(`[Signup] User signup for user ${user.username} successful, token is ${token}`);
+                session.store(user.username, token);
+                window.location.href = routes.app;
+            } else {
+                console.log(`[Signup] Signup for user ${user.username} failed, access denied`);
+                setError(t("Login failed: Invalid username or password"));
+            }
+        } catch (e) {
+            console.log(`[Signup] Signup for user ${user.username} failed`, e);
+            if (e && e.message) {
+                setError(e.message);
+            } else {
+                setError(t("Unknown error. Check logs for details."))
+            }
+        }
     };
     if (!config.enableSignup) {
         return (
@@ -45,6 +61,8 @@ const Signup = () => {
                     id="username"
                     label="Username"
                     name="username"
+                    value={username}
+                    onChange={ev => setUsername(ev.target.value.trim())}
                     autoFocus
                 />
                 <TextField
@@ -56,6 +74,8 @@ const Signup = () => {
                     type="password"
                     id="password"
                     autoComplete="current-password"
+                    value={password}
+                    onChange={ev => setPassword(ev.target.value.trim())}
                 />
                 <TextField
                     margin="dense"
@@ -65,15 +85,30 @@ const Signup = () => {
                     label="Confirm password"
                     type="password"
                     id="confirm-password"
+                    value={confirm}
+                    onChange={ev => setConfirm(ev.target.value.trim())}
+
                 />
                 <Button
                     type="submit"
                     fullWidth
                     variant="contained"
+                    disabled={username === "" || password === "" || password !== confirm}
                     sx={{mt: 2, mb: 2}}
                 >
                     {t("Sign up")}
                 </Button>
+                {error &&
+                    <Box sx={{
+                        mb: 1,
+                        display: 'flex',
+                        flexGrow: 1,
+                        justifyContent: 'center',
+                    }}>
+                        <WarningAmberIcon color="error" sx={{mr: 1}}/>
+                        <Typography sx={{color: 'error.main'}}>{error}</Typography>
+                    </Box>
+                }
             </Box>
             {config.enableLogin &&
                 <Typography sx={{mb: 4}}>