Merge branch 'main' into feature/update-user-settings-layout

spec.json

+{
+  "openapi": "3.0.1",
+  "info": {
+    "title": "Sparesti API",
+    "description": "The Sparesti API",
+    "version": "3.0"
+  },
+  "servers": [
+    {
+      "url": "http://localhost:8080",
+      "description": "Generated server url"
+    }
+  ],
+  "security": [
+    {
+      "Bearer Authentication": []
+    }
+  ],
+  "tags": [
+    {
+      "name": "Authentication",
+      "description": "User authentication"
+    },
+    {
+      "name": "Leaderboard",
+      "description": "Retrieving leaderboard data"
+    }
+  ],
+  "paths": {
+    "/api/auth/valid-email/{email}": {
+      "post": {
+        "tags": [
+          "Authentication"
+        ],
+        "summary": "Validate email",
+        "description": "Check that the given email is valid",
+        "operationId": "validateEmail",
+        "parameters": [
+          {
+            "name": "email",
+            "in": "path",
+            "required": true,
+            "schema": {
+              "type": "string"
+            }
+          }
+        ],
+        "responses": {
+          "409": {
+            "description": "Email already exists",
+            "content": {
+              "*/*": {
+                "schema": {
+                  "$ref": "#/components/schemas/ExceptionResponse"
+                }
+              }
+            }
+          },
+          "200": {
+            "description": "Email is valid",
+            "content": {
+              "*/*": {
+                "schema": {
+                  "type": "object"
+                }
+              }
+            }
+          }
+        },
+        "security": []
+      }
+    },
+    "/api/auth/signup": {
+      "post": {
+        "tags": [
+          "Authentication"
+        ],
+        "summary": "User Signup",
+        "description": "Sign up a new user",
+        "operationId": "signup",
+        "requestBody": {
+          "content": {
+            "application/json": {
+              "schema": {
+                "$ref": "#/components/schemas/SignUpRequest"
+              }
+            }
+          },
+          "required": true
+        },
+        "responses": {
+          "201": {
+            "description": "Successfully signed up",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/AuthenticationResponse"
+                }
+              }
+            }
+          },
+          "409": {
+            "description": "Email already exists",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/ExceptionResponse"
+                }
+              }
+            }
+          }
+        },
+        "security": []
+      }
+    },
+    "/api/auth/login": {
+      "post": {
+        "tags": [
+          "Authentication"
+        ],
+        "summary": "User Login",
+        "description": "Log in with an existing user",
+        "operationId": "login",
+        "requestBody": {
+          "content": {
+            "application/json": {
+              "schema": {
+                "$ref": "#/components/schemas/LoginRequest"
+              }
+            }
+          },
+          "required": true
+        },
+        "responses": {
+          "200": {
+            "description": "Successfully logged in",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/AuthenticationResponse"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Invalid credentials",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/ExceptionResponse"
+                }
+              }
+            }
+          },
+          "404": {
+            "description": "User not found",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/ExceptionResponse"
+                }
+              }
+            }
+          }
+        },
+        "security": []
+      }
+    },
+    "/api/users": {
+      "patch": {
+        "tags": [
+          "user-controller"
+        ],
+        "summary": "Update profile",
+        "description": "Update the profile of the authenticated user",
+        "operationId": "update",
+        "requestBody": {
+          "content": {
+            "application/json": {
+              "schema": {
+                "$ref": "#/components/schemas/UserUpdateDTO"
+              }
+            }
+          },
+          "required": true
+        },
+        "responses": {
+          "200": {
+            "description": "Successfully updated profile",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/UserDTO"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/users/{userId}/profile": {
+      "get": {
+        "tags": [
+          "user-controller"
+        ],
+        "summary": "Get profile",
+        "description": "Get user profile",
+        "operationId": "getProfile",
+        "parameters": [
+          {
+            "name": "userId",
+            "in": "path",
+            "required": true,
+            "schema": {
+              "type": "integer",
+              "format": "int64"
+            }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Successfully got profile",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/ProfileDTO"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/users/me": {
+      "get": {
+        "tags": [
+          "user-controller"
+        ],
+        "summary": "Get user",
+        "description": "Get user information",
+        "operationId": "getUser",
+        "responses": {
+          "200": {
+            "description": "Successfully got user",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/UserDTO"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/leaderboard": {
+      "get": {
+        "tags": [
+          "Leaderboard"
+        ],
+        "operationId": "getLeaderboard",
+        "parameters": [
+          {
+            "name": "type",
+            "in": "query",
+            "required": true,
+            "schema": {
+              "type": "string"
+            }
+          },
+          {
+            "name": "filter",
+            "in": "query",
+            "required": true,
+            "schema": {
+              "type": "string"
+            }
+          },
+          {
+            "name": "entryCount",
+            "in": "query",
+            "required": false,
+            "schema": {
+              "type": "integer",
+              "format": "int32",
+              "default": 10
+            }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "OK",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/LeaderboardDTO"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/leaderboard/surrounding": {
+      "get": {
+        "tags": [
+          "Leaderboard"
+        ],
+        "operationId": "getSurrounding",
+        "parameters": [
+          {
+            "name": "type",
+            "in": "query",
+            "required": true,
+            "schema": {
+              "type": "string"
+            }
+          },
+          {
+            "name": "filter",
+            "in": "query",
+            "required": true,
+            "schema": {
+              "type": "string"
+            }
+          },
+          {
+            "name": "entryCount",
+            "in": "query",
+            "required": false,
+            "schema": {
+              "type": "integer",
+              "format": "int32",
+              "default": 10
+            }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "OK",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/LeaderboardDTO"
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  "components": {
+    "schemas": {
+      "ExceptionResponse": {
+        "type": "object",
+        "properties": {
+          "status": {
+            "type": "integer",
+            "format": "int32"
+          },
+          "message": {
+            "type": "string"
+          }
+        }
+      },
+      "SignUpRequest": {
+        "type": "object",
+        "properties": {
+          "firstName": {
+            "type": "string"
+          },
+          "lastName": {
+            "type": "string"
+          },
+          "email": {
+            "type": "string"
+          },
+          "password": {
+            "type": "string"
+          },
+          "commitment": {
+            "type": "string"
+          },
+          "experience": {
+            "type": "string"
+          },
+          "challengeTypes": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            }
+          }
+        }
+      },
+      "AuthenticationResponse": {
+        "type": "object",
+        "properties": {
+          "firstName": {
+            "type": "string"
+          },
+          "lastName": {
+            "type": "string"
+          },
+          "role": {
+            "type": "string"
+          },
+          "token": {
+            "type": "string"
+          }
+        }
+      },
+      "LoginRequest": {
+        "type": "object",
+        "properties": {
+          "email": {
+            "type": "string"
+          },
+          "password": {
+            "type": "string"
+          }
+        }
+      },
+      "UserUpdateDTO": {
+        "type": "object",
+        "properties": {
+          "firstName": {
+            "type": "string"
+          },
+          "lastName": {
+            "type": "string"
+          },
+          "email": {
+            "type": "string"
+          },
+          "password": {
+            "type": "string"
+          },
+          "commitment": {
+            "type": "string"
+          },
+          "experience": {
+            "type": "string"
+          },
+          "challengeTypes": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            }
+          }
+        }
+      },
+      "UserDTO": {
+        "type": "object",
+        "properties": {
+          "id": {
+            "type": "integer",
+            "format": "int64"
+          },
+          "firstName": {
+            "type": "string"
+          },
+          "lastName": {
+            "type": "string"
+          },
+          "email": {
+            "type": "string"
+          },
+          "createdAt": {
+            "type": "string",
+            "format": "date-time"
+          },
+          "role": {
+            "type": "string"
+          }
+        }
+      },
+      "ProfileDTO": {
+        "type": "object",
+        "properties": {
+          "id": {
+            "type": "integer",
+            "format": "int64"
+          },
+          "firstName": {
+            "type": "string"
+          },
+          "lastName": {
+            "type": "string"
+          },
+          "createdAt": {
+            "type": "string",
+            "format": "date-time"
+          }
+        }
+      },
+      "LeaderboardDTO": {
+        "type": "object",
+        "properties": {
+          "type": {
+            "type": "string"
+          },
+          "filter": {
+            "type": "string"
+          },
+          "entries": {
+            "type": "array",
+            "items": {
+              "$ref": "#/components/schemas/LeaderboardEntryDTO"
+            }
+          }
+        }
+      },
+      "LeaderboardEntryDTO": {
+        "type": "object",
+        "properties": {
+          "user": {
+            "$ref": "#/components/schemas/UserDTO"
+          },
+          "score": {
+            "type": "integer",
+            "format": "int32"
+          }
+        }
+      }
+    },
+    "securitySchemes": {
+      "Bearer Authentication": {
+        "type": "http",
+        "scheme": "bearer",
+        "bearerFormat": "JWT"
+      }
+    }
+  }
+}
\ No newline at end of file

src/App.vue

 <script setup lang="ts">
 import { RouterView } from 'vue-router'
-import ErrorBoundaryCatcher from '@/components/Exceptions/ErrorBoundaryCatcher.vue';
+// import ErrorBoundaryCatcher from '@/components/Exceptions/ErrorBoundaryCatcher.vue';
 </script>
 
 <template>

src/api/index.ts

@@ -9,7 +9,14 @@ export type { OpenAPIConfig } from './core/OpenAPI';
 
 export type { AuthenticationResponse } from './models/AuthenticationResponse';
 export type { ExceptionResponse } from './models/ExceptionResponse';
+export type { LeaderboardDTO } from './models/LeaderboardDTO';
+export type { LeaderboardEntryDTO } from './models/LeaderboardEntryDTO';
 export type { LoginRequest } from './models/LoginRequest';
+export type { ProfileDTO } from './models/ProfileDTO';
 export type { SignUpRequest } from './models/SignUpRequest';
+export type { UserDTO } from './models/UserDTO';
+export type { UserUpdateDTO } from './models/UserUpdateDTO';
 
 export { AuthenticationService } from './services/AuthenticationService';
+export { LeaderboardService } from './services/LeaderboardService';
+export { UserControllerService } from './services/UserControllerService';

src/api/models/LeaderboardDTO.ts

+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+import type { LeaderboardEntryDTO } from './LeaderboardEntryDTO';
+export type LeaderboardDTO = {
+    type?: string;
+    filter?: string;
+    entries?: Array<LeaderboardEntryDTO>;
+};
+

src/api/models/LeaderboardEntryDTO.ts

+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+import type { UserDTO } from './UserDTO';
+export type LeaderboardEntryDTO = {
+    user?: UserDTO;
+    score?: number;
+};
+

src/api/models/ProfileDTO.ts

+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type ProfileDTO = {
+    id?: number;
+    firstName?: string;
+    lastName?: string;
+    createdAt?: string;
+};
+

src/api/models/SignUpRequest.ts

@@ -7,8 +7,8 @@ export type SignUpRequest = {
     lastName?: string;
     email?: string;
     password?: string;
-    changeWilling?: string;
+    commitment?: string;
     experience?: string;
-    challenges?: Array<string>;
+    challengeTypes?: Array<string>;
 };
 

src/api/models/UserDTO.ts

+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type UserDTO = {
+    id?: number;
+    firstName?: string;
+    lastName?: string;
+    email?: string;
+    createdAt?: string;
+    role?: string;
+};
+

src/api/models/UserUpdateDTO.ts

+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type UserUpdateDTO = {
+    firstName?: string;
+    lastName?: string;
+    email?: string;
+    password?: string;
+    commitment?: string;
+    experience?: string;
+    challengeTypes?: Array<string>;
+};
+

src/api/services/LeaderboardService.ts

+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+import type { LeaderboardDTO } from '../models/LeaderboardDTO';
+import type { CancelablePromise } from '../core/CancelablePromise';
+import { OpenAPI } from '../core/OpenAPI';
+import { request as __request } from '../core/request';
+export class LeaderboardService {
+    /**
+     * @returns LeaderboardDTO OK
+     * @throws ApiError
+     */
+    public static getLeaderboard({
+        type,
+        filter,
+        entryCount = 10,
+    }: {
+        type: string,
+        filter: string,
+        entryCount?: number,
+    }): CancelablePromise<LeaderboardDTO> {
+        return __request(OpenAPI, {
+            method: 'GET',
+            url: '/api/leaderboard',
+            query: {
+                'type': type,
+                'filter': filter,
+                'entryCount': entryCount,
+            },
+        });
+    }
+    /**
+     * @returns LeaderboardDTO OK
+     * @throws ApiError
+     */
+    public static getSurrounding({
+        type,
+        filter,
+        entryCount = 10,
+    }: {
+        type: string,
+        filter: string,
+        entryCount?: number,
+    }): CancelablePromise<LeaderboardDTO> {
+        return __request(OpenAPI, {
+            method: 'GET',
+            url: '/api/leaderboard/surrounding',
+            query: {
+                'type': type,
+                'filter': filter,
+                'entryCount': entryCount,
+            },
+        });
+    }
+}

src/api/services/UserControllerService.ts

+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+import type { ProfileDTO } from '../models/ProfileDTO';
+import type { UserDTO } from '../models/UserDTO';
+import type { UserUpdateDTO } from '../models/UserUpdateDTO';
+import type { CancelablePromise } from '../core/CancelablePromise';
+import { OpenAPI } from '../core/OpenAPI';
+import { request as __request } from '../core/request';
+export class UserControllerService {
+    /**
+     * Update profile
+     * Update the profile of the authenticated user
+     * @returns UserDTO Successfully updated profile
+     * @throws ApiError
+     */
+    public static update({
+        requestBody,
+    }: {
+        requestBody: UserUpdateDTO,
+    }): CancelablePromise<UserDTO> {
+        return __request(OpenAPI, {
+            method: 'PATCH',
+            url: '/api/users',
+            body: requestBody,
+            mediaType: 'application/json',
+        });
+    }
+    /**
+     * Get profile
+     * Get user profile
+     * @returns ProfileDTO Successfully got profile
+     * @throws ApiError
+     */
+    public static getProfile({
+        userId,
+    }: {
+        userId: number,
+    }): CancelablePromise<ProfileDTO> {
+        return __request(OpenAPI, {
+            method: 'GET',
+            url: '/api/users/{userId}/profile',
+            path: {
+                'userId': userId,
+            },
+        });
+    }
+    /**
+     * Get user
+     * Get user information
+     * @returns UserDTO Successfully got user
+     * @throws ApiError
+     */
+    public static getUser(): CancelablePromise<UserDTO> {
+        return __request(OpenAPI, {
+            method: 'GET',
+            url: '/api/users/me',
+        });
+    }
+}

src/components/Configuration/ConfigurationSteps/SuitableChallenges.vue

@@ -22,6 +22,7 @@ const onChangedChallengeEvent = (value) => {
     console.log('Reached')
     chosenChallenges.value = chosenChallenges.value.filter(item => item !== value[0]);
   }
+  console.log(chosenChallenges.value)
 }
 
 const onClick = () => {

src/components/InputFields/BaseInput.vue

@@ -22,10 +22,6 @@ const props = defineProps({
     type: String,
     default: ""
   },
-  isValid: {
-    type: Boolean,
-    default: false
-  },
   min: {
     type: String,
     required: false
@@ -33,6 +29,14 @@ const props = defineProps({
   pattern: {
     type: String,
     default: null
+  },
+  validMessage: {
+    type: String,
+    default: ''
+  },
+  invalidMessage: {
+    type: String,
+    default: ''
   }
 });
 
@@ -44,17 +48,16 @@ const onInputEvent = (event: any) => {
 <template>
   <div>
     <label :for="inputId">{{ label }}</label>
-    <input :value="props.modelValue"
+    <input :value="modelValue"
            @input="onInputEvent"
-           :type="props.type"
+           :type="type"
            class="form-control"
-           :placeholder="props.placeholder"
+           :placeholder="placeholder"
            :id="inputId" required
            :min="min"
-           :pattern="pattern"
-    />
-    <div v-if="props.isValid" class="invalid-feedback">Invalid {{ label }}</div>
-    <div v-else class="valid-feedback">Valid {{ label }}</div>
+           :pattern="pattern"/>
+    <div class="valid-feedback">{{ validMessage }}</div>
+    <div class="invalid-feedback">{{ invalidMessage }}</div>
   </div>
 </template>
 

src/components/Login/LoginForm.vue

@@ -8,8 +8,8 @@ import { useRouter, useRoute } from 'vue-router';
 import handleUnknownError from '@/components/Exceptions/unkownErrorHandler';
 import { useErrorStore } from '@/stores/ErrorStore';
 
-const emailRef = ref()
-const passwordRef = ref()
+const emailRef = ref('')
+const passwordRef = ref('')
 const formRef = ref()
 let errorMsg = ref('');
 
@@ -19,13 +19,18 @@ const userStore = useUserInfoStore();
 
 const handleEmailInputEvent = (newValue: any) => {
   emailRef.value = newValue
+  console.log(emailRef.value)
 }
 
 const handlePasswordInputEvent = (newValue: any) => {
   passwordRef.value = newValue
+  console.log(passwordRef.value)
 }
 
 const handleSubmit = async () => {
+  console.log(emailRef.value)
+  console.log(passwordRef.value)
+
   formRef.value.classList.add("was-validated")
   const loginUserPayload: LoginRequest = {
     email: emailRef.value,
@@ -64,11 +69,30 @@ const handleSubmit = async () => {
       <h1>Sparesti.no</h1>
     </div>
     <form ref="formRef" id="loginForm" @submit.prevent="handleSubmit" novalidate>
-      <BaseInput :model-value="emailRef" @input-change-event="handleEmailInputEvent" id="emailInput" input-id="email"
-        type="email" label="Email" placeholder="Enter your email" />
-      <BaseInput pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,16}" :model-value="passwordRef"
-        @input-change-event="handlePasswordInputEvent" id="passwordInput" input-id="password" type="password"
-        label="Password" placeholder="Enter password" />
+
+      <BaseInput :model-value="emailRef"
+                 @input-change-event="handleEmailInputEvent"
+                 id="emailInput"
+                 input-id="email"
+                 type="email"
+                 label="Email"
+                 placeholder="Enter your email"
+                 valid-message="Valid email"
+                 invalid-message="Invalid email"
+      />
+
+      <BaseInput :model-value="passwordRef"
+                 @input-change-event="handlePasswordInputEvent"
+                 id="passwordInput"
+                 input-id="password"
+                 type="password"
+                 pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,16}"
+                 label="Password"
+                 placeholder="Enter password"
+                 valid-message="Valid password"
+                 invalid-message="Password must be between 4 and 16 characters and contain one capital letter, small letter and a number"
+      />
+
       <p class="text-danger">{{ errorMsg }}</p>
       <button1 id="confirmButton" type="submit" @click="handleSubmit" button-text="Login"></button1>
     </form>

src/components/SavingGoalComponents/SavingGoal.vue

@@ -36,7 +36,7 @@ export default {
 </script>
 
 <template>
-  <div class="container">
+  <div class="cont">
     <div class="row">
       <div class="col-lg-4 blue-background overflow-auto" :style="{ 'max-height': bluePanelMaxHeight }">
         <h3 style="color: white; margin-bottom: 16px">Your saving goals</h3>
@@ -53,9 +53,10 @@ export default {
 </template>
 
 <style scoped>
-.container {
+.cont {
+  padding-left: 10px;
   margin: 0;
-  width: 100%;
+  width: 98%;
   box-sizing: unset;
 }
 

src/components/SavingGoalComponents/SavingGoalRoadmap.vue

@@ -4,6 +4,7 @@ interface Step {
   showPanel: boolean;
   description: string;
   percentFinished: number;
+  unFinished: boolean;
 }
 export default {
   data() {
@@ -13,18 +14,28 @@ export default {
       title: 'Spain trip' as string,
       //This will be changed to info gathered from backend
       steps: [
-        { title: 'Challenge 1', showPanel: false, description: 'Save 50kr on coffee in 3 days', percentFinished: 22 },
-        { title: 'Challenge 2', showPanel: false, description: 'Save 500kr on food in 7 days', percentFinished: 73 },
-        { title: 'Challenge 3', showPanel: false, description: 'Save 350kr on clothes in 5 days', percentFinished: 50 },
-        { title: 'Challenge 4', showPanel: false, description: 'Save 150kr on coffee in 4 days', percentFinished: 10 },
-        { title: 'Challenge 5', showPanel: false, description: 'Save 50kr on coffee in 3 days', percentFinished: 90 }
+        { title: 'Challenge 1', showPanel: false, description: 'Save 50kr on coffee in 3 days', percentFinished: 22, unFinished: false },
+        { title: 'Challenge 2', showPanel: false, description: 'Save 500kr on food in 7 days', percentFinished: 73, unFinished: false },
+        { title: 'Challenge 3', showPanel: false, description: 'Save 350kr on clothes in 5 days', percentFinished: 50, unFinished: true },
+        { title: 'Challenge 4', showPanel: false, description: 'Save 150kr on coffee in 4 days', percentFinished: 10, unFinished: true },
+        { title: 'Challenge 5', showPanel: false, description: 'Save 50kr on coffee in 3 days', percentFinished: 90, unFinished: true }
       ]
       ,
       bluePanelMaxHeight: 'auto' as string
     };
   },
   mounted() {
-    this.togglePanel(this.steps[2]);
+    setTimeout(() => {
+      this.togglePanel(this.steps[2]);
+    }, 500);
+    
+  },
+  computed: {
+    computeImageFilter() {
+      return (step: Step) => {
+        return step.unFinished ? 'none' : 'grayscale(100%)';
+      };
+    }
   },
   methods: {
     togglePanel(step: Step) {
@@ -40,12 +51,8 @@ export default {
       if (step.showPanel) {
         this.$nextTick(() => {
           const panel = document.getElementById(`panel-${this.steps.indexOf(step)}`);
-          console.log(panel);
           if (panel) {
-            setTimeout(() => {
-              panel.scrollIntoView({ behavior: 'smooth', block: 'center' });
-              console.log('I should have scrolled');
-            }, 100); // Wait for 1 second before scrolling
+            panel.scrollIntoView({ behavior: 'smooth', block: 'center' });
           }
         });
       }
@@ -56,11 +63,24 @@ export default {
 
 <template>
   <div class="col-lg-8">
-    <div class="SavingGoalTitle text-center">{{title}}</div>
+    <div class="SavingGoalTitle text-center">
+      {{title}}
+      <br>
+      <p class="d-inline-flex gap-1">
+        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample" style="font-size: 25px;">
+          See more info
+        </button>
+      </p>
+      <div class="collapse" id="collapseExample">
+        <div class="card card-body bg-primary mx-auto" style="width: 80%;">
+          Total saved: 20kr
+        </div>
+      </div>
+    </div>
     <ul class="timeline">
       <li v-for="(step, index) in steps" :key="index" :class="{ 'timeline-inverted': index % 2 !== 0 }">
           <div class="timeline-image z-1" @click="togglePanel(step)">
-            <img class="circular-image" :src="step.showPanel ? altImage : image" alt="">
+            <img class="circular-image" :src="step.showPanel ? altImage : image" :style="{ filter: computeImageFilter(step) }" alt="">
           </div>
         <div class="timeline-panel z-3" :id="'panel-' + index" v-show="step.showPanel">
           <div class="timeline-heading">
@@ -95,9 +115,8 @@ export default {
 
 <style scoped>
 .col-lg-8 {
-  width: 63%;
+  width: 58%;
   margin-bottom: 20px;
-  max-height: 1000px;
 }
 
 .SavingGoalTitle {

src/components/SignUp/SignUpForm.vue

@@ -5,15 +5,18 @@ import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 const router = useRouter();
+
 const firstNameRef = ref('')
 const surnameRef = ref('')
 const emailRef = ref('')
 const passwordRef = ref('')
 const confirmPasswordRef = ref('')
 const formRef = ref()
+let samePasswords = ref(true)
 
 const handleFirstNameInputEvent = (newValue: any) => {
   firstNameRef.value = newValue
+  console.log(firstNameRef.value)
 }
 
 const handleSurnameInputEvent = (newValue: any) => {
@@ -26,21 +29,30 @@ const handleEmailInputEvent = (newValue: any) => {
 
 const handlePasswordInputEvent = (newValue: any) => {
   passwordRef.value = newValue
+  console.log(passwordRef.value)
 }
 
 const handleConfirmPasswordInputEvent = (newValue: any) => {
   confirmPasswordRef.value = newValue
+  console.log(confirmPasswordRef.value)
 }
 
-const handleSubmit = () => {
+const handleSubmit = async () => {
+  console.log(firstNameRef.value)
+
+  samePasswords.value = (passwordRef.value === confirmPasswordRef.value)
+  console.log(samePasswords.value)
   const form = formRef.value;
 
   // Check if the form is valid
   if (form.checkValidity()) {
     // Form is valid, submit the form or perform other actions
     console.log('Form is valid');
+  } else {
+    console.log('Form is not valid');
   }
 
+
   formRef.value.classList.add("was-validated")
 }
 
@@ -49,46 +61,54 @@ const handleSubmit = () => {
 <template>
   <div class="container">
     <form ref="formRef" id="signUpForm" @submit.prevent="handleSubmit">
-      <BaseInput :model-value="firstNameRef.value"
+      <BaseInput :model-value="firstNameRef"
                  @input-change-event="handleFirstNameInputEvent"
                  ref="firstNameRef"
                  id="firstNameInput"
                  input-id="first-name"
                  type="text"
                  label="First name"
-                 placeholder="Enter your first name"/>
-      <BaseInput :model-value="surnameRef.value"
+                 placeholder="Enter your first name"
+                 invalid-message="Please enter your first name"/>
+      <BaseInput :model-value="surnameRef"
                  @input-change-event="handleSurnameInputEvent"
                  ref="surnameRef"
                  id="surnameInput"
                  input-id="surname"
                  type="text"
                  label="Surname"
-                 placeholder="Enter your surname"/>
-      <BaseInput :model-value="emailRef.value"
+                 placeholder="Enter your surname"
+                 invalid-message="Please enter your surname"/>
+      <BaseInput :model-value="emailRef"
                  @input-change-event="handleEmailInputEvent"
                  ref="emailRef"
                  id="emailInput"
                  input-id="email"
                  type="email"
                  label="Email"
-                 placeholder="Enter your email"/>
-      <BaseInput :model-value="passwordRef.value"
+                 placeholder="Enter your email"
+                 invalid-message="Invalid email"/>
+      <BaseInput :model-value="passwordRef"
                  @input-change-event="handlePasswordInputEvent"
                  ref="passwordRef"
                  id="passwordInput"
                  input-id="password"
                  type="password"
+                 pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,16}"
                  label="Password"
-                 placeholder="Enter password"/>
-      <BaseInput :model-value="confirmPasswordRef.value"
+                 placeholder="Enter password"
+                 invalid-message="Password must be between 4 and 16 characters and contain one capital letter, small letter and a number"/>
+      <BaseInput :modelValue="confirmPasswordRef"
                  @input-change-event="handleConfirmPasswordInputEvent"
                  ref="confirmPasswordRef"
                  id="confirmPasswordInput"
                  input-id="confirmPassword"
                  type="password"
+                 pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,16}"
                  label="Confirm Password"
-                 placeholder="Confirm password"/>
+                 placeholder="Confirm password"
+                 invalid-message="Password must be between 4 and 16 characters and contain one capital letter, small letter and a number"/>
+      <p v-if="samePasswords" class="text-danger">The passwords are not identical</p>
       <button1 id="confirmButton" @click="handleSubmit" button-text="Sign up"></button1>
     </form>
   </div>