<script lang="ts" setup>
import authInterceptor from '@/services/authInterceptor'
import { computed, onMounted, ref } from 'vue'
import type { Profile } from '@/types/profile'
import CardTemplate from '@/components/CardTemplate.vue'
import router from '@/router'
import ToolTip from '@/components/ToolTip.vue'
import InteractiveSpare from '@/components/InteractiveSpare.vue'
const profile = ref<Profile>({
id: 0,
firstName: '',
lastName: '',
email: '',
username: '',
password: '',
spendingAccount: {
accNumber: undefined,
balance: 0
},
savingAccount: {
accNumber: undefined,
balance: 0
}
})
const updatePassword = ref<boolean>(false)
const confirmPassword = ref<string>('')
const errorMessage = ref<string>('')
const isModalOpen = ref(false)
const image = ref<File>()
const nameRegex = /^[æÆøØåÅa-zA-Z,.'-][æÆøØåÅa-zA-Z ,.'-]{0,29}$/
const emailRegex =
/^[æÆøØåÅa-zA-Z0-9_+&*-]+(?:\.[æÆøØåÅa-zA-Z0-9_+&*-]+)*@(?:[æÆøØåÅa-zA-Z0-9-]+\.)+[æÆøØåÅa-zA-Z]{2,7}$/
const passwordRegex = /^(?=.*[0-9])(?=.*[a-zæøå])(?=.*[ÆØÅA-Z])(?=.*[@#$%^&+=!])(?=\S+$).{8,30}$/
const accountNumberRegex = /^\d{11}$/
const MAX_DIGITS = 11
function restrictToNumbers(event: InputEvent, type: string) {
const inputValue = (event.target as HTMLInputElement)?.value
if (inputValue !== undefined) {
const sanitizedValue = inputValue.replace(/\D/g, '')
const truncatedValue = sanitizedValue.slice(0, MAX_DIGITS)
if (type === 'spending') {
profile.value.spendingAccount.accNumber = parseInt(truncatedValue)
} else {
profile.value.savingAccount.accNumber = parseInt(truncatedValue)
}
}
}
const isFirstNameValid = computed(
() => nameRegex.test(profile.value.firstName) && profile.value.firstName
)
const isLastNameValid = computed(
() => nameRegex.test(profile.value.lastName) && profile.value.lastName
)
const isEmailValid = computed(() => emailRegex.test(profile.value.email))
const isPasswordValid = computed(() => passwordRegex.test(profile.value.password || ''))
const isSpendingAccountValid = computed(() =>
accountNumberRegex.test(profile.value.spendingAccount.accNumber?.toString() || '')
)
const isSavingAccountValid = computed(() =>
accountNumberRegex.test(profile.value.savingAccount.accNumber?.toString() || '')
)
const isFormInvalid = computed(
() =>
[
isFirstNameValid,
isLastNameValid,
isEmailValid,
isSpendingAccountValid,
isSavingAccountValid
].some((v) => !v.value) ||
(updatePassword.value
? profile.value.password !== confirmPassword.value || profile.value.password === ''
: false)
)
onMounted(async () => {
await authInterceptor('/profile')
.then((response) => {
profile.value = response.data
})
.catch((error) => {
console.error(error)
})
})
const selectImage = async () => {
const fileInput = document.getElementById('fileInput')! as HTMLInputElement
if (!fileInput) {
// Error handling
console.log('Vi klarte ikke å hente bildene dine. Prøv igjen!')
}
if (!fileInput.files) {
return
}
image.value = fileInput.files[0]
}
const uploadImage = async () => {
// bildet må lastes opp som en form. altså en body med form
// const formData = new FormData()
// authInterceptor.post("/profile/picture", formData)
}
const saveChanges = async () => {
if (isFormInvalid.value) {
errorMessage.value = 'Vennligst fyll ut alle feltene riktig'
return
}
if (!updatePassword.value) {
delete profile.value.password
}
await authInterceptor
.put('/profile', profile.value)
.then(() => {
router.back()
})
.catch((error) => {
errorMessage.value = error.response.data.message
})
}
</script>
<template>
<div class="w-full flex px-10 justify-center">
<div class="flex flex-row flex-wrap justify-center w-full max-w-screen-xl gap-20">
<div class="flex flex-col max-w-96 w-full gap-5">
<h1>Rediger profil</h1>
<div class="w-full flex flex-row gap-5 justify-between justify-items-end">
<div class="flex flex-col justify-center">
<button class="h-min bg-transparent text-4xl" v-text="'⬅️'" />
</div>
<div class="w-32 h-32 border-stale-200 border-2 rounded-full shrink-0" />
<div class="flex flex-col justify-center">
<button class="h-min bg-transparent text-4xl" v-text="'➡️'" />
</div>
</div>
<div class="flex flex-row justify-center">
<input
id="fileInput"
type="file"
style="display: none"
accept=".jpg, .jpeg, .png, .gif, .img"
/>
<button v-text="'Velg eget bilde!'" @click="selectImage()" />
<button v-text="'Send bilde'" @click="uploadImage()" />
</div>
<div class="flex flex-col">
<div class="flex flex-row justify-between mx-4">
<p>Fornavn*</p>
<ToolTip
:message="'Must include only letters, spaces, commas, apostrophes, periods, and hyphens. 1-30 characters long'"
/>
</div>
<input
v-model="profile.firstName"
name="firstName"
placeholder="Skriv inn fornavn"
type="text"
/>
</div>
<div class="flex flex-col">
<div class="flex flex-row justify-between mx-4">
<p>Etternavn*</p>
<ToolTip
:message="'Must include only letters, spaces, commas, apostrophes, periods, and hyphens. 1-30 characters long'"
/>
</div>
<input
v-model="profile.lastName"
name="lastName"
placeholder="Skriv inn etternavn"
type="text"
/>
</div>
<div class="flex flex-col">
<div class="flex flex-row justify-between mx-4">
<p>E-post*</p>
<ToolTip
:message="'Valid email: Starts with Norwegian letters, numbers, or special characters. Includes \@\ followed by a domain. Ends with 2-7 letters.'"
/>
</div>
<input
v-model="profile.email"
name="email"
placeholder="Skriv inn e-post"
type="text"
/>
</div>
<div class="flex flex-col">
<div class="flex flex-row justify-between mx-4">
<div class="flex flex-row gap-2">
<p>Endre passord</p>
<input v-model="updatePassword" type="checkbox" />
</div>
<ToolTip
v-if="updatePassword"
:message="'Must be at least 8 characters, including at least one number, one lowercase letter, one uppercase letter, one special character (@#$%^&+=!), and no spaces.'"
/>
</div>
<input
v-if="updatePassword"
v-model="profile.password"
class="w-full"
name="password"
placeholder="Skriv inn passord"
/>
<input
v-if="updatePassword"
v-model="confirmPassword"
class="mt-2"
name="confirm"
placeholder="Bekreft passord"
type="password"
/>
</div>
<p v-if="errorMessage" class="text-red-500" v-text="errorMessage" />
</div>
<div class="flex flex-col justify-end max-w-96 w-full gap-5">
<InteractiveSpare
:png-size="10"
:speech="['Her kan du endre på profilen din!']"
direction="left"
:isModalOpen="isModalOpen"
/>
<p class="font-bold">Endre kontonummer:</p>
<CardTemplate>
<div class="bg-red-100">
<p class="font-bold mx-3" v-text="'Brukskonto'" />
</div>
<input
@input="restrictToNumbers($event as InputEvent, 'spending')"
v-model="profile.spendingAccount.accNumber"
class="border-transparent rounded-none rounded-b-xl w-full"
placeholder="Kontonummer"
type="number"
/>
</CardTemplate>
<CardTemplate>
<div class="bg-red-100">
<p class="font-bold mx-3" v-text="'Sparekonto'" />
</div>
<input
@input="restrictToNumbers($event as InputEvent, 'saving')"
v-model="profile.savingAccount.accNumber"
class="border-transparent rounded-none rounded-b-xl w-full"
placeholder="Kontonummer"
type="number"
/>
</CardTemplate>
<div class="flex flex-row justify-between">
<button class="primary danger" @click="router.back()" v-text="'Avbryt'" />
<button class="primary" @click="saveChanges" v-text="'Lagre endringer'" />
</div>
</div>
</div>
</div>
</template>