show mailhog email from the leaderboard (#9)

localstack-samples · Oct 28, 2024 · f19907f · f19907f
1 parent 77a1f16
commit f19907f
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/configurations/statemachine.json b/configurations/statemachine.json
@@ -28,7 +28,7 @@
               },
               "Body": {
                 "Html": {
-                  "Data.$": "States.Format('<html><body><h2>Hello {}</h2><p>Congratulations on completing the quiz!</p><p><strong>Your Score:</strong> {}/{}.</p><p>Best regards,<br/>Quiz Team</p></body></html>', $.Username, $.Score, $.TotalQuestions)",
+                  "Data.$": "States.Format('<html><body><h2>Hello {}</h2><p>Congratulations on completing the quiz!</p><p><strong>Your Score:</strong> {}.</p><p>Best regards,<br/>LocalStack Team</p></body></html>', $.Username, $.Score)",
                   "Charset": "UTF-8"
                 }
               }

diff --git a/frontend/src/components/LeaderboardPage.js b/frontend/src/components/LeaderboardPage.js
@@ -11,6 +11,7 @@ import {
   CircularProgress,
   Alert,
   Paper,
+  Stack,
 } from '@mui/material';
 
 function LeaderboardPage() {
@@ -44,6 +45,20 @@ function LeaderboardPage() {
     navigate('/');
   };
 
+  const handleViewEmailDemo = () => {
+    let targetURL = '';
+    const hostname = window.location.hostname;
+
+    if (hostname.includes('localhost')) {
+      targetURL = `http://localhost:4566/_extension/mailhog/`;
+    } else {
+      const baseOrigin = window.location.origin;
+      targetURL = `${baseOrigin}/_extension/mailhog/`;
+    }
+
+    window.open(targetURL, '_blank');
+  };
+
   if (loading) {
     return (
       <Container maxWidth="sm" sx={{ textAlign: 'center', marginTop: 8 }}>
@@ -90,9 +105,14 @@ function LeaderboardPage() {
         )}
 
         <Box sx={{ marginTop: 4 }}>
-          <Button variant="contained" color="primary" onClick={handleGoHome}>
-            Go to Home
-          </Button>
+          <Stack spacing={2} direction="row" justifyContent="center">
+            <Button variant="contained" color="primary" onClick={handleGoHome}>
+              Go to Home
+            </Button>
+            <Button variant="contained" color="secondary" onClick={handleViewEmailDemo}>
+              View Email (Demo)
+            </Button>
+          </Stack>
         </Box>
       </Box>
     </Container>