diff --git a/src/components/SavingGoal/SavingGoal.vue b/src/components/SavingGoal/SavingGoal.vue
index 0ae8f52b788036ee227a3446f0d9050561e938f6..25eb2023c1dfe4c0ff763b451fbb5e3b7f384ed9 100644
--- a/src/components/SavingGoal/SavingGoal.vue
+++ b/src/components/SavingGoal/SavingGoal.vue
@@ -101,10 +101,17 @@ export default {
.cont {
padding-left: 10px;
margin: 0;
+ margin-left: -140px;
width: 98%;
box-sizing: unset;
}
+@media (max-width: 768px) {
+ .cont {
+ margin-left: -20px;
+ }
+}
+
.blue-background {
margin-top: 20px;
margin-bottom: 20px;
diff --git a/src/components/Settings/SettingsAccount.vue b/src/components/Settings/SettingsAccount.vue
index 01afa603eab5098ecdabfe53d457df192ae9f061..0ca65c2edea89d6274089e7de0d0d26f84fc1afc 100644
--- a/src/components/Settings/SettingsAccount.vue
+++ b/src/components/Settings/SettingsAccount.vue
@@ -1,28 +1,29 @@
<script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted } from 'vue'
import BaseInput from '@/components/BaseComponents/Input/BaseInput.vue';
import { useUserInfoStore } from "@/stores/UserStore";
-import { type UserDTO, UserService } from '@/api'
+import { UserService } from '@/api'
import type { UserUpdateDTO } from '@/api';
import handleUnknownError from '@/components/Exceptions/unkownErrorHandler';
import router from '@/router'
-import SuitableChallenges from '@/components/Configuration/ConfigurationSteps/SuitableChallenges.vue'
-const emailRef = ref('')
-const errorMsg = ref('')
-const errorMsg3 = ref('')
-const confirmationMsg = ref('')
-const confirmationMsg2 = ref('')
-const errorMsg2 = ref('')
-const commitmentRef = ref('MUCH')
-const challengesRef = ref<any>([])
+const emailRef = ref('');
+const errorMsg = ref('');
+const errorMsg3 = ref('');
+const confirmationMsg = ref('');
+const confirmationMsg2 = ref('');
+const errorMsg2 = ref('');
+const commitmentRef = ref('MUCH');
+const challengesRef = ref<any>([]);
// Represents a list of available challenges.
-const challenges: string[] = ['NO_COFFEE' , 'NO_CAR' , 'SHORTER_SHOWER' , 'SPEND_LESS_ON_FOOD' , 'BUY_USED_CLOTHES' , 'LESS_SHOPPING' , 'DROP_SUBSCRIPTION' , 'SELL_SOMETHING' , 'BUY_USED' , 'EAT_PACKED_LUNCH' , 'STOP_SHOPPING' , 'ZERO_SPENDING' , 'RENT_YOUR_STUFF' , 'MEATLESS' , 'SCREEN_TIME_LIMIT' , 'UNPLUGGED_ENTERTAINMENT']
+const challenges: string[] = [
+ 'NO_COFFEE', 'NO_CAR', 'SHORTER_SHOWER', 'SPEND_LESS_ON_FOOD',
+ 'BUY_USED_CLOTHES', 'LESS_SHOPPING', 'DROP_SUBSCRIPTION', 'SELL_SOMETHING',
+ 'BUY_USED', 'EAT_PACKED_LUNCH', 'STOP_SHOPPING', 'ZERO_SPENDING',
+ 'RENT_YOUR_STUFF', 'MEATLESS', 'SCREEN_TIME_LIMIT', 'UNPLUGGED_ENTERTAINMENT'
+];
-/**
- * Mapping between challenge enum and norwegian translation.
- */
const challengeMapper: any = {
"NO_COFFEE": "Droppe kaffe",
"NO_CAR": "Droppe bil",
@@ -40,42 +41,32 @@ const challengeMapper: any = {
"MEATLESS": "Kjøttfritt",
"SCREEN_TIME_LIMIT": "Skjerm tidsgrense",
"UNPLUGGED_ENTERTAINMENT": "Strømløs underholdning"
-}
+};
-/**
- * Handles the email input event by updating the email reference value.
- *
- * @param {any} newValue - The new value of the email input.
- */
const handleEmailInputEvent = (newValue: any) => {
- emailRef.value = newValue
-}
+ emailRef.value = newValue;
+};
-/**
- * Sets up the form by fetching user data and populating the email field if available.
- * Clears confirmation and error messages.
- * Handles errors by displaying a generic error message and updating the error message field.
- */
async function setupForm() {
try {
- let response: any = await UserService.getUser();
+ const response: any = await UserService.getUser();
+ console.log(response);
if (response.configuration) {
commitmentRef.value = response.configuration.commitment;
challengesRef.value = response.configuration.challengeTypes;
}
if (response.email != null) {
- emailRef.value = response.email
+ emailRef.value = response.email;
}
confirmationMsg.value = '';
errorMsg.value = '';
} catch (err) {
errorMsg.value = handleUnknownError(err);
- confirmationMsg.value = ''
+ confirmationMsg.value = '';
}
}
const handleSubmitConfig = async () => {
- // Construct payload for updating user email
const updateUserPayload: UserUpdateDTO = {
configuration: {
commitment: commitmentRef.value,
@@ -83,133 +74,116 @@ const handleSubmitConfig = async () => {
}
};
try {
- // Send request to update user email
- UserService.update({ requestBody: updateUserPayload })
- confirmationMsg2.value = 'Oppdatert!'
+ await UserService.update({ requestBody: updateUserPayload });
+ confirmationMsg2.value = 'Oppdatert!';
errorMsg3.value = '';
} catch (err) {
errorMsg3.value = handleUnknownError(err);
- confirmationMsg2.value = ''
+ confirmationMsg2.value = '';
}
-}
+};
-/**
- * Handles form submission by updating the user's email.
- * Updates the confirmation message upon successful email update.
- * Handles errors and updates the error message accordingly.
- */
const handleSubmit = async () => {
- // Construct payload for updating user email
const updateUserPayload: UserUpdateDTO = {
email: emailRef.value,
};
try {
- // Send request to update user email
- UserService.update({ requestBody: updateUserPayload })
- // Update user info in the store
+ await UserService.update({ requestBody: updateUserPayload });
useUserInfoStore().setUserInfo({
- email: emailRef.value,
- })
- confirmationMsg.value = 'Email updated successfully!'
+ email: emailRef.value,
+ });
+ confirmationMsg.value = 'Email updated successfully!';
errorMsg.value = '';
} catch (err) {
handleUnknownError(err);
errorMsg.value = "Error updating email, try again!";
- confirmationMsg.value = ''
+ confirmationMsg.value = '';
}
-}
+};
const handleSubmit2 = async () => {
try {
- console.log("test")
- UserService.deleteUser();
- console.log("test")
+ await UserService.deleteUser();
useUserInfoStore().clearUserInfo();
await router.push("/login");
} catch (err) {
errorMsg2.value = handleUnknownError(err);
}
-}
+};
+
onMounted(() => {
- setupForm()
-})
+ setupForm();
+});
-const onChangedChallengeEvent = (value: any) => {
- // if challenge is checked then add it to the chosenChallenges variable
+const onChangedChallengeEvent = (value: string) => {
if (challengesRef.value.includes(value)) {
- challengesRef.value.push(value)
- }
- // if challenge is unchecked then remove it from the chosenChallenges variable
- else {
challengesRef.value = challengesRef.value.filter((item: string) => item !== value);
+ } else {
+ challengesRef.value.push(value);
}
- console.log(challengesRef.value)
-}
-
-const a = computed(() => {
- challengesRef.value.includes()
-})
+};
</script>
+
<template>
<div class="tab-pane active" id="account">
- <h6>KONTO</h6>
- <hr>
- <form @submit.prevent="handleSubmit">
- <div class="form-group">
- <BaseInput data-cy="email-input" :model-value="emailRef"
- @input-change-event="handleEmailInputEvent" id="emailInput-change"
- input-id="email-new" type="email" label="E-post" placeholder="Skriv inn din e-post"
- invalid-message="Ugyldig e-post"/>
- </div>
- <p data-cy="change-email-msg-error" class="text-danger">{{ errorMsg }}</p>
- <p data-cy="change-email-msg-confirm" class="text-success">{{ confirmationMsg }}</p>
- <br>
- <button data-cy="change-email-btn" type="submit" class="btn btn-primary classyButton">Oppdater</button>
- </form>
- <hr>
- <form @submit.prevent="handleSubmitConfig">
- <p>Grad av villighet til å gjøre endringer</p>
- <select v-model="commitmentRef" class="form-select" aria-label="Default select example">
- <option value="LITTLE">Lav</option>
- <option value="SOME">Middels</option>
- <option value="MUCH">Høy</option>
- </select>
- <p>Hvilke utfordringer passer deg?</p>
- <button v-for="challenge in challenges"
- :class="['btn', challengesRef.includes(challenge) ? 'btn-primary' : 'btn-secondary']"
- @click="onChangedChallengeEvent" type="button">
- {{ challengeMapper[challenge] }}
- </button>
- <p data-cy="change-email-msg-error" class="text-danger">{{ errorMsg3 }}</p>
- <p data-cy="change-email-msg-confirm" class="text-success">{{ confirmationMsg2 }}</p>
- <br>
- <button data-cy="change-email-btn" type="submit" class="btn btn-primary classyButton">Oppdater</button>
- </form>
- <form @submit.prevent="handleSubmit2" style="margin-top: 20px;">
- <div class="form-group">
- <label class="d-block text-danger">Slett Bruker</label>
- <p class="text-muted font-size-sm">Obs: Når du først har slettet kontoen din, er det ingen vei tilbake.</p>
- </div>
- <p data-cy="delete-user-msg-error" class="text-danger">{{ errorMsg2 }}</p>
- <button class="btn btn-danger" type="submit">Slett Bruker</button>
- </form>
+ <h6>KONTO</h6>
+ <hr>
+ <form @submit.prevent="handleSubmit">
+ <div class="form-group">
+ <BaseInput data-cy="email-input" :model-value="emailRef" @input-change-event="handleEmailInputEvent"
+ id="emailInput-change" input-id="email-new" type="email" label="E-post" placeholder="Skriv inn din e-post"
+ invalid-message="Ugyldig e-post" />
+ </div>
+ <p data-cy="change-email-msg-error" class="text-danger">{{ errorMsg }}</p>
+ <p data-cy="change-email-msg-confirm" class="text-success">{{ confirmationMsg }}</p>
+ <br>
+ <button data-cy="change-email-btn" type="submit" class="btn btn-primary classyButton">Oppdater</button>
+ </form>
+ <hr>
+ <form @submit.prevent="handleSubmitConfig">
+ <p>Grad av villighet til å gjøre endringer</p>
+ <select v-model="commitmentRef" class="form-select" aria-label="Default select example">
+ <option value="LITTLE">Lav</option>
+ <option value="SOME">Middels</option>
+ <option value="MUCH">Høy</option>
+ </select>
+ <p>Hvilke utfordringer passer deg?</p>
+ <button v-for="challenge in challenges" :key="challenge"
+ :class="['btn', challengesRef.includes(challenge) ? 'btn-primary' : 'btn-secondary']"
+ @click="onChangedChallengeEvent(challenge)" type="button">
+ {{ challengeMapper[challenge] }}
+ </button>
+ <p data-cy="change-email-msg-error" class="text-danger">{{ errorMsg3 }}</p>
+ <p data-cy="change-email-msg-confirm" class="text-success">{{ confirmationMsg2 }}</p>
+ <br>
+ <button data-cy="change-email-btn" type="submit" class="btn btn-primary classyButton">Oppdater</button>
+ </form>
+ <form @submit.prevent="handleSubmit2" style="margin-top: 20px;">
+ <div class="form-group">
+ <label class="d-block text-danger">Slett Bruker</label>
+ <p class="text-muted font-size-sm">Obs: Når du først har slettet kontoen din, er det ingen vei tilbake.</p>
+ </div>
+ <p data-cy="delete-user-msg-error" class="text-danger">{{ errorMsg2 }}</p>
+ <button class="btn btn-danger" type="submit">Slett Bruker</button>
+ </form>
</div>
</template>
+
<style scoped>
- .classyButton {
- background-color: #003A58;
- border: #003A58;
- }
+.classyButton {
+ background-color: #003A58;
+ border: #003A58;
+}
- .classyButton:hover {
- background-color: #003b58ec;
- border: #003A58;
- }
+.classyButton:hover {
+ background-color: #003b58ec;
+ border: #003A58;
+}
- .classyButton:active {
- background-color: #003b58d6;
- border: #003A58;
- }
+.classyButton:active {
+ background-color: #003b58d6;
+ border: #003A58;
+}
</style>