Pincode view

src/router/index.js

@@ -4,7 +4,7 @@ import LoginView from '../views/LoginView.vue'
 import SelectProfileView from '../views/SelectProfileView.vue'
 import ProfileCreationView from '../views/ProfileCreationView.vue'
 import RegisterAccountView from '../views/RegisterAccountView.vue'
-
+import PinCodeView from "@/views/PinCodeView.vue";
 import FridgeView from "@/views/FridgeView.vue";
 
 
@@ -35,11 +35,17 @@ const router = createRouter({
       path: '/registerAccount',
       name: 'registerAccount',
       component: RegisterAccountView
-    },{
+    },
+    {
+      path: '/pincode',
+      name: 'pincode',
+      component: PinCodeView
+    },
+    {
       path: '/myFridge',
       name: 'myFridge',
       component: FridgeView
-    },
+    }
   ]
 })
 

src/util/API.js

@@ -71,8 +71,12 @@ export const API = {
       headers: { Authorization: `Bearer ${authStore.token}` },
     })
       .then((response) => {
-        authStore.setProfile(response.data)
-        router.push("/")
+          authStore.setProfile(response.data)
+          if (!response.data.restricted) {
+              router.push('pincode')
+          } else {
+              router.push("/")
+          }
 
       })
       .catch(() => {
@@ -82,7 +86,7 @@ export const API = {
 
   /**
    * Upload profile image
-   * 
+   *
    * @param {Blob} image - the image file contents to upload. Must be a JPEG no bigger than 512kB
    * @param {Number} profileId - the ID of the profile to upload this image to
    * @returns {Promise<String>} A Promise that resolves to the URL of the uploaded image
@@ -109,7 +113,7 @@ export const API = {
 
   /**
    * Sends a request to create a new profile on the currently logged in account
-   * 
+   *
    * @typedef {{name: string, id?: number, accountId?: number, profileImageUrl: string, isRestricted: boolean}} ProfileType
    * @param {ProfileType} profile  - the partial data of profile to create
    * @returns {Promise<ProfileType>} the full profile after saving, with id and account ID set

src/views/PinCodeView.vue

+<script>
+import router from '@/router/index.js';
+
+export default {
+    methods: {
+        sendToHomePage() {
+            router.push("/");
+        }
+    }
+}
+</script>
+
+<template>
+    <main>
+        <h1>PIN</h1>
+        <div class="pincode-container">
+            <input id="pincode-field" type="tel" maxlength="4" placeholder="0000"/>
+            <button id="pincode-button" type="button" @click="sendToHomePage">OK</button>
+        </div>
+    </main>
+</template>
+
+<style scoped lang="scss">
+h1 {
+    font-size: 50px;
+}
+main {
+    padding: 50px 10px;
+    text-align: center;
+}
+
+.pincode-container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    padding: 10px;
+    input {
+        border-radius: 0;
+        border: 1px solid black;
+        height: 50px;
+        width: 100px;
+        margin: 0 5px;
+        font-size: 38px;
+        padding: 5px;
+    }
+}
+
+
+button {
+    border-radius: 0;
+    border: 1px solid black;
+    width: 50px;
+}
+</style>
\ No newline at end of file