Adding a message when certificate failed (#521)

DevelopingSpace · Apr 5, 2023 · 105d507 · 105d507
1 parent 1dd9f1c
commit 105d507
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 3 deletions.
diff --git a/app/components/certificate/certificate-request.tsx b/app/components/certificate/certificate-request.tsx
@@ -1,14 +1,24 @@
-import { Flex, Heading, Text, Button } from '@chakra-ui/react';
+import {
+  Flex,
+  Heading,
+  Text,
+  Button,
+  Alert,
+  AlertIcon,
+  AlertTitle,
+  AlertDescription,
+} from '@chakra-ui/react';
 import { Form } from '@remix-run/react';
 import { useState } from 'react';
 
 import Description from './description';
 
 interface CertificateRequestViewProps {
   domain: string;
+  isFailed: boolean;
 }
 
-export default function CertificateRequestView({ domain }: CertificateRequestViewProps) {
+export default function CertificateRequestView({ domain, isFailed }: CertificateRequestViewProps) {
   const [isDisabled, setIsDisabled] = useState(false);
 
   return (
@@ -51,6 +61,15 @@ export default function CertificateRequestView({ domain }: CertificateRequestVie
           Request a Certificate
         </Button>
       </Form>
+      {isFailed && (
+        <Alert status="error">
+          <AlertIcon />
+          <AlertTitle mr={2}>Request Unsuccessful: </AlertTitle>
+          <AlertDescription>
+            Unfortunately, your previous request was not successful.
+          </AlertDescription>
+        </Alert>
+      )}
     </Flex>
   );
 }
diff --git a/app/routes/__index/certificate/index.tsx b/app/routes/__index/certificate/index.tsx
@@ -110,7 +110,10 @@ export default function CertificateIndexRoute() {
             validToFormatted={formatDate(certificate.validTo!)}
           />
         ) : (
-          <CertificateRequestView domain={user.baseDomain} />
+          <CertificateRequestView
+            domain={user.baseDomain}
+            isFailed={certificate?.status === 'failed'}
+          />
         )}
       </Flex>
     </Center>