Merge pull request #340 from MetroStar/comet-uswds-3.0.0

Update Comet USWDS to v3
MetroStar · Aug 22, 2024 · 259b8dd · 259b8dd
2 parents 8b74afd + 7dee3d2
commit 259b8dd
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 38 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
   "dependencies": {
     "@metrostar/comet-data-viz": "1.1.5",
     "@metrostar/comet-extras": "1.4.0",
-    "@metrostar/comet-uswds": "2.4.1",
+    "@metrostar/comet-uswds": "3.0.0",
     "@tanstack/react-query": "5.51.24",
     "@tanstack/react-table": "8.20.1",
     "@uswds/uswds": "3.8.2",

diff --git a/src/hooks/use-auth.ts b/src/hooks/use-auth.ts
@@ -51,13 +51,17 @@ const useAuth = () => {
     if (auth.error) {
       setError(auth.error.message);
       setIsSignedIn(false);
+
+      // eslint-disable-next-line no-console
+      console.error('Error:', auth.error);
     }
   }, [auth.error, setIsSignedIn]);
 
   const signIn = (isSso: boolean): void => {
     if (isSso) {
       auth.signinRedirect({ redirect_uri: getSignInRedirectUrl() });
     } else {
+      auth.error = undefined;
       setIsSignedIn(true);
       setCurrentUserData(userData);
     }

diff --git a/src/pages/sign-in/sign-in.tsx b/src/pages/sign-in/sign-in.tsx
@@ -2,10 +2,7 @@ import {
   Alert,
   Button,
   ButtonGroup,
-  ErrorMessages,
   Form,
-  FormGroup,
-  Label,
   TextInput,
 } from '@metrostar/comet-uswds';
 import { FormInput } from '@src/types/form';
@@ -54,40 +51,48 @@ export const SignIn = (): React.ReactElement => {
           <h1>Sign In</h1>
           {error && (
             <Alert id="loginAlert" type="error" heading="Error">
-              Incorrect email or password was entered.
+              There was an error signing in. Please try again.
             </Alert>
           )}
           <Form id="login-form" onSubmit={handleSubmit(onSubmit)}>
-            <FormGroup>
-              <Label htmlFor="username">Username</Label>
-              <Controller
-                name="username"
-                control={control}
-                rules={REQUIRED_FORM_FIELDS_RULES}
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                render={({ field: { ref: _, ...field } }) => (
-                  <TextInput {...field} id="username" autoFocus />
-                )}
-              />
-              {errors.username?.message && (
-                <ErrorMessages errors={[errors.username.message]} />
+            <Controller
+              name="username"
+              control={control}
+              rules={REQUIRED_FORM_FIELDS_RULES}
+              // eslint-disable-next-line @typescript-eslint/no-unused-vars
+              render={({ field: { ref: _, ...field } }) => (
+                <TextInput
+                  {...field}
+                  id="username"
+                  label="Username"
+                  errors={
+                    errors.username?.message
+                      ? errors.username.message
+                      : undefined
+                  }
+                  autoFocus
+                />
               )}
-            </FormGroup>
-            <FormGroup>
-              <Label htmlFor="password">Password</Label>
-              <Controller
-                name="password"
-                control={control}
-                rules={PASSWORD_RULES}
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                render={({ field: { ref: _, ...field } }) => (
-                  <TextInput {...field} id="password" type="password" />
-                )}
-              />
-              {errors.password?.message && (
-                <ErrorMessages errors={[errors.password.message]} />
+            />
+            <Controller
+              name="password"
+              control={control}
+              rules={PASSWORD_RULES}
+              // eslint-disable-next-line @typescript-eslint/no-unused-vars
+              render={({ field: { ref: _, ...field } }) => (
+                <TextInput
+                  {...field}
+                  id="password"
+                  type="password"
+                  label="Password"
+                  errors={
+                    errors.password?.message
+                      ? errors.password.message
+                      : undefined
+                  }
+                />
               )}
-            </FormGroup>
+            />
             <ButtonGroup>
               <Button
                 id="submit"