Js2 resit

.gitignore

@@ -1,3 +1,3 @@
 node_modules/
 .DS_Store
-dist/
+dist/

README.md

@@ -1,2 +1,115 @@
-# css-frameworks-ca
-Replace this text with a description of your social media project.
+## js2 social media application
+link to trello: https://trello.com/invite/b/HgMSDygC/ATTI59165adf424964b1c8ef6ef67039647001A570D6/javascrip2
+
+this is my "social media application" you can register a user  (with a valid @noroff(stud.noroff.no). the registerd ouser can login, make posts, edit posts and delete posts. and view others posts.
+navigation is clear on the homepage(login) wher there is a  button for registration and after registration, there is a button for login, when u have gotten the confiramtion that your logged inn, use the nav bar to get to feed or profile.
+
+
+---
+### made with:
+<img src="https://raw.githubusercontent.com/tandpfun/skill-icons/main/icons/HTML.svg" width="50" height="50">
+<img src="https://raw.githubusercontent.com/tandpfun/skill-icons/main/icons/CSS.svg" width="50" height="50"> 
+<img src="https://raw.githubusercontent.com/tandpfun/skill-icons/main/icons/JavaScript.svg" width="50" height="50"> 
+<img src="https://raw.githubusercontent.com/tandpfun/skill-icons/main/icons/VSCode-Dark.svg" width="50" height="50"> <img 
+---
+
+Description--
+
+## Brief
+You have been tasked with producing a new JavaScript front-end client for an existing social media platform. The client application must be attractive and responsive, but you have an otherwise blank slate in terms of theme design language.
+
+Using the provided API and API documentation, create a functioning user interface that allows for viewing, posting, editing and deleting social media content.
+
+Social API routes require authorisation via JWT (JSON Web Tokens). You will need to register an account and login to access your token.
+
+To complete the required features, you will also need to make use of GET, POST, PUT, and DELETE HTTP methods.
+
+Using localStorage is highly recommended, especially for storing JWT tokens.
+
+A finished project fulfils the requirements below with an easy to use and error-free user interface.
+
+Required features
+The following user stories are required for a passing submission:
+
+User with @noroff.no or @stud.noroff.no email can register profile
+Registered user can login
+User can view a post content feed
+User can filter the post content feed
+User can search the post content feed
+User can view a post content item by ID
+User can create a post content item
+User can update a post content item
+User can delete a post content item
+Additional features
+The following user stories are optional:
+
+User can create a comment on a post
+User can edit profile media
+User can follow/unfollow a profile
+User can react to a post content item
+
+## register
+here u can register a profile with a @noroff.no or @stud.noroff.no email, when registrering, you will get a confimation if the registration is successfull, and you will get a error message if the registration was unsucessfull. 
+
+## login
+after registring a user, you can take the same email and password and login.
+
+## feed
+in the feed page, when you have logged inn, you can create a post (with a title, body,tags(optionale) and media(optionale) further down the page, u can update(edit) a post that you have created,just click on the edit button on the post u want to edit (to get the post id) .you can also delete a post, if you are unhappy, or if u dont want it out there, its simple, just click on the delete button on the post u want to delete (to get the post id so the post can be deleted)
+we have a search fuction, if u wanna see 100 posts of "test" just search test or example" 
+after that we have a sorting option, where the default is newest, but if you set it to the oldest, the oldests posts (out of the 100 fetched) is being displayed first.
+last we have the feed, here you can see the time the posts, the time the have beed posted.
+
+## profile
+
+here you can see your profile 
+i did not get time to make the profile page alot of the things was optionale, so hopefully you can atleast edit your bio, and mabye press the follow button.
+
+#### Getting Started
+
+Installing
+
+Clone the repo:
+
+    git clone git@github.com: https://github.com/Voidwaker/css-frameworks-ca/tree/js2-try2
+
+Install the dependencies: N/A
+
+    npm install
+
+Running
+
+To run the app, run the following commands:
+
+    npm run dev
+
+
+
+
+
+---
+
+Contributing
+
+
+As this is my js2 assignment, i dont want contributions, but feedback to how i can imporve the site is always velcome. Thank you!
+
+Any suggestions will be happily taken into account- feel free to message me!
+---
+
+Contact:
+
+
+Email me: 
+Sigurdvaaler@hotmail.com
+
+<img src="https://raw.githubusercontent.com/tandpfun/skill-icons/main/icons/Gmail-Dark.svg" width="50" height="50"> <img src="https://raw.githubusercontent.com/tandpfun/skill-icons/main/icons/Discord.svg" width="50" height="50">
+
+
+Find me on Discord:
+(Sigurd Vaaler
+Voidwaker1)
+
+---
+
+Acknowledgments:

feed/index.html

@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title>Feed</title>
+	<link rel="stylesheet" href="/dist/css/index.css" />
+	<script defer src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+	<script type="module" src="/js/index.mjs" defer></script>
+</head>
+<body class="bg-dark">
+	<header>
+		<nav class="navbar navbar-expand-lg navbar-light bg-light">
+			<div class="container-fluid">
+				<a class="navbar-brand" href="/">Home</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">
+						<li class="nav-item">
+							<a class="nav-link" href="/profile">Profile</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link active" href="/feed/index.html">Feed</a>
+						</li>
+					</ul>
+				</div>
+			</div>
+		</nav>
+	</header>
+	<main class="container mt-4">
+		<div class="card border-dark mb-3 mx-auto">
+			<div class="card-body">
+				<h5 class="card-title mb-3 text-green text-center">Create New Post</h5>
+				<form id="createPost">
+					<div class="form-group mb-3 text-green">
+						<label for="postTitle">Title</label>
+						<input class="form-control" type="text" id="postTitle" name="title" required />
+					</div>
+					<div class="form-group mb-3 text-green">
+						<label for="postBody">Body</label>
+						<textarea class="form-control" id="postBody" name="body" required></textarea>
+					</div>
+					<div class="form-group mb-3 text-green">
+						<label for="postTags">Tags (comma separated)</label>
+						<input class="form-control" type="text" id="postTags" name="tags" />
+					</div>
+					<div class="form-group mb-3 text-green">
+						<label for="postMedia">Media</label>
+						<input class="form-control" type="url" id="postMedia" name="media" />
+					</div>
+					<div class="d-flex justify-content-center">
+						<button class="btn btn-success" type="submit">Create Post</button>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="d-flex justify-content-center mb-3">
+			<div class="col-md-6 col-lg-4">
+				<select id="filterPosts" class="form-control text-green">
+					<option value="newest">Newest</option>
+					<option value="oldest">Oldest</option>
+					<option value="popular">Most Popular</option>
+				</select>
+			</div>
+		</div>
+		<div class="d-flex justify-content-center mb-3">
+			<div class="col-md-8">
+				<input id="searchPosts" type="text" class="form-control text-green" placeholder="Search for posts..." />
+			</div>
+		</div>
+		<h1 class="fst-italic fw-bold text-center">Posts</h1>
+		<div id="posts" class="mt-4"></div>
+	</main>
+	<div class="modal fade" id="viewPostModal" tabindex="-1" aria-labelledby="viewPostModalLabel" aria-hidden="true">
+		<div class="modal-dialog modal-lg">
+			<div class="modal-content bg-dark text-green">
+				<div class="modal-header">
+					<h5 class="modal-title" id="viewPostModalLabel">Post Details</h5>
+					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+				</div>
+				<div class="modal-body">
+					<h5 id="viewPostTitle" class="text-green"></h5>
+					<p id="viewPostBody" class="text-green"></p>
+					<p class="text-green"><strong>Author:</strong> <span id="viewPostAuthor"></span></p>
+					<p class="text-green"><strong>Posted:</strong> <span id="viewPostDate"></span></p>
+					<div id="viewPostMedia" class="mt-3"></div>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</body>
+</html>
+

index.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login/Registrer</title>
+    <link rel="stylesheet" href="dist/css/index.css">
+ <script defer src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+ <script type="module" src="./js/index.mjs" defer></script>
+</head>
+<body class="bg-dark">
+    <header class="container-fluid">
+        <nav class="navbar navbar-expand-lg navbar-light bg-light">
+            <div class="container-fluid">
+                <a class="navbar-brand" href="/">Home</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">
+                        <li class="nav-item">
+                            <a class="nav-link" href="/profile">Profil</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="/feed/index.html">Feed</a>
+                        </li>
+                        <li class="nav-item">
+                            <button id="logoutBtn" class="btn btn-danger">Logout</button>
+                        </li>                        
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    </header>
+    <div class="container-sm col-6 mt-5">
+        <h2 class="text-center">Logg Inn</h2>
+        <form id="loginForm">
+            <div class="mb-3">
+                <label for="loginEmail" class="form-label text-blue">E-post</label>
+                <input type="email" class="form-control text-green" id="loginEmail" name="email" placeholder="Email@example.com" required>
+            </div>
+            <div class="mb-3">
+                <label for="loginPassword" class="form-label text-blue">Passord</label>
+                <input type="password" class="form-control text-green" id="loginPassword" name="password" placeholder="Password" required minlength="8">
+            </div>
+            <div class="d-flex justify-content-center">
+                <button type="submit" class="btn btn-custom">Logg Inn</button>
+            </div>
+        </form>
+        <div id="errorDisplay" style="color: red;"></div>
+        <div class="d-flex justify-content-center mt-3">
+            <a href="register.html" class="btn btn-custom">Register</a>
+        </div>
+    </div>
+</body>
+</html>

js/api/auth/authFetch.mjs

@@ -0,0 +1,81 @@
+import { load, remove } from "../../storage/index.mjs";
+import { API_KEY_STORAGE, API_TOKEN_STORAGE } from "../constants.mjs";
+
+/**
+ * Generates headers for an authenticated API request.
+ * Includes Authorization and X-Noroff-API-Key if available in localStorage.
+ *
+ * @returns {Object} Headers object for fetch.
+ */
+export function headers() {
+	const token = load(API_TOKEN_STORAGE);
+	const apiKey = load(API_KEY_STORAGE);
+
+	if (!token || !apiKey) {
+		return {};
+	}
+
+	return {
+		"Content-Type": "application/json",
+		"Authorization": `Bearer ${token}`,
+		"X-Noroff-API-Key": apiKey
+	};
+}
+
+/**
+ * Makes an authenticated fetch request using stored token and API key.
+ *
+ * @param {string} url - The endpoint to send the request to.
+ * @param {Object} [options={}] - Optional fetch options.
+ * @returns {Promise<Response>} The fetch response object.
+ * @throws {Error} Throws if the fetch fails or the response is not OK.
+ */
+export async function authFetch(url, options = {}) {
+	const requestOptions = {
+		...options,
+		headers: {
+			...headers(),
+			...options.headers
+		}
+	};
+
+	try {
+		const response = await fetch(url, requestOptions);
+
+		if (!response.ok) {
+			const errorData = await response.json();
+			const status = response.status;
+			const message = errorData?.errors?.[0]?.message || "Unknown error";
+
+			if (status === 401) {
+				remove(API_TOKEN_STORAGE);
+				remove(API_KEY_STORAGE);
+				remove("profile");
+
+				document.body.innerHTML = `
+					<div style="position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background-color: red; color: white; padding: 10px; border-radius: 5px; z-index: 1000;">
+						❌ You must be logged in to access this page. Redirecting to login...
+					</div>
+				`;
+
+				setTimeout(() => {
+					window.location.href = "/index.html";
+				}, 1500);
+
+				return;
+			}
+
+			throw new Error(`HTTP error! status: ${status}, message: ${message}`);
+		}
+
+		return response;
+	} catch (error) {
+		console.error("❌ Fetch error:", error);
+		throw error;
+	}
+}
+
+
+
+
+