fjord-tracks · AliNough · Mar 10, 2023 · Mar 10, 2023 · Mar 10, 2023 · Mar 10, 2023
diff --git a/.env b/.env
@@ -1,3 +1,3 @@
 VITE_CLIENT_ID=""
 VITE_CLIENT_SECRET=""
-VITE_CALLBACK_URL="http://localhost:5173/"
+VITE_CALLBACK_URL="http://localhost:5173/callback"
diff --git a/README.md b/README.md
@@ -62,6 +62,10 @@ Make sure you go through this checklist before submitting your project to Moodle
 - [Animate.css](https://animate.style/) - Just-add-water CSS animations
 - [Spotify-web-api-js](https://www.npmjs.com/package/spotify-web-api-js)
 
+## Tutorials & Reading material
+
+- [storing tokens](https://blog.ropnop.com/storing-tokens-in-browser/)
+
 ## Authors
 
 - Ali Nough (@AliNough)

diff --git a/callback.html b/callback.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Bragi Mix</title>
+    <script type="module" src="/js/callback.js"></script>
+    <link rel="stylesheet" href="/style.css" />
+  </head>
+  <body>
+    <header class="l-header">
+      <section class="l-container l-content">
+        <h1>Login</h1>
+      </section>
+    </header>
+
+    <main class="l-main">
+      <article class="l-container">
+        <p>You should be automatically redirect to the home page</p>
+        <p>If not please click the button below</p>
+
+        <a class="button" href="/index.html">Go Back</a>
+      </article>
+    </main>
+
+    <footer class="l-footer">
+      <section class="l-container">Made by Alex, Ali & Mo</section>
+    </footer>
+  </body>
+</html>
diff --git a/components/Header.js b/components/Header.js
@@ -0,0 +1,41 @@
+class Header extends HTMLElement {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+        }
+        .is-active {
+          color: green;
+        }
+      </style>
+      <div class="u-row c-nav-controls">
+        <h1><slot></slot></h1>
+        <div class="u-row">
+          <nav>
+            <a href="/">Home</a>
+            <a href="/randomizer">Randomizer</a>
+          </nav>
+
+          <button id="js-logout-btn" data-is-protected="true">Log out</button>
+        </div>
+      </div>
+    `;
+
+    const currentUrl = window.location.pathname;
+
+    const links = this.shadowRoot.querySelectorAll("a");
+
+    links.forEach((link) => {
+      if (currentUrl.includes(link.pathname) && link.pathname !== "/") {
+        link.classList.add("is-active");
+        return;
+      }
+    });
+  }
+}
+
+customElements.define("custom-header", Header);
diff --git a/counter.js b/counter.js
diff --git a/css/form.css b/css/form.css
@@ -6,7 +6,8 @@
 
 .c-form {
   display: flex;
+  flex-direction: column;
+  width: 90%;
   gap: var(--size-fluid-1);
   padding: var(--size-fluid-1);
-  flex-direction: column;
 }
diff --git a/css/layout.css b/css/layout.css
@@ -53,6 +53,10 @@ body {
 }
 
 .l-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   width: 100%;
   max-width: 1000px;
   margin: 0 auto;

diff --git a/css/ui.css b/css/ui.css
@@ -24,3 +24,37 @@
   box-shadow: var(--shadow-3);
   margin: var(--size-2) 0;
 }
+
+.c-nav-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.c-song-preview-window {
+  width: 100%;
+  height: 80%;
+  min-height: 20vh;
+  margin-top: 1em;
+}
+
+.c-song-preview-window html {
+  background-image: url(https://i.scdn.co/image/ab67616d0000b273c8769c2ca401307f6122b5c1);
+  background-color: blue;
+}
+
+.audio-player {
+  position: relative;
+  width: 100%;
+}
+audio.audio-player::-webkit-media-controls-panel {
+  width: 10px;
+  border-radius: 100%;
+  background-color: rgb(58, 58, 67);
+}
+
+audio.audio-player::-webkit-media-controls-play-button {
+  border-radius: 100%;
+  background-color: rgb(123, 169, 169);
+}
diff --git a/css/utilities.css b/css/utilities.css
@@ -16,3 +16,8 @@
 .is-visible {
   opacity: 1;
 }
+
+.u-row {
+  display: flex;
+  flex-direction: row;
+}
diff --git a/index.html b/index.html
@@ -4,33 +4,35 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
-    <script type="module" src="/main.js"></script>
+    <title>Bragi Mix</title>
+    <script type="module" src="/components/Header.js"></script>
+    <script type="module" defer src="/main.js"></script>
+    <script type="module" defer src="/js/index.js"></script>
     <link rel="stylesheet" href="/style.css" />
   </head>
   <body>
     <header class="l-header">
       <section class="l-container">
-        <h1>Home</h1>
+        <div class="c-nav-controls">
+          <h1>Home</h1>
 
-        <nav>
-          <a href="/">Home</a>
-          <a href="/about">About</a>
-          <!-- <a href="/randSong.html">Randomizer</a> -->
-        </nav>
+          <div class="u-row">
+            <nav>
+              <a href="/">Home</a>
+              <a href="/randomizer.html">Randomizer</a>
+            </nav>
+
+            <button id="js-login-btn">Sign In</button>
+            <button id="js-logout-btn" data-is-protected="true">Log out</button>
+          </div>
+        </div>
       </section>
     </header>
 
     <main class="l-main l-content">
       <section id="js-rand-nav-holder" class="l-container"></section>
-      <section id="js-login-holder" class="l-container">
-        <div class="">
-          <h2>Login into your Spotify</h2>
-          <button id="js-login-btn">login</button>
-        </div>
-      </section>
 
-      <section class="l-container">
+      <section class="l-container" data-is-protected="true">
         <form id="js-seach-form" class="c-form">
           <div>
             <label for="genre">genre</label>

diff --git a/js/app.js b/js/app.js
diff --git a/js/callback.js b/js/callback.js
@@ -0,0 +1,10 @@
+import { manageUserSessssion } from "./session.js";
+
+/*
+============================================
+Callback page specfic code
+============================================
+*/
+
+manageUserSessssion();
+window.location.replace("/index.html");