Skip to content
Snippets Groups Projects
Commit 642daa81 authored by VIktorGrev's avatar VIktorGrev
Browse files

feat: Adding margin

parent a9d0c333
No related branches found
No related tags found
1 merge request!106Feat/profile and settings improvements
Pipeline #285515 passed with warnings
Stage: install
Stage: build
Stage: test
Stage: lint
Stage: docker_build_and_push
Stage: deploy_docker
Hide whitespace changes
Inline Side-by-side
src/components/SavingGoal/SavingGoal.vue
+ 7
− 0
View file @ 642daa81
......@@ -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;
......
src/components/Settings/SettingsAccount.vue
+ 96
− 122
View file @ 642daa81
<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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment