NoroffFEU · Siggen97 · Nov 1, 2023 · Nov 2, 2023 · Nov 2, 2023 · Nov 2, 2023
diff --git a/.github/workflows/npm-publish-github-packages.yml b/.github/workflows/npm-publish-github-packages.yml
@@ -0,0 +1,36 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - run: npm ci
+      - run: npm test
+
+  publish-gpr:
+    needs: build
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://npm.pkg.github.com/
+      - run: npm ci
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
+
 node_modules/
 .DS_Store
 dist/
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,13 @@
+{
+    "cSpell.words": [
+        "Paralgin",
+        "primarycolor",
+        "primarytextcolor",
+        "secondtextcolor",
+        "thirdcolor"
+    ],
+    "cSpell.ignoreWords": [
+        "LOCALSTORAGE",
+        "SLXEED"
+    ]
+}
diff --git a/README.md b/README.md
@@ -1,2 +1,3 @@
 # css-frameworks-ca
-Replace this text with a description of your social media project.
+Here is the start of my own social media web. You will find updates and interesting things about my daily life.
+Please hit the follow button, and like my post if you see and read something good. 
diff --git a/feed/index.html b/feed/index.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="description" content="This is Sigrid Lydvo's blog feed. Here you can read all of her blog-posts that she writes. The blog posts can contain everything that affects her on a daily basis." />
+  <link rel="stylesheet" href="/dist/css/index.css"/>
+  <link rel="icon" href="favicon.ico" type="image/x-icon">
+  <script src="../js/variables.mjs" type="module"></script>
+  <script src="../js/fetchAllPosts.mjs" type="module"></script>
+  <script src="../js/sortPost.mjs" type="module"></script>
+  <script src="../js/createPost.mjs" type="module"></script>
+  <script src="../js/searchFunction.mjs" type="module"></script>
+  <script type="module">
+    import { checkLoginStatus, logoutUser } from "../js/login.mjs";
+
+    document.addEventListener("DOMContentLoaded", () => {
+      if (!checkLoginStatus()) {
+        window.location.href = "/index.html";
+      }
+
+      const signOutButton = document.getElementById("signOutButton");
+      signOutButton.classList.remove("d-none");
+      signOutButton.addEventListener("click", logoutUser);
+    });
+  </script>
+  <title>SLXEED Feed</title>
+</head>
+<body>
+  <header>
+    <nav class="navbar fixed-top navbar-expand-lg bg-white">
+      <div class="container-fluid">
+        <a class="navbar-brand fs-1 ms-3" href="../index.html">SLXEED</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNav">
+          <ul class="navbar-nav me-auto">
+            <li class="nav-item">
+              <a class="nav-link ms-3" href="../index.html">Home</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link ms-3" href="/profile/">Profile</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link ms-3 active" aria-current="page" href="/feed/">Feed</a>
+            </li>
+          </ul>
+          <button class="btn btn-outline-danger d-none" id="signOutButton">Sign Out</button>
+        </div>
+      </div>
+    </nav>
+  </header>
+  <main class="container mt-5">
+    <h1 class="visually-hidden mb-5">Feed</h1>
+
+    <div class="mb-4 search-post-bar">
+      <div class="d-flex justify-content-between mb-3 search-bar-form">
+        <form class="d-flex w-75" id="search-form">
+          <input type="search" class="form-control me-2" id="search-Input" placeholder="Search" aria-label="Search" />
+          <button class="btn btn-outline-primary" type="submit" id="searchButton">Search</button>
+        </form>
+        <div class="dropdown">
+          <button class="btn btn-success dropdown-toggle" type="button" id="createPostButton" data-bs-toggle="dropdown" aria-expanded="false">Create post</button>
+          <div class="dropdown-menu p-4" aria-labelledby="createPostButton">
+            <form id="newPostForm">
+              <div class="mb-3">
+                <label for="postTitle" class="form-label">Title</label>
+                <input type="text" class="form-control" id="postTitle" required>
+              </div>
+              <div class="mb-3">
+                <label for="postContent" class="form-label">Content</label>
+                <textarea class="form-control" id="postContent" rows="3" required></textarea>
+              </div>
+              <div class="mb-3">
+                <label for="postImage" class="form-label">Image URL (optional)</label>
+                <input type="url" class="form-control" id="postImage">
+              </div>
+              <button type="submit" class="btn btn-primary">Post</button>
+            </form>
+          </div>
+        </div>
+        <div class="btn-group">
+          <button class="btn btn-outline-primary" id="sortNewest">Newest</button>
+          <button class="btn btn-outline-primary" id="sortOldest">Oldest</button>
+        </div>
+      </div>
+    </div>
+
+    <div class="container mt-5 postContainer" id="postContainer">
+      <div class="row all-posts_card-container"></div>
+      <div class="loader-container" style="display:none;">Loading...</div>
+      <div class="d-flex justify-content-center my-3">
+        <button class="btn btn-secondary" id="loadMoreButton" style="display: none;">Load More</button>
+      </div>
+    </div>
+  </main>
+  <footer class="py-3 my-4 mt-5">
+    <hr>
+    <ul class="nav justify-content-center border-bottom pb-3 mb-3">
+      <li class="nav-item"><a href="../index.html" class="nav-link px-2 text-muted">Home</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">FAQs</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">About</a></li>
+    </ul>
+    <p class="text-center text-muted">SLXEED</p>
+    <p class="text-center text-muted">© 2024 Sigrid Lydvo</p>
+  </footer>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
diff --git a/images/profileDora.JPG b/images/profileDora.JPG
diff --git a/images/profileSL.jpg b/images/profileSL.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="dist/css/index.css">
+  <link rel="icon" href="favicon.ico" type="image/x-icon">
+  <script src="./js/login.mjs" type="module"></script>
+  <script src="./js/registerUser.mjs" type="module"></script>
+  <script src="./js/variables.mjs" type="module"></script>
+  <title>SLXEED HOME</title>
+</head>
+<body class="bg-light">
+  <header>
+    <nav class="navbar fixed-top navbar-expand-lg bg-white">
+      <div class="container-fluid me-2">
+        <a class="navbar-brand fs-1 ms-3" href="index.html">SLXEED</a>
+        <button
+          class="navbar-toggler"
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#navbarNav"
+          aria-controls="navbarNav"
+          aria-expanded="false"
+          aria-label="Toggle navigation"
+        >
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNav">
+          <ul class="navbar-nav me-auto">
+            <li class="nav-item">
+              <a class="nav-link ms-3 active" aria-current="page" href="index.html">Home</a>
+            </li>
+            <li class="nav-item d-none" id="profileLink">
+              <a class="nav-link ms-3" href="/profile/">Profile</a>
+            </li>
+            <li class="nav-item d-none" id="feedLink">
+              <a class="nav-link ms-3" href="/feed/">Feed</a>
+            </li>
+          </ul>
+          <form class="d-flex" id="loginForm">
+            <input type="email" class="form-control me-2" id="inputEmailLogin" placeholder="Email" required pattern="[\w\-.]+@(stud.)?noroff.no$" title="Only @(stud.)noroff.no domains are allowed to log in" />
+            <input type="password" class="form-control me-2" id="inputPasswordLogin" placeholder="Password" minlength="8" required title="Password must be at least 8 characters long" />
+            <button type="submit" class="btn btn-primary me-2 w-100">Log in</button>
+          </form>
+          <button class="btn btn-outline-danger d-none" id="signOutButton">Sign Out</button>
+        </div>
+      </div>
+    </nav>
+  </header>
+  <main class="container">
+    <div id="homePageContainer" class="homePageContainer">
+     <h3>Welcome to SLXEED</h3>
+      <p>Share your posts with friends and followers!</p>
+    </div>
+    <div id="registerContainer" class="mt-4 registerContainer">
+      <form id="registerForm">
+        <p>Don't have a user yet?</p>
+        <h2>Sign Up</h2>
+        <div class="mb-3">
+          <label for="inputName" class="form-label">Name</label>
+          <input type="text" class="form-control" id="inputName" required pattern="^[a-zA-Z0-9_]+$" title="Name must not contain punctuation symbols apart from underscore (_)">
+        </div>
+        <div class="mb-3">
+          <label for="inputEmailRegister" class="form-label">Email</label>
+          <input type="email" class="form-control" id="inputEmailRegister" required pattern="[\w\-.]+@(stud.)?noroff.no$" title="Only @(stud.)noroff.no domains are allowed to register">
+        </div>
+        <div class="mb-3">
+          <label for="inputPasswordRegister" class="form-label">Password</label>
+          <input type="password" class="form-control" id="inputPasswordRegister" minlength="8" required title="Password must be at least 8 characters long">
+        </div>
+        <div class="mb-3">
+          <label for="inputAvatar" class="form-label">Avatar URL (Optional)</label>
+          <input type="url" class="form-control" id="inputAvatar">
+        </div>
+        <button type="submit" class="btn btn-primary">Register</button>
+      </form>
+    </div>
+  </main>
+  <footer class="py-3 my-4 mt-5">
+    <hr>
+    <ul class="nav justify-content-center border-bottom pb-3 mb-3">
+      <li class="nav-item"><a href="index.html" class="nav-link px-2 text-muted">Home</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">FAQs</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">About</a></li>
+    </ul>
+    <p class="text-center text-muted">SLXEED</p>
+    <p class="text-center text-muted">© 2024 Sigrid Lydvo</p>
+  </footer>
+  <script type="module">
+    import { checkLoginStatus, logoutUser } from "./js/login.mjs";
+
+    document.addEventListener("DOMContentLoaded", () => {
+      const isLoggedIn = checkLoginStatus();
+
+      const loginForm = document.getElementById("loginForm");
+      const registerContainer = document.getElementById("registerContainer");
+      const signOutButton = document.getElementById("signOutButton");
+      const profileLink = document.getElementById("profileLink");
+      const feedLink = document.getElementById("feedLink");
+      const homePageContainer = document.getElementById("homePageContainer");
+
+      if (isLoggedIn) {
+        loginForm.classList.add("d-none");
+        registerContainer.classList.add("d-none");
+        signOutButton.classList.remove("d-none");
+        profileLink.classList.remove("d-none");
+        feedLink.classList.remove("d-none");
+        homePageContainer.classList.remove("d-none")
+      } else {
+        loginForm.classList.remove("d-none");
+        registerContainer.classList.remove("d-none");
+        signOutButton.classList.add("d-none");
+        profileLink.classList.add("d-none");
+        feedLink.classList.add("d-none");
+        homePageContainer.classList.add("d-none")
+      }
+
+      signOutButton.addEventListener("click", logoutUser);
+    });
+  </script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
diff --git a/js/createPost.mjs b/js/createPost.mjs
@@ -0,0 +1,54 @@
+import { apiBaseUrl, allPostsApi } from "./variables.mjs";
+import { displayAllPostsCards } from "./fetchAllPosts.mjs";
+
+// AFTER DOM CONTENT LOADED
+document.addEventListener("DOMContentLoaded", () => {
+  const createPostForm = document.querySelector("#newPostForm");
+  createPostForm.addEventListener("submit", createPost);
+});
+
+/**
+ * Handles the form submission to create a new post.
+ * @param {Event} event - The form submission event.
+ * @returns {Promise<void>} - A promise that resolves when the post creation is complete.
+ */
+const createPost = async (event) => {
+  event.preventDefault();
+
+  const userToken = localStorage.getItem("accessToken");
+
+  const title = event.target.querySelector("#postTitle").value;
+  const content = event.target.querySelector("#postContent").value;
+  const imageUrl = event.target.querySelector("#postImage").value;
+
+  if (!title || !content) {
+    alert("Please fill in all required fields");
+    return;
+  }
+
+  const newPost = {
+    title: title,
+    body: content,
+    media: imageUrl,
+  };
+
+  try {
+    const response = await fetch(`${apiBaseUrl}${allPostsApi}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${userToken}`,
+      },
+      body: JSON.stringify(newPost),
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+    event.target.reset();
+    displayAllPostsCards(true); // Pass a parameter to indicate a refresh
+  } catch (error) {
+    console.error("Error creating post:", error);
+    alert("An error occurred while creating the post. Please try again.");
+  }
+};
diff --git a/js/dateFormat.mjs b/js/dateFormat.mjs
@@ -0,0 +1,39 @@
+/**
+ * Formats a timestamp into a human-readable date string.
+ * @param {string} timestamp - The timestamp to be formatted.
+ * @returns {string} - The formatted date string.
+ * @example
+ * const timestamp = "2023-04-15T12:30:00Z";
+ * const formattedDate = formatDateString(timestamp);
+ */
+export const formatDateString = (timestamp) => {
+    // MONTHS IN AN ARRAY
+    const months = [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December",
+    ];
+
+    // CREATE A NEW DATE OBJECT FROM THE TIMESTAMP
+    const date = new Date(timestamp);
+
+    // GET DATE COMPONENTS
+    const day = String(date.getDate()).padStart(2, "0");
+    const monthIndex = date.getMonth();
+    const month = months[monthIndex];
+    const year = date.getFullYear();
+
+    // ASSEMBLE THE STRING
+    const formattedDate = `${month} ${day}, ${year}`;
+
+    return formattedDate;
+  };