Merge branch 'main' of https://gitlab.stud.idi.ntnu.no/idatt2106-2024-07/frontend

90018351 · VIktorGrev · 71b4691d · 22aa1fb5 · 90018351 · 90018351
Commit 90018351 authored 11 months ago by VIktorGrev
--- a/src/api/services/AuthenticationService.ts
+++ b/src/api/services/AuthenticationService.ts
@@ -9,6 +9,28 @@ import type { CancelablePromise } from '../core/CancelablePromise';
 import { OpenAPI } from '../core/OpenAPI';
 import { request as __request } from '../core/request';
 export class AuthenticationService {
+    /**
+     * Validate email
+     * Check that the given email is valid
+     * @returns any Email is valid
+     * @throws ApiError
+     */
+    public static validateEmail({
+        email,
+    }: {
+        email: string,
+    }): CancelablePromise<Record<string, any>> {
+        return __request(OpenAPI, {
+            method: 'POST',
+            url: '/api/auth/valid-email/{email}',
+            path: {
+                'email': email,
+            },
+            errors: {
+                409: `Email already exists`,
+            },
+        });
+    }
    /**
     * User Signup
     * Sign up a new user

--- a/src/assets/icons/piggybank.svg
+++ b/src/assets/icons/piggybank.svg
+<svg id="Graphic_Elements" data-name="Graphic Elements" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1200"><defs><style>.cls-1{fill:#faa;}.cls-2{fill:#7f3f3f;}.cls-3{fill:#ff8080;}.cls-4{fill:#f66;}</style></defs><g id="g4153"><path id="path4144" class="cls-1" d="M262.4,166.6a139.75,139.75,0,0,0-43,6.51c21.5,31.23,31.18,70.79,24.87,108.24-46.87,35.34-87.1,80.08-114.33,132.29-15.23-1.68-31.67-2-45.68,5.2C65.24,427.71,51.94,447.19,50,468Q50,562,50,656c.48,31.72,29.75,59.39,61.43,58.11,7.73.77,15.62-.89,23.11-1.25,13.66,23.92,29.51,46.79,48.06,67.13C231,834.5,294.13,874.8,361.77,901.24c-1.7,19.19-.87,39.41-.51,59,3.07,37,34.55,68.89,71.42,72.61,39.47,5.15,79.17-23.53,87.54-62.22,2.89-10.93,2.14-22.31,2.29-33.48,36.7,2.63,73.54,1.35,110.14-2.23.3,10.22-.71,20.52,1,30.65,5.33,34.25,34.78,62.81,69.19,67.07,30.38,4.29,62-10.84,78.36-36.69a83.25,83.25,0,0,0,13.07-46.14c-.27-19.18,1.22-38.69-2.92-57.54,73.33-32.61,140.47-82.62,186.39-149.16,45.16-64.12,67.14-144.81,57-222.9,23.83,1.63,48.88-2.3,69.25-15.31,16-9.89,28.09-25.26,35.41-42.42,8.37-20.38,13-43,9.35-64.9-2.59-16.5-10.57-32.36-23.17-43.45-21.8-19.7-56.23-26.39-82.71-12.36-17.69,9-26.57,31-21.53,49.93,2.17,2.63,4.61,6.21,7.68,7.4,4.92-7.4,8.46-16.07,15.7-21.63,7.35-6.26,17.09-11.74,27.1-9.49,7.86,2.1,13.37,8.9,16.23,16.22,6.08,16,5.07,35.28-4.17,49.94-7,11.73-21.41,17.67-34.69,15.74-13.62-1.27-26.24-7.32-37.71-14.41A359.14,359.14,0,0,0,937.55,326.3c-51.08-53.2-116.54-91.82-186.09-116-120.71-41.59-255.37-40.93-375.81,1.37-1.79.23-3.67,2.13-5.51,1.41-27.41-29.67-67.57-46.36-107.74-46.5Z"/><path id="path6" class="cls-2" d="M556.53,240.31c64.08-1.31,128.63,10,188.05,34.26,1.38,13.17.11,27,.45,40.34-1.6,0-3-1.2-4.47-1.74C643.32,268.58,529.21,264.24,428,297.86c-1.05-11.42-.15-23.1-.45-34.61.48-1.37-.52-3.84,1.9-3.73,41.21-12.23,84.18-18.36,127.1-19.21Z"/><path id="path8" class="cls-3" d="M937.55,326.3a359.53,359.53,0,0,1,73.94,109.12c11.46,7.08,24.08,13.14,37.71,14.41,13.29,1.93,27.74-4,34.7-15.74,9.2-14.66,10.24-33.91,4.17-49.94-2.87-7.32-8.38-14.13-16.23-16.22-10-2.25-19.77,3.23-27.11,9.49-7.22,5.56-10.79,14.23-15.71,21.63-3.09-1.19-5.51-4.77-7.67-7.4-5.06-18.94,3.84-40.88,21.52-49.93,26.47-14,60.91-7.34,82.73,12.36,12.58,11.09,20.55,26.95,23.15,43.45,3.62,21.94-1,44.52-9.38,64.9C1132.08,479.6,1120,495,1104,504.84c-20.4,13-45.42,16.95-69.24,15.33,10.08,78.09-11.88,158.77-57,222.88-45.91,66.56-113,116.56-186.38,149.18,4.17,18.84,2.68,38.34,2.91,57.52a82.9,82.9,0,0,1-13.07,46.13c-16.31,25.87-48,41-78.37,36.74-34.36-4.28-63.85-32.87-69.17-67.12-1.68-10.13-.67-20.41-1-30.64-36.6,3.57-73.45,4.87-110.13,2.23-.11,11.17.6,22.56-2.27,33.51-8.37,38.64-48.1,67.35-87.53,62.21-36.9-3.76-68.37-35.67-71.44-72.64-.36-19.51-1.21-39.76.51-58.93C294.13,874.8,231,834.48,182.6,779.94c80,36,169.69,47.88,256.62,38.91,84.74-8.42,167.42-34.93,241.85-76.1,47.5-26.51,92-58.9,130.3-97.55,42.89-42.88,78.75-93.52,101.27-150,21.56-53.25,30.45-111.63,24.91-168.86Z"/><path id="path10" class="cls-4" d="M243.11,388.83c6.81-1.09,10.71,6.37,13,11.6,7,18.92,7.47,39.87,4.16,59.61-2,9-4.24,19-11.79,25.07-5.12,3.34-10.85-1.29-13.13-5.84-7.32-12.87-8.05-28.15-8.86-42.56.53-12.76,1.71-25.88,7-37.67C235.59,394.88,238.22,390,243.11,388.83Z"/></g></svg>
\ No newline at end of file
--- a/src/components/SavingGoalComponents/SavingGoal.vue
+++ b/src/components/SavingGoalComponents/SavingGoal.vue
@@ -20,7 +20,7 @@ export default {
      if (timelineElement instanceof HTMLElement) {
        // Calculate the max-height based on the height of the timeline
        const timelineHeight = timelineElement.offsetHeight;
-        this.bluePanelMaxHeight = `${timelineHeight*1.25}px`;
+        this.bluePanelMaxHeight = `${timelineHeight*1.55}px`;
      } else {
        this.bluePanelMaxHeight = '700px';
      }
@@ -41,7 +41,7 @@ export default {
      <div class="col-lg-4 blue-background overflow-auto" :style="{ 'max-height': bluePanelMaxHeight }">
        <h3 style="color: white; margin-bottom: 16px">Your saving goals</h3>
        <div>
-          <button class="btn btn-light" style="font-weight: 600; margin-bottom: 20px" @click="createGoal">Create new saving goal</button>
+          <button class="btn btn-success btn-lg" style="font-weight: 600; margin-bottom: 20px" @click="createGoal">Create new saving goal</button>
        </div>
        <saving-goal-list @goToSavingGoal="goToSavingGoal"></saving-goal-list>
      </div>

--- a/src/components/SavingGoalComponents/SavingGoalCreate.vue
+++ b/src/components/SavingGoalComponents/SavingGoalCreate.vue
@@ -19,10 +19,9 @@
    </div>

    <!--Change this to date picker?-->
-    <p>How long should this saving goal last: </p>
+    <p>When should this saving goal end?:</p>
    <div class="input-group mb-3">
-      <input type="text" class="form-control" aria-label="Amount of days" placeholder="Amount of days (as number)">
-      <span class="input-group-text">Days</span>
+      <input type="date" class="form-control" aria-label="Amount of days" placeholder="Amount of days (as number)">
    </div>

    <p>How much do you want to save during this saving goal: </p>

--- a/src/components/SavingGoalComponents/SavingGoalList.vue
+++ b/src/components/SavingGoalComponents/SavingGoalList.vue
@@ -2,7 +2,7 @@
 import {ref} from "vue";

 const savingGoalList = ref([
-  { title: 'Spain trip', MoneyTarget: '200kr', description: 'You wanted to save 200kr on a spain trip' },
+  { title: 'Spain trip', MoneyTarget: '200kr', description: 'You wanted to save 200kr for a spain trip' },
  { title: 'Italy Escapade', MoneyTarget: '200kr', description: 'Experience the magic of Italy with us! Our goal is to save 200kr for an amazing trip to Italy.' },
  { title: 'French Getaway', MoneyTarget: '200kr', description: 'Join us as we plan to save 200kr for a delightful trip to France!' },
  { title: 'Exploring Greece', MoneyTarget: '200kr', description: 'Dreaming of Greece? Lets work together to save 200kr for that unforgettable trip!' },
@@ -17,6 +17,10 @@ const emits = defineEmits(['goToSavingGoal']);
 const goToSavingGoal = () => {
  emits('goToSavingGoal');
 };
+
+const deleteSavingGoal = () => {
+
+};
 </script>

 <template>
@@ -28,6 +32,7 @@ const goToSavingGoal = () => {
      <h5 class="card-title">{{ savingGoal.title }}</h5>
      <p class="card-text">{{ savingGoal.description }}</p>
      <a href="#" class="btn btn-light" @click="goToSavingGoal">Go to saving goal</a>
+      <a href="#" class="btn btn-danger" @click="deleteSavingGoal" style="margin-left: 8px">Delete</a>
    </div>
  </div>
 </template>

--- a/src/components/SavingGoalComponents/SavingGoalRoadmap.vue
+++ b/src/components/SavingGoalComponents/SavingGoalRoadmap.vue
@@ -23,17 +23,31 @@ export default {
      bluePanelMaxHeight: 'auto' as string
    };
  },
+  mounted() {
+    this.togglePanel(this.steps[2]);
+  },
  methods: {
    togglePanel(step: Step) {
      if (step.showPanel) {
-        // If the clicked panel is already open, close it
        step.showPanel = false;
      } else {
-        //Close all panels before opening new one
-        //Ensure only one panel open at a time
        this.steps.forEach((s) => (s.showPanel = false));
-        //Open clicked on panel
        step.showPanel = true;
+        this.scrollToPanel(step);
+      }
+    },
+    scrollToPanel(step: Step) {
+      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
+          }
+        });
      }
    },
  },
@@ -45,10 +59,10 @@ export default {
    <div class="SavingGoalTitle text-center">{{title}}</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="">
-        </div>
-        <div class="timeline-panel z-3" v-show="step.showPanel">
+          <div class="timeline-image z-1" @click="togglePanel(step)">
+            <img class="circular-image" :src="step.showPanel ? altImage : image" alt="">
+          </div>
+        <div class="timeline-panel z-3" :id="'panel-' + index" v-show="step.showPanel">
          <div class="timeline-heading">
            <h4>{{ step.title }}</h4>
            <h4 class="subheading">{{step.description}}</h4>
@@ -83,15 +97,17 @@ export default {
 .col-lg-8 {
  width: 63%;
  margin-bottom: 20px;
+  max-height: 1000px;
 }

 .SavingGoalTitle {
  font-weight: 600;
  font-size: 45px;
+  margin-top: 20px;
  margin-bottom:40px;
  padding-bottom: 10px;
  color: white;
-  border-radius: 0 0 1em 1em;
+  border-radius: 1em;
  background-color: #0A58CA;
 }


--- a/src/components/UserProfile/UserProfileLayout.vue
+++ b/src/components/UserProfile/UserProfileLayout.vue
@@ -2,9 +2,19 @@

 import Menu from "@/components/BaseComponents/Menu.vue";
 import Footer from "@/components/BaseComponents/Footer.vue";
+import {useRouter} from "vue-router";
+
+let numberOfHistory = 6;
+
+let cardTitles = ["Spain tour", "Food waste", "Coffee", "Concert", "New book", "Pretty clothes"]

 let points = 0;
 let streak = 0;
+
+let route = useRouter()
+function toRoadmap(){
+  route.push('/roadmap')
+}
 </script>

 <template>
@@ -40,12 +50,73 @@ let streak = 0;
    </div>
    <div class="row">
      <div class="col">
-        History
+        <!-- Here is the badges of the user -->
+        <div class="container-fluid">
+          <h1 class="mt-5 text-start badges-text">Badges</h1>
+          <div class="scrolling-wrapper-badges row flex-row flex-nowrap mt-4 pb-4 pt-2">
+
+            <div class="col-5">
+              <div class="card badges-block card-1"></div>
+            </div>
+            <div class="col-5">
+              <div class="card badges-block card-2"></div>
+            </div>
+            <div class="col-5">
+              <div class="card badges-block card-3"></div>
+            </div>
+            <div class="col-5">
+              <div class="card badges-block card-4"></div>
+            </div>
+            <div class="col-5">
+              <div class="card badges-block card-5"></div>
+            </div>
+            <div class="col-5">
+              <div class="card badges-block card-6"></div>
+            </div>
+            <div class="col-5">
+              <div class="card badges-block card-7"></div>
+            </div>
+            <div class="col-5">
+              <div class="card badges-block card-8"></div>
+            </div>
+            <div class="col-5">
+              <div class="card badges-block card-9"></div>
+            </div>
+            <div class="col-5">
+              <div class="card badges-block card-10"></div>
+            </div>
+          </div>
+        </div>
      </div>
    </div>
    <div class="row">
      <div class="col">
-        Your Badges
+        <!-- Here is the history of saving target -->
+        <div class="container-fluid mb-5">
+          <h1 class="mt-5 text-start history-text">History</h1>
+          <div class="row scrolling-wrapper-history">
+            <div v-for="index in numberOfHistory" :key="index" class="col-md-4 col-sm-4 col-lg-4 col-xs-4 col-xl-4 control-label">
+              <div class="card history-block" >
+                <div class="card mb-3" style="max-width: 540px;">
+                  <div class="row g-0">
+                    <div class="col-md-4">
+                      <img src="/src/assets/icons/piggybank.svg" class="img-fluid rounded-start h-40 mx-auto d-none d-md-block" alt="...">
+                    </div>
+                    <div class="col-md-8">
+                      <div class="card-body">
+                        <h5 class="card-title">{{cardTitles[index-1]}}</h5>
+                        <p class="card-text">Money saved: 200 <br/>You are one challenge: 21</p>
+                        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+                        <a href="#" class="btn  stretched-link" @click="toRoadmap"></a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </div>
      </div>
    </div>
  </div>
@@ -53,5 +124,107 @@ let streak = 0;
 </template>

 <style scoped>
+.scrolling-wrapper-badges{
+  overflow-x: auto;
+}
+
+.scrolling-wrapper-history{
+  max-height: 300px;
+  overflow: auto;
+}
+
+
+
+.badges-text{
+  font-weight: 500;
+  font-size: 2.0em;
+}
+
+.history-text{
+  font-weight: 500;
+  font-size: 2.0em;
+}
+
+.badges-block{
+  height: 200px;
+  background-color: #fff;
+  border: none;
+  background-position: center;
+  background-size: cover;
+  transition: all 0.2s ease-in-out !important;
+  border-radius: 24px;
+  &:hover{
+    transform: translateY(-5px);
+    box-shadow: none;
+    opacity: 0.9;
+  }
+}
+
+.history-block{
+  height: 200px;
+
+  background-color: #fff;
+  border: none;
+  background-position: center;
+  background-size: cover;
+  transition: all 0.2s ease-in-out !important;
+  border-radius: 24px;
+  margin: 20px;
+  &:hover{
+    transform: translateY(-5px);
+    box-shadow: none;
+    opacity: 0.9;
+  }
+}
+
+.card-1{
+  background-color: #4158D0;
+  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
+}
+
+.card-2{
+  background-color: #0093E9;
+  background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
+}
+
+.card-3{
+  background-color: #00DBDE;
+  background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
+}
+
+.card-4{
+  background-color: #FBAB7E;
+  background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
+}
+
+.card-5{
+  background-color: #85FFBD;
+  background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
+}
+
+.card-6{
+  background-color: #FA8BFF;
+  background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
+}
+
+.card-7{
+  background-color: #FA8BFF;
+  background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
+}
+
+.card-8{
+  background-color: #FBDA61;
+  background-image: linear-gradient(45deg, #FBDA61 0%, #FF5ACD 100%);
+}
+
+.card-9{
+  background-color: #4158D0;
+  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
+}
+
+.card-10{
+  background-color: #FF3CAC;
+  background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);

+}
 </style>
\ No newline at end of file