✨feature: Add success message display for site creation

public/stylesheets/style.css

@@ -18,6 +18,8 @@
     --text-xs--line-height: calc(1 / 0.75);
     --text-base: 1rem;
     --text-base--line-height: calc(1.5 / 1);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
     --font-weight-normal: 400;
     --font-weight-bold: 700;
     --radius-sm: 0.25rem;
@@ -26,6 +28,7 @@
     --color-primary: oklch(0.57 0.203362 257.1706);
     --color-secondary: oklch(0.56 0.0176 257.23);
     --color-bodylinks: oklch(0.48 0.0789 211.58);
+    --color-success: oklch(64.01% 0.1751 146.7);
     --color-info: oklch(0.55 0.0922 211.57);
     --color-warning: oklch(84.42% 0.1722 84.93);
     --text-25px: clamp(1.125rem, 1.3021vw, 2.2rem);
@@ -737,6 +740,9 @@
       }
     }
   }
+  .mt-4 {
+    margin-top: calc(var(--spacing) * 4);
+  }
   .mt-8 {
     margin-top: calc(var(--spacing) * 8);
   }
@@ -816,6 +822,59 @@
       flex-grow: 1;
     }
   }
+  .alert {
+    display: grid;
+    align-items: center;
+    gap: calc(0.25rem * 4);
+    border-radius: var(--radius-box);
+    padding-inline: calc(0.25rem * 4);
+    padding-block: calc(0.25rem * 3);
+    color: var(--color-base-content);
+    background-color: var(--alert-color, var(--color-base-200));
+    justify-content: start;
+    justify-items: start;
+    grid-auto-flow: column;
+    grid-template-columns: auto;
+    text-align: start;
+    border: var(--border) solid var(--color-base-200);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    background-size: auto, calc(var(--noise) * 100%);
+    background-image: none, var(--fx-noise);
+    box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset, 0 1px #000, 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08));
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset, 0 1px color-mix( in oklab, color-mix(in oklab, #000 20%, var(--alert-color, var(--color-base-200))) calc(var(--depth) * 20%), #0000 ), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08));
+    }
+    &:has(:nth-child(2)) {
+      grid-template-columns: auto minmax(auto, 1fr);
+    }
+    &.alert-outline {
+      background-color: transparent;
+      color: var(--alert-color);
+      box-shadow: none;
+      background-image: none;
+    }
+    &.alert-dash {
+      background-color: transparent;
+      color: var(--alert-color);
+      border-style: dashed;
+      box-shadow: none;
+      background-image: none;
+    }
+    &.alert-soft {
+      color: var(--alert-color, var(--color-base-content));
+      background: var(--alert-color, var(--color-base-content));
+      @supports (color: color-mix(in lab, red, red)) {
+        background: color-mix( in oklab, var(--alert-color, var(--color-base-content)) 8%, var(--color-base-100) );
+      }
+      border-color: var(--alert-color, var(--color-base-content));
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix( in oklab, var(--alert-color, var(--color-base-content)) 10%, var(--color-base-100) );
+      }
+      box-shadow: none;
+      background-image: none;
+    }
+  }
   .fieldset {
     display: grid;
     gap: calc(0.25rem * 1.5);
@@ -922,6 +981,11 @@
     border-right-style: var(--tw-border-style);
     border-right-width: 0px;
   }
+  .alert-success {
+    border-color: var(--color-success);
+    color: var(--color-success-content);
+    --alert-color: var(--color-success);
+  }
   .bg-base-100 {
     background-color: var(--color-base-100);
   }
@@ -946,6 +1010,10 @@
   .text-center {
     text-align: center;
   }
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
   .text-25px {
     font-size: var(--text-25px);
   }

routes/index.js

@@ -7,7 +7,7 @@ const sitesModel = new SiteModel();
 router.get('/', async function(req, res, next) {
   const sites = await sitesModel.getAll();
   // console.log('Sites:', sites);
-  res.render('index', { title: 'Playwright Testing Dashboard', sites: sites });
+  res.render('index', { title: 'Playwright Testing Dashboard', sites: sites, msg: '' });
 });
 
 module.exports = router;

routes/sites.js

@@ -82,7 +82,9 @@ router.post('/add', async function (req, res, next) {
     if (!newSite) {
         res.status(400).send('Error creating site');
     } else {
-        res.status(201).json(newSite);
+        // res.status(201).json(newSite);
+        const sites = await siteModel.getAll();
+        res.render('index', { title: 'Playwright Testing Dashboard', sites: sites, msg: 'Site created successfully!' });
     }
 });
 

views/index.ejs

@@ -4,6 +4,11 @@
   <h2>Welcome to <%= title %></h2>
 
   <%- include('add-form'); -%>
+  <% if (msg) { %>
+    <div class="alert alert-success mt-4">
+      <div class="text-xl"><%= msg %></div>
+    </div>
+  <% } %>
 
   <h2 class="text-25px font-bold mt-8">Your Tests</h2>