new page layout

nginx/vue/src/components/admin/Login.vue

@@ -1,13 +1,26 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, onMounted, computed } from "vue";
+import { useAuthStore } from "@/stores/auth";
 
-const loggedIn = ref(false);
+const auth = useAuthStore();
+const username = ref("");
+const password = ref("");
+const loggedIn = computed(() => Object.keys(auth.user.ID || {}).length > 0);
+
+function handleLogin() {
+    auth.logIn(username.value, password.value);
+}
 </script>
 
 <template>
-    <div v-if="!loggedIn">
+    <div v-if="loggedIn">
+        <p>{{ auth.user.ID }}</p>
+        <p>{{ auth.user.username }}</p>
+    </div>
+    <div v-else>
         <h1>login</h1>
-        <textarea>Username</textarea>
-        <textarea>Password</textarea>
+        <textarea v-model="username"></textarea>
+        <textarea type="password" v-model="password"></textarea>
+        <button @click="handleLogin">Log In</button>
     </div>
 </template>

nginx/vue/src/components/home/Favorites.vue

@@ -1,3 +1,11 @@
 <template>
-    <div></div>
+    <div>
+        <img src="/img/epic.jpeg" />
+    </div>
 </template>
+
+<style scoped>
+img {
+    width: 100%;
+}
+</style>

nginx/vue/src/components/home/Feed.vue

@@ -18,5 +18,13 @@ onMounted(() => {
 </script>
 
 <template>
-    <div></div>
+    <div>
+        <img src="/img/epic.jpeg" />
+    </div>
 </template>
+
+<style scoped>
+img {
+    width: 100%;
+}
+</style>

nginx/vue/src/components/home/Gym.vue

@@ -1,3 +1,11 @@
 <template>
-    <div></div>
+    <div>
+        <img src="/img/epic.jpeg" />
+    </div>
 </template>
+
+<style scoped>
+img {
+    width: 100%;
+}
+</style>

nginx/vue/src/components/home/Intro.vue

@@ -6,6 +6,14 @@
             <p>Hello</p>
             <p>Hello</p>
             <p>Hello</p>
+            <p>Hello</p>
+            <p>Hello</p>
+            <p>Hello</p>
+            <p>Hello</p>
+            <p>Hello</p>
+            <p>Hello</p>
+            <p>Hello</p>
+            <p>Hello</p>
         </div>
     </div>
 </template>

nginx/vue/src/components/home/Links.vue

@@ -3,19 +3,19 @@
         <RouterLink to="/cv">
             <img src="/img/stamps/BC7BDBB9-36FF-4DBE-B825-3603BFE00BE0.gif" />
         </RouterLink>
-        <RouterLink to="/login">
+        <RouterLink to="/admin">
             <img src="/img/stamps/BC7BDBB9-36FF-4DBE-B825-3603BFE00BE0.gif" />
         </RouterLink>
-        <RouterLink to="/login">
+        <RouterLink to="/admin">
             <img src="/img/stamps/BC7BDBB9-36FF-4DBE-B825-3603BFE00BE0.gif" />
         </RouterLink>
-        <RouterLink to="/login">
+        <RouterLink to="/admin">
             <img src="/img/stamps/BC7BDBB9-36FF-4DBE-B825-3603BFE00BE0.gif" />
         </RouterLink>
-        <RouterLink to="/login">
+        <RouterLink to="/admin">
             <img src="/img/stamps/BC7BDBB9-36FF-4DBE-B825-3603BFE00BE0.gif" />
         </RouterLink>
-        <RouterLink to="/login">
+        <RouterLink to="/admin">
             <img src="/img/stamps/BC7BDBB9-36FF-4DBE-B825-3603BFE00BE0.gif" />
         </RouterLink>
     </div>

nginx/vue/src/components/home/Listening.vue

@@ -10,9 +10,7 @@ let idx = 0;
 
 async function fetchRecent() {
     try {
-        const res = await axios.get(
-            "https://adam-french.co.uk/api/spotify/recent",
-        );
+        const res = await axios.get("/api/spotify/recent");
         songs = res.data;
         fetched.value = true;
         song.value = songs[0];

nginx/vue/src/components/home/Watching.vue

@@ -1,3 +1,11 @@
 <template>
-    <div></div>
+    <div>
+        <img src="/img/epic.jpeg" />
+    </div>
 </template>
+
+<style scoped>
+img {
+    width: 100%;
+}
+</style>