UI work, config.js stuff

web/src/components/Login.js

@@ -1,17 +1,20 @@
 import * as React from 'react';
-import {Avatar, Checkbox, FormControlLabel, Grid, Link} from "@mui/material";
 import Typography from "@mui/material/Typography";
-import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
+import WarningAmberIcon from '@mui/icons-material/WarningAmber';
 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 {NavLink} from "react-router-dom";
+import AvatarBox from "./AvatarBox";
+import {useTranslation} from "react-i18next";
+import {useState} from "react";
 
 const Login = () => {
+    const { t } = useTranslation();
+    const [error, setError] = useState("");
     const handleSubmit = async (event) => {
         event.preventDefault();
         const data = new FormData(event.currentTarget);
@@ -19,31 +22,36 @@ const Login = () => {
             username: data.get('username'),
             password: data.get('password'),
         }
-        const token = await api.login("http://localhost:2586"/*window.location.origin*/, user);
-        console.log(`[Api] User auth for user ${user.username} successful, token is ${token}`);
-        session.store(user.username, token);
-        window.location.href = routes.app;
+        try {
+            const token = await api.login(config.baseUrl, user);
+            if (token) {
+                console.log(`[Login] User auth for user ${user.username} successful, token is ${token}`);
+                session.store(user.username, token);
+                window.location.href = routes.app;
+            } else {
+                console.log(`[Login] User auth for user ${user.username} failed, access denied`);
+                setError(t("Login failed: Invalid username or password"));
+            }
+        } catch (e) {
+            console.log(`[Login] User auth for user ${user.username} failed`, e);
+            if (e && e.message) {
+                setError(e.message);
+            } else {
+                setError(t("Unknown error. Check logs for details."))
+            }
+        }
     };
-
+    if (!config.enableLogin) {
+        return (
+            <AvatarBox>
+                <Typography sx={{ typography: 'h6' }}>{t("Login 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' }}>
-                Sign in to your ntfy account
+                {t("Sign in to your ntfy account")}
             </Typography>
             <Box component="form" onSubmit={handleSubmit} noValidate sx={{mt: 1, maxWidth: 400}}>
                 <TextField
@@ -51,7 +59,7 @@ const Login = () => {
                     required
                     fullWidth
                     id="username"
-                    label="Username"
+                    label={t("Username")}
                     name="username"
                     autoFocus
                 />
@@ -60,7 +68,7 @@ const Login = () => {
                     required
                     fullWidth
                     name="password"
-                    label="Password"
+                    label={t("Password")}
                     type="password"
                     id="password"
                     autoComplete="current-password"
@@ -71,14 +79,25 @@ const Login = () => {
                     variant="contained"
                     sx={{mt: 2, mb: 2}}
                 >
-                    Sign in
+                    {t("Sign in")}
                 </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 sx={{width: "100%"}}>
-                    <div style={{float: "left"}}><NavLink to={routes.resetPassword} variant="body1">Reset password</NavLink></div>
-                    <div style={{float: "right"}}><NavLink to={routes.signup} variant="body1">Sign up</NavLink></div>
+                    {config.enableResetPassword && <div style={{float: "left"}}><NavLink to={routes.resetPassword} variant="body1">{t("Reset password")}</NavLink></div>}
+                    {config.enableSignup && <div style={{float: "right"}}><NavLink to={routes.signup} variant="body1">{t("Sign up")}</NavLink></div>}
                 </Box>
             </Box>
-        </Box>
+        </AvatarBox>
     );
 }