From 0e48639736a3e9fa54b0ed090fa781c445d4a45f Mon Sep 17 00:00:00 2001
From: jue-henry <juehenry@yahoo.com>
Date: Wed, 15 Jan 2025 10:16:34 -0800
Subject: [PATCH 1/2] Customize error message for expired password

---
 src/features/auth/LoginForm.jsx | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/features/auth/LoginForm.jsx b/src/features/auth/LoginForm.jsx
index 98c966c..f4d886d 100644
--- a/src/features/auth/LoginForm.jsx
+++ b/src/features/auth/LoginForm.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { styled } from '../../theme/stitches.config.js';
+import { Auth } from 'aws-amplify';
 import { Authenticator, useAuthenticator } from '@aws-amplify/ui-react';
 import { indigo } from '@radix-ui/colors';
 import Button from '../../components/Button.jsx';
@@ -163,6 +164,20 @@ const LoginForm = () => {
   const { route, toSignIn } = useAuthenticator((context) => [context.route]);
   const userName = useSelector(selectUserUsername);
 
+  const services = {
+    async handleSignIn(input) {
+      try {
+        const { username, password } = input;
+        return await Auth.signIn(username, password);
+      } catch (error) {
+        console.log(error.code);
+        throw new Error(
+          'Temporary password has expired and must be reset by an Project Manager. For more information see: https://docs.animl.camera/fundamentals/user-management',
+        );
+      }
+    },
+  };
+
   const helperText = {
     confirmResetPassword: 'Reset your password',
     resetPassword: 'Enter your email address to receive a password reset code',
@@ -173,7 +188,12 @@ const LoginForm = () => {
     <LoginScreen>
       <Header css={{ '@bp3': { fontSize: '64px' } }}>Welcome back</Header>
       <Subheader>{helperText[route] || userName || ''}</Subheader>
-      <StyledAuthenticator loginMechanisms={['email']} hideDefault={true} hideSignUp={true} />
+      <StyledAuthenticator
+        services={services}
+        loginMechanisms={['email']}
+        hideDefault={true}
+        hideSignUp={true}
+      />
       {route === 'resetPassword' && (
         <StyledLoginCallout>
           <Callout type="info" title="Note about temporary passwords">

From f76693383235bf019a96a7c54d229a62788ca2d2 Mon Sep 17 00:00:00 2001
From: jue-henry <juehenry@yahoo.com>
Date: Wed, 15 Jan 2025 16:10:27 -0800
Subject: [PATCH 2/2] fixing style

---
 src/features/auth/LoginForm.jsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/features/auth/LoginForm.jsx b/src/features/auth/LoginForm.jsx
index f4d886d..7063a7b 100644
--- a/src/features/auth/LoginForm.jsx
+++ b/src/features/auth/LoginForm.jsx
@@ -131,7 +131,12 @@ const StyledAuthenticator = styled(Authenticator, {
   '.amplify-alert--error': {
     backgroundColor: '$errorBg',
     color: '$errorText',
+    div: {
+      maxWidth: 300,
+    },
     button: {
+      border: 'none',
+      padding: '0',
       backgroundColor: '$errorBg',
       color: '$errorText',
     },