commit e580f42b540239d9beedb92abf2c6b20ae32499a
author Michelle Sepkap Sime <simemichelle01@gmail.com> Mon Oct 31 23:27:04 2022 -0400
committer Michelle Sepkap Sime <simemichelle01@gmail.com> Wed Nov 02 15:47:40 2022 -0400
tree 48329e62c4db2268a84488cc2719fdabb9df3b53
parent bfed173fb0e9145ecd7d43eb2b609bb2880e46bd

Integrate new server authentication to client

Changes:
- Use server authentication REST API
- Log in automatically after registration
- Store token in localStorage
- Give feedback to user if registration or login fails

GitLab: #75
Change-Id: Ib90e5b911621567c6825af5e275920d703cdfe88

client/src/components/Input.tsx

diff --git a/client/src/components/Input.tsx b/client/src/components/Input.tsx
index ae640cf..063b350 100644
--- a/client/src/components/Input.tsx
+++ b/client/src/components/Input.tsx
@@ -53,7 +53,13 @@
   tooltipTitle: string;
 };
 
-export const UsernameInput = ({ infoButtonProps, onChange: _onChange, tooltipTitle, ...props }: InputProps) => {
+export const UsernameInput = ({
+  infoButtonProps,
+  onChange: _onChange,
+  success,
+  tooltipTitle,
+  ...props
+}: InputProps) => {
   const [isSelected, setIsSelected] = useState(false);
   const [input, setInput] = useState(props.defaultValue);
   const [startAdornment, setStartAdornment] = useState<ReactElement | undefined>();
@@ -73,13 +79,13 @@
     let visibility = 'visible';
     if (props.error) {
       Icon = StyledRoundSaltireIconError;
-    } else if (props.success) {
+    } else if (success) {
       Icon = StyledCheckedIconSuccess;
     } else if (!isSelected && !input) {
       visibility = 'hidden'; // keep icon's space so text does not move
     }
     setStartAdornment(<Icon sx={{ visibility }} />);
-  }, [props.error, props.success, isSelected, input]);
+  }, [props.error, success, isSelected, input]);
 
   return (
     <>
@@ -88,7 +94,7 @@
       </RulesDialog>
       <TextField
         {...props}
-        color={inputColor(props.error, props.success)}
+        color={inputColor(props.error, success)}
         label={'Choose an identifier'}
         variant="standard"
         InputLabelProps={{ shrink: !!(isSelected || input) }}
@@ -106,7 +112,13 @@
   );
 };
 
-export const PasswordInput = ({ infoButtonProps, onChange: _onChange, tooltipTitle, ...props }: InputProps) => {
+export const PasswordInput = ({
+  infoButtonProps,
+  onChange: _onChange,
+  success,
+  tooltipTitle,
+  ...props
+}: InputProps) => {
   const [showPassword, setShowPassword] = useState(false);
   const [isSelected, setIsSelected] = useState(false);
   const [input, setInput] = useState(props.defaultValue);
@@ -131,13 +143,13 @@
     let visibility = 'visible';
     if (props.error) {
       Icon = StyledRoundSaltireIconError;
-    } else if (props.success) {
+    } else if (success) {
       Icon = StyledCheckedIconSuccess;
     } else if (!isSelected && !input) {
       visibility = 'hidden'; // keep icon's space so text does not move
     }
     setStartAdornment(<Icon sx={{ visibility }} />);
-  }, [props.error, props.success, isSelected, input]);
+  }, [props.error, success, isSelected, input]);
 
   return (
     <>
@@ -146,7 +158,7 @@
       </RulesDialog>
       <TextField
         {...props}
-        color={inputColor(props.error, props.success)}
+        color={inputColor(props.error, success)}
         label="Password"
         type={showPassword ? 'text' : 'password'}
         variant="standard"