User friendly error when set pasword link is expired

Ref HadleyLab/ucfwealth#42

Author: ir4y

contrib/fhir-emr

@@ -1,5 +1,5 @@
 import { t } from '@lingui/macro';
-import { Button } from 'antd';
+import { Button, notification } from 'antd';
 import { useParams } from 'react-router-dom';
 
 import { QuestionnaireResponseForm } from '@beda.software/emr/components';
@@ -9,13 +9,16 @@ import { AuthLayout } from 'src/components/AuthLayout';
 
 import { S } from './styles';
 import { authorize } from '../SignIn';
+import { OperationOutcome } from 'fhir/r4b';
+import { useNavigate } from 'react-router-dom';
 
 interface Props {
     originPathName?: string;
 }
 
 export function SetPassword(props: Props) {
     const { code } = useParams<{ code: string }>();
+    const navigate = useNavigate();
 
     return (
         <AuthLayout illustrationNumber={3}>
@@ -27,6 +30,10 @@ export function SetPassword(props: Props) {
                     onSuccess={() => {
                         authorize({ nextUrl: props.originPathName })
                     }}
+                    onFailure={(error: OperationOutcome) => {
+                        const message = error.issue.map(i => i.diagnostics).join(',');
+                        notification.error({ message });
+                    }}
                     saveButtonTitle={t`Save`}
                     initialQuestionnaireResponse={{
                         id: 'reset-password',
@@ -53,6 +60,9 @@ export function SetPassword(props: Props) {
                             >
                                 {t`Submit`}
                             </Button>
+                            <Button type="link" onClick={() => navigate('/forgot-password')}>
+                                {t`Request a new link`}
+                            </Button>
                         </S.Buttons>
                     )}
                 />