-
@@ -177,14 +178,24 @@ header
main
width: 100%
height: calc(100% - var(--header-size))
- padding: 1rem
+ background-color: var(--color-background)
+ flex-direction: column
+ overflow: auto
+
+ .homeImage
+ height: 30vh
+ width: calc(100% + 2rem)
+ padding: 0
+ object-fit: contain
+ margin-left: -1rem
+
+.container
display: flex
justify-content: center
align-items: center
overflow: hidden
- background-color: var(--color-background)
+ padding: 1rem
-.container
ul
margin: 0
padding: 0
@@ -193,6 +204,7 @@ main
flex-wrap: wrap
justify-content: center
max-width: 404px
+ border: 1px solid var(--color-green)
li
height: 202px
@@ -206,6 +218,7 @@ main
a
font-size: 2rem
+ line-height: 2rem
color: var(--color-green)
display: block
width: 100%
@@ -215,4 +228,5 @@ main
justify-content: center
text-align: center
padding: 1rem
+ text-decoration: none
diff --git a/src/router.js b/src/router.js
index bf58665..1f0ae6a 100644
--- a/src/router.js
+++ b/src/router.js
@@ -1,14 +1,20 @@
-import { createRouter, createWebHashHistory } from "vue-router";
+import { createRouter, createWebHistory } from "vue-router";
import HomeView from "@/views/HomeView.vue";
+import { useAuthStore } from "@/stores";
const router = createRouter({
- history: createWebHashHistory(import.meta.env.BASE_URL),
+ history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: "/",
name: "home",
component: HomeView,
},
+ {
+ path: "/login",
+ name: "login",
+ component: () => import("./views/LoginView.vue"),
+ },
{
path: "/scores/:id",
name: "score",
@@ -18,4 +24,19 @@ const router = createRouter({
],
});
+router.beforeEach((to, from) => {
+ // instead of having to check every route record with
+ // to.matched.some(record => record.meta.requiresAuth)
+ const auth = useAuthStore();
+ if (to.meta.requiresAuth && !auth.user) {
+ // this route requires auth, check if logged in
+ // if not, redirect to login page.
+ return {
+ path: "/login",
+ // save the location we were at to come back later
+ query: { redirect: to.fullPath },
+ };
+ }
+});
+
export default router;
diff --git a/src/stores.js b/src/stores.js
index e481ed8..9d06802 100644
--- a/src/stores.js
+++ b/src/stores.js
@@ -30,3 +30,31 @@ export const useStore = defineStore({
},
},
});
+
+export const useAuthStore = defineStore({
+ id: "auth",
+ state: () => ({
+ // initialize state from local storage to enable user to stay logged in
+ user: JSON.parse(localStorage.getItem("user")),
+ returnUrl: null,
+ }),
+ actions: {
+ async login(username, password) {
+ const user = "test";
+
+ // update pinia state
+ this.user = user;
+
+ // store user details and jwt in local storage to keep user logged in between page refreshes
+ localStorage.setItem("user", JSON.stringify(user));
+
+ // redirect to previous url or default to home page
+ router.push(this.returnUrl || "/");
+ },
+ logout() {
+ this.user = null;
+ localStorage.removeItem("user");
+ router.push("/login");
+ },
+ },
+});
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
new file mode 100644
index 0000000..3c62c3e
--- /dev/null
+++ b/src/views/LoginView.vue
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+ Username: test
+ Password: test +
+ + Password: test +