refactoring

models/User.js

@@ -6,7 +6,48 @@ const UserSchema = new mongoose.Schema({
   email: String,
   password: String,
   affirmationDuration: Number,
-  affirmations: [String],
+  affirmations: {
+    addressingInsecurities: {
+      topOfHead: String,
+      eyebrow: String,
+      sideOfEye: String,
+      underEye: String,
+      underNose: String,
+      chin: String,
+      collarbone: String,
+      underArm: String,
+    },
+    shiftingToDesires: {
+      topOfHead: String,
+      eyebrow: String,
+      sideOfEye: String,
+      underEye: String,
+      underNose: String,
+      chin: String,
+      collarbone: String,
+      underArm: String,
+    },
+    givingPermission: {
+      topOfHead: String,
+      eyebrow: String,
+      sideOfEye: String,
+      underEye: String,
+      underNose: String,
+      chin: String,
+      collarbone: String,
+      underArm: String,
+    },
+    affirmationsAndGratitude: {
+      topOfHead: String,
+      eyebrow: String,
+      sideOfEye: String,
+      underEye: String,
+      underNose: String,
+      chin: String,
+      collarbone: String,
+      underArm: String,
+    },
+  },
 });
 
 UserSchema.pre("save", function (next) {

public/css/base.css

@@ -0,0 +1,24 @@
+body,
+hr,
+.header,
+.header p,
+.header h1 {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: "Cinzel", serif;
+  background-color: #fbf2c4;
+  color: #382400;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: 100vh;
+}
+
+hr {
+  border: none;
+  border-top: 3px solid var(--green);
+  border-radius: 9px;
+}

public/css/header.css

@@ -0,0 +1,13 @@
+.header,
+.header p {
+  text-align: center;
+  padding: 20px;
+  color: var(--black);
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+
+.header h1 {
+  font-size: 2rem;
+  color: var(--green);
+}

public/css/main-container.css

@@ -0,0 +1,5 @@
+.main-container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}

public/css/styles.css

@@ -410,6 +410,63 @@ button:hover {
 #duration {
   margin-bottom: 20px;
 }
+
+/* Make the affirmation form a flex container */
+.affirmation-form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+/* For larger screens, use row layout */
+@media (min-width: 768px) {
+  .affirmation-form {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
+/* Style each section as a card */
+.affirmation-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  width: 100%;
+}
+
+@media (min-width: 768px) {
+  .affirmation-form {
+    flex-direction: row;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+
+  .affirmation-section {
+    width: calc(25% - 1rem); /* Four cards side by side */
+  }
+}
+
+/* For mobile */
+@media screen and (max-width: 768px) {
+  .affirmation-section {
+    width: 100%; /* Single column layout */
+  }
+}
+
+.main-container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.footer {
+  margin-top: auto;
+}
 @keyframes breathe {
   0%,
   100% {

public/css/variables.css

@@ -0,0 +1,7 @@
+:root {
+  --dark-blue: #29579d;
+  --light-blue: #8aaccf;
+  --green: #74a892;
+  --white: #fff;
+  --black: #000;
+}

routes/affirmationRoutes.js

@@ -3,15 +3,40 @@ const router = express.Router();
 const User = require("../models/User");
 
 router.get("/affirmation-setup", async (req, res) => {
-  // If req.user doesn't exist or is incomplete, fetch it from MongoDB
   let user = req.user;
   if (!user || !user.affirmations) {
-    const userId = req.session.passport.user; // Assuming you store user ID in session
+    const userId = req.session.passport.user;
     user = await User.findById(userId);
   }
 
-  // Render the EJS template and pass the user object
   res.render("affirmation-setup", { user });
 });
 
+router.get("/enter-affirmations", (req, res) => {
+  res.render("enter-affirmations");
+});
+
+router.post("/submit-affirmations", async (req, res) => {
+  const userId = req.session.passport.user; // Make sure the user is authenticated
+
+  try {
+    const user = await User.findById(userId);
+
+    if (user) {
+      user.affirmations = {
+        addressingInsecurities: req.body.addressingInsecurities,
+        shiftingToDesires: req.body.shiftingToDesires,
+        givingPermission: req.body.givingPermission,
+        affirmationsAndGratitude: req.body.affirmationsAndGratitude,
+      };
+
+      await user.save();
+      res.redirect("/affirmations"); // Redirect to a page to display affirmations
+    }
+  } catch (err) {
+    console.log("Error:", err);
+    res.status(500).send("Internal Server Error");
+  }
+});
+
 module.exports = router;

views/affirmation-setup.pug

@@ -11,17 +11,6 @@ block content
         each affirmation in user.affirmations
           li= affirmation
     else
-      p.prompt You have no affirmations. Would you like to #[a(href="/affirmation-setup") enter some]?
+      p.prompt You have no affirmations. Would you like to #[a(href="/enter-affirmations") enter some]?
 
-    // Your existing form for updating affirmations
-    form(action="/update-affirmations" method="POST" class="affirmation-form")
-      label(for="duration" class="form-label") Time between each affirmation:
-      select(id="duration" name="duration")
-        option(value="5") 5 seconds
-        option(value="10") 10 seconds
-        option(value="30") 30 seconds
-        option(value="60") 1 minute
-      br
-      br
-
-      input(type="submit" value="Update" class="submit-button")
+

views/enter-affirmations.pug

@@ -0,0 +1,33 @@
+extends layout
+
+block content
+  div.main-container
+    div.center-container
+      h1 Enter Your Affirmations
+      form(action="/submit-affirmations" method="POST" class="affirmation-form")
+
+        div.affirmation-section
+          h3 Addressing Insecurities
+          each point in ['topOfHead', 'eyebrow', 'sideOfEye', 'underEye', 'underNose', 'chin', 'collarbone', 'underArm']
+            label(for=`addressingInsecurities[${point}]`) #{point}
+            textarea(name=`addressingInsecurities[${point}]`, rows="2", cols="50")
+
+        div.affirmation-section
+          h3 Shifting to Desires
+          each point in ['topOfHead', 'eyebrow', 'sideOfEye', 'underEye', 'underNose', 'chin', 'collarbone', 'underArm']
+            label(for=`shiftingToDesires[${point}]`) #{point}
+            textarea(name=`shiftingToDesires[${point}]`, rows="2", cols="50")
+
+        div.affirmation-section
+          h3 Giving Permission
+          each point in ['topOfHead', 'eyebrow', 'sideOfEye', 'underEye', 'underNose', 'chin', 'collarbone', 'underArm']
+            label(for=`givingPermission[${point}]`) #{point}
+            textarea(name=`givingPermission[${point}]`, rows="2", cols="50")
+
+        div.affirmation-section
+          h3 Affirmations and Gratitude
+          each point in ['topOfHead', 'eyebrow', 'sideOfEye', 'underEye', 'underNose', 'chin', 'collarbone', 'underArm']
+            label(for=`affirmationsAndGratitude[${point}]`) #{point}
+            textarea(name=`affirmationsAndGratitude[${point}]`, rows="2", cols="50")
+
+        input(type="submit" value="Submit" class="submit-button")