ILEX-99 Revisit UI elements for term addition

src/App.jsx

@@ -58,6 +58,7 @@ function MainContent() {
 
 	const { setUserData, loading } = useContext(GlobalDataContext);
 	const navigate = useNavigate();
+	const location = useLocation();
 	// eslint-disable-next-line no-unused-vars
 	const [existingCookies, setCookie, removeCookie] = useCookies(['session']);
 
@@ -75,7 +76,10 @@ function MainContent() {
 						groupname: userData['groupname'],
 						settings: userData
 					});
-					navigate("/");
+					// Only redirect to home if user is currently on login/register pages
+					if (location.pathname === '/login' || location.pathname === '/register') {
+						navigate("/");
+					}
 				} catch (error) {
 					console.error("Error fetching user settings:", error);
 					localStorage.removeItem(API_CONFIG.SESSION_DATA.SETTINGS);
@@ -89,7 +93,7 @@ function MainContent() {
 			}
 		})();
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
+	}, [location.pathname]);
 
 	if (loading) {
 		return (

src/components/Auth/ForgotPassword.jsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Box, Button, FormControl, Grid, Paper, Typography } from "@mui/material";
 import { ArrowBack } from "@mui/icons-material";
-import FormField from "./UI/Formfield";
+import CustomFormField from "../common/CustomFormField";
 import { Link } from "react-router-dom";
 import { forgotPassword } from "../../api/endpoints/apiService";
 
@@ -11,7 +11,7 @@ const ForgotPassword = () => {
 
   const handleForgotPassword = async () => {
     try {
-      await forgotPassword({username: username});
+      await forgotPassword({ username: username });
     } catch (error) {
       console.error("Error:", error);
       setError(error.message);
@@ -29,13 +29,15 @@ const ForgotPassword = () => {
           <Typography variant="h4">Forgot password</Typography>
           <form className="authForm">
             <Grid container spacing={2.5}>
-              <FormField
-                label="Username"
-                placeholder="Enter your username"
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
-                errorMessage={error}
-              />
+              <Grid item xs={12}>
+                <CustomFormField
+                  label="Username"
+                  placeholder="Enter your username"
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  errorMessage={error}
+                />
+              </Grid>
               <Grid item xs={12}>
                 <FormControl>
                   <Button variant="contained" color="primary" onClick={handleForgotPassword}>

src/components/Auth/Login.jsx

@@ -11,7 +11,7 @@ import {
   CircularProgress
 } from "@mui/material";
 import * as yup from "yup";
-import FormField from "./UI/Formfield";
+import CustomFormField from "../common/CustomFormField";
 import { useCookies } from 'react-cookie';
 import { API_CONFIG } from "../../config";
 import { requestUserSettings } from "./utils";
@@ -232,7 +232,7 @@ const Login = () => {
 
   return (
     <Box className="authArea">
-      {isLoading ? <Box sx={{ height: 1, width: 1, display: "flex", alignItems: "center", justifyContent: "center"}}>
+      {isLoading ? <Box sx={{ height: 1, width: 1, display: "flex", alignItems: "center", justifyContent: "center" }}>
         <CircularProgress />
       </Box> : (
         <Paper className="authPaper" sx={{ maxWidth: 528, flexGrow: 1 }}>
@@ -245,24 +245,28 @@ const Login = () => {
           {errors.auth && <Alert severity="error" sx={{ mt: 2 }}>{errors.auth}</Alert>}
           <form className="authForm">
             <Grid container spacing={2.5}>
-              <FormField
-                name="username"
-                label="Username"
-                helperText="Required"
-                placeholder="Enter your username"
-                value={formData.username}
-                onChange={handleInputChange}
-                errorMessage={errors.username}
-              />
-              <PasswordField
-                name="password"
-                label="Password"
-                placeholder="Enter your password"
-                helperText="Required"
-                value={formData.password}
-                onChange={handleInputChange}
-                errorMessage={errors.password}
-              />
+              <Grid item xs={12}>
+                <CustomFormField
+                  name="username"
+                  label="Username"
+                  isRequired
+                  placeholder="Enter your username"
+                  value={formData.username}
+                  onChange={handleInputChange}
+                  errorMessage={errors.username}
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <PasswordField
+                  name="password"
+                  label="Password"
+                  placeholder="Enter your password"
+                  value={formData.password}
+                  isRequired
+                  onChange={handleInputChange}
+                  errorMessage={errors.password}
+                />
+              </Grid>
               <Grid item xs={12}>
                 <Box
                   className="authRemember"
@@ -295,7 +299,7 @@ const Login = () => {
                 </FormControl>
               </Grid>
               <Grid item xs={12}>
-                <Typography variant="body2" style={{ textAlign: "center", paddingBottom: '1rem'}}>
+                <Typography variant="body2" style={{ textAlign: "center", paddingBottom: '1rem' }}>
                   or
                 </Typography>
               </Grid>

src/components/Auth/Register.jsx

@@ -11,7 +11,7 @@ import {
   Snackbar,
 } from "@mui/material";
 import * as yup from "yup";
-import FormField from "./UI/Formfield";
+import CustomFormField from "../common/CustomFormField";
 import { API_CONFIG } from "../../config";
 import { useCookies } from 'react-cookie';
 import PasswordField from "./UI/PasswordField";
@@ -120,9 +120,9 @@ const Register = () => {
         }
       });
 
-      setIsLoading(false)
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isLoading]);
+    setIsLoading(false)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isLoading]);
 
   const handleRedirectInPopup = (url) => {
     setErrors({})
@@ -207,46 +207,42 @@ const Register = () => {
 
           <form className="authForm">
             <Grid container spacing={2.5}>
-              <FormField
-                label="Username"
-                placeholder="Enter your username"
-                value={formData.username}
-                onChange={(e) =>
-                  setFormData({ ...formData, username: e.target.value })
-                }
-                errorMessage={errors.username}
-                helperText="Required"
-              />
-              <FormField
-                label="Email"
-                placeholder="Enter your email"
-                value={formData.email}
-                onChange={(e) =>
-                  setFormData({ ...formData, email: e.target.value })
-                }
-                errorMessage={errors.email}
-                helperText="Required"
-              />
-              <PasswordField
-                label="Password"
-                placeholder="Enter your password"
-                value={formData.password}
-                onChange={(e) =>
-                  setFormData({ ...formData, password: e.target.value })
-                }
-                errorMessage={errors.password}
-                helperText="Required"
-              />
-              <PasswordField
-                label="Confirm Password"
-                placeholder="Re-enter your password"
-                value={formData.confirmPassword}
-                onChange={(e) =>
-                  setFormData({ ...formData, confirmPassword: e.target.value })
-                }
-                errorMessage={errors.confirmPassword}
-                helperText="Passwords must match"
-              />
+              <Grid item xs={12}>
+                <CustomFormField
+                  label="Username"
+                  placeholder="Enter your username"
+                  value={formData.username}
+                  onChange={(e) =>
+                    setFormData({ ...formData, username: e.target.value })
+                  }
+                  errorMessage={errors.username}
+                  isRequired
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <CustomFormField
+                  label="Email"
+                  placeholder="Enter your email"
+                  value={formData.email}
+                  onChange={(e) =>
+                    setFormData({ ...formData, email: e.target.value })
+                  }
+                  errorMessage={errors.email}
+                  isRequired
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <PasswordField
+                  label="Password"
+                  placeholder="Enter your password"
+                  value={formData.password}
+                  onChange={(e) =>
+                    setFormData({ ...formData, password: e.target.value })
+                  }
+                  errorMessage={errors.password}
+                  isRequired
+                />
+              </Grid>
               <Grid item xs={12}>
                 <FormControl>
                   <Button

src/components/Auth/ResetPassword.jsx

@@ -34,18 +34,22 @@ const ResetPassword = () => {
           <Typography variant="h4">Reset your password</Typography>
           <form className="authForm">
             <Grid container spacing={2.5}>
-              <PasswordField
-                label="New password"
-                placeholder="Enter your password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-              />
-              <PasswordField
-                label="Confirm new password"
-                placeholder="Confirm your new password"
-                value={confirmPassword}
-                onChange={(e) => setConfirmPassword(e.target.value)}
-              />
+              <Grid item xs={12}>
+                <PasswordField
+                  label="New password"
+                  placeholder="Enter your password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <PasswordField
+                  label="Confirm new password"
+                  placeholder="Confirm your new password"
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                />
+              </Grid>
               <Grid item xs={12}>
                 <FormControl>
                   <Button variant="contained" color="primary" onClick={resetPassword}>

src/components/Auth/UI/PasswordField.jsx

@@ -1,72 +1,61 @@
 import { useState } from "react";
 import PropTypes from "prop-types";
 import {
-  FormControl,
-  Box,
-  FormHelperText,
-  OutlinedInput,
   InputAdornment,
-  IconButton,
-  Grid,
-  Typography
+  IconButton
 } from "@mui/material";
 import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
 import VisibilityOffOutlinedIcon from "@mui/icons-material/VisibilityOffOutlined";
 import ErrorOutlineOutlinedIcon from '@mui/icons-material/ErrorOutlineOutlined';
+import CustomFormField from "../../common/CustomFormField";
 
-const PasswordField = ({ xs = 12, label, placeholder, helperText, name, value, onChange, errorMessage }) => {
+const PasswordField = ({ label, placeholder, isRequired, helperText, name, value, onChange, errorMessage }) => {
   const [showPassword, setShowPassword] = useState(false);
 
   const handleClickShowPassword = () => setShowPassword((show) => !show);
 
   const handleMouseDownPassword = (event) => event.preventDefault();
 
   return (
-    <Grid item xs={xs}>
-      <FormControl fullWidth>
-        <Box display="flex" justifyContent="space-between">
-          <label>{label}</label>
-          <FormHelperText>{helperText}</FormHelperText>
-        </Box>
-        <OutlinedInput
-          type={showPassword ? "text" : "password"}
-          placeholder={placeholder}
-          name={name} // Pass the name prop
-          value={value}
-          onChange={onChange}
-          error={errorMessage}
-          autoComplete="off"
-          endAdornment={
-          <InputAdornment position="end">
-            <IconButton
+    <CustomFormField
+      label={label}
+      type={showPassword ? "text" : "password"}
+      placeholder={placeholder}
+      name={name} // Pass the name prop
+      value={value}
+      onChange={onChange}
+      error={errorMessage}
+      autoComplete="off"
+      helperText={helperText}
+      isRequired={isRequired}
+      endAdornment={
+        <InputAdornment position="end">
+          <IconButton
             aria-label="toggle password visibility"
             onClick={handleClickShowPassword}
             onMouseDown={handleMouseDownPassword}
-            sx={{ padding: 0 }}
-            >
+            sx={{ padding: 0, background: "transparent", "&:hover": { background: "transparent" } }}
+          >
             {errorMessage ? <ErrorOutlineOutlinedIcon /> : <>
               {showPassword ? (
                 <VisibilityOffOutlinedIcon />
-                ) : (
+              ) : (
                 <VisibilityOutlinedIcon />
               )}
-              </>
+            </>
             }
-            </IconButton>
-          </InputAdornment>
-          }
-        />
-        {errorMessage && <Typography variant="body2" sx={{ color: "#F04438", marginTop: "0.375rem" }}>{`${errorMessage.charAt(0).toUpperCase() + errorMessage.slice(1)}`}</Typography>}
-      </FormControl>
-    </Grid>
+          </IconButton>
+        </InputAdornment>
+      }
+    />
   );
 };
 
 PasswordField.propTypes = {
-  xs: PropTypes.number,
   label: PropTypes.string.isRequired,
   placeholder: PropTypes.string,
   helperText: PropTypes.string,
+  isRequired: PropTypes.bool,
   name: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,