From b6ab096d61570b7de82492e6314dd822baa05ac0 Mon Sep 17 00:00:00 2001
From: Ingrid <ingridmegge@gmail.com>
Date: Fri, 21 Apr 2023 07:30:07 +0200
Subject: [PATCH] flere seksjoner lagt inn. Endring i css
---
src/views/ProfileSettings.vue | 128 +++++++++++++++++++++++++++-------
1 file changed, 104 insertions(+), 24 deletions(-)
diff --git a/src/views/ProfileSettings.vue b/src/views/ProfileSettings.vue
index 73f7a55..ed13416 100644
--- a/src/views/ProfileSettings.vue
+++ b/src/views/ProfileSettings.vue
@@ -1,37 +1,38 @@
<template>
<main>
- <h1>Profilinnstillinger</h1>
+ <h1><br><br>Profilinnstillinger <br></h1>
<div id = "profilepicture">
- <Icon icon="material-symbols:person" :color=iconColor :style="{ fontSize: '30px'}" />
+ <Icon icon="material-symbols:person" :color=iconColor :style="{ fontSize: '500px'}" />
</div>
+
+ <h2>Petter</h2>
<button id="changeUserBtn">Bytt bruker</button>
<form @submit.prevent="submit">
- <label for="brukernavn">Navn</label><br>
+ <label for="brukernavn">Profilnavn</label><br>
<input type="text" required><br>
-
- <h3>Brukertype</h3>
+ <br>
+ <h4>Brukertype</h4>
<input type="radio" id="normal" name="userType" value="normal">
- <label for="normal">Vanlig</label><br>
+ <label for="normal"> Standard</label><br>
<input type="radio" id="restricted" name="userType" value="restricted">
- <label for="restricted">Begrenset - Kan ikke redigere ukeplan eller handleliste</label><br>
+ <label for="restricted"> Begrenset - Kan ikke redigere ukeplan eller handleliste</label><br>
<br>
<h3>Profilbilde</h3>
<div id="changeUserImage">
<div id = "profilepicture">
<Icon icon="material-symbols:person" :color=iconColor :style="{ fontSize: '30px'}" />
- <img src="#" alt="profile picture">
</div>
<button>Endre bilde</button>
</div>
<div id = "submitbuttonBox">
- <button>Lagre brukerinnstillinger</button>
- <button>Slett brukerprofil</button>
+ <button class="saveBtn" @click="saveUserSettings" >Lagre brukerinnstillinger</button>
+ <button class="delBtn" @click="deleteUser">Slett brukerprofil</button>
</div>
</form>
@@ -40,39 +41,58 @@
<form @submit.prevent="submit">
- <h2>Matpreferanser</h2>
+ <h2>-Matpreferanser-</h2>
+ <p class ="infoText">Hvis huket av, så vil du kun få oppskrifter av disse typene:</p>
+
<input type="checkbox" id="vegetar" name="vegetar" value="vegetar">
<label for="vegetar"> vegetar </label><br>
<input type="checkbox" id="vegan" name="vegan" value="vegan">
- <label for="vegetar"> vegan </label><br>
+ <label for="vegan"> vegan </label><br>
<br>
- <h3>Allergener</h3>
+ <h2>-Allergener-</h2>
+
+ <p class ="infoText">Du vil ikke få forslag om oppskrifter med disse varene:</p>
+
<input type="checkbox" id="gluten" name="gluten" value="Gluten">
- <label for="vehicle1"> gluten</label><br>
+ <label for="allergen"> gluten</label><br>
<input type="checkbox" id="nøtter" name="nøtter" value="nøtter">
- <label for="vehicle1">nøtter</label><br>
-
- <button>Lagre Appinnstillinger</button>
+ <label for="allergen"> nøtter</label><br>
+ <input type="checkbox" id="melk" name="melk" value="melk">
+ <label for="allergen"> melk</label><br>
+ <button class="saveBtn" @click="saveFoodPreference">Lagre matpreferanser <br> og allergener</button>
</form>
<h1>Konto-innstillinger</h1>
<form @submit.prevent="submit">
+ <p class="infoText">OBS: Ved å endre epost endrer du også brukernavnet ditt</p>
+
<label for="email">Epost</label><br>
<input type="text" id="email">
<label for="password">Passord</label><br>
<input type="password" id="password">
- <button>Lagre Appinnstillinger</button>
+ <button class="saveBtn" @click="saveAccountSettings">Lagre kontoinnstillinger</button>
- </form>
+ </form>
+ <br>
+ <br>
+ <hr>
- </main>
+ <form @submit.prevent="submit" id = "dangerZone">
+ <h1>🔺FARESONE🔺</h1>
+ <p class="infoText">Ved å trykke på knappen nedenfor, vil du slette din SmartMat-konto</p>
+ <input type="checkbox" id="melk" name="melk" value="melk">
+ <label for="allergen"> Jeg bekrefter jeg skjønner dette, og ønsker å slette kontoen min SmartMat-konto for alltid.</label><br>
+ <button class="delBtn" @click="deleteAccount">SLETT KONTO</button>
+ </form>
+ <br><br><br>
+ </main>
</template>
<script>
@@ -86,22 +106,61 @@ export default {
iconColor() {
return "#000000"
}
+ },
+ methods: {
+ saveUserSettings(){
+ alert("(Denne knappen gjør ingen ting) brukerinnstillinger lagret!")
+ },
+ saveAccountSettings(){
+ alert("(Denne knappen gjør ingen ting) konto oppdatert")
+ },
+ deleteAccount(){
+ alert("(Denne knappen gjør ingen ting) men account deleted")
+ },
+ deleteUser(){
+ alert("(Denne knappen gjør ingen ting) bruker slettet")
+ },
+ saveFoodPreference() {
+ alert("(Denne knappen gjør ingen ting) matpreferanser lagret")
+ }
}
}
</script>
<style scoped lang ="scss">
+#dangerZone {
+ color: white;
+ color: darkred;
+ qwidth: 100%;
+}
+
#profilepicture {
+ display:flex;
border-radius:50%;
- width:50px;
+ width:100px;
+ height: 100px;
background-color: white;
- border: 2px solid black;
+ justify-content: center;
+ align-items: center;
+ border: 3px solid base.$grey;
}
#changeUserImage {
display:flex;
}
+#changeUserImage #profilepicture {
+ width: 50px;
+ height: 50px;
+}
+
+.infoText {
+ background-color: white;
+ padding: .5em;
+ margin: .4em;
+}
+
+
form {
background-color: base.$grey;
color: black;
@@ -126,12 +185,32 @@ input[type="password"]{
button {
background-color: base.$red;
color: black;
+
border: 1px solid black;
+
margin: 1em;
}
+
+button:hover{
+ background-color: #282828;
+
+}
+
+.saveBtn, .delBtn {
+ background-color: base.$green;
+ color: white;
+ font-weight: bold;
+ padding:.9em;
+ border:none;
+}
+
+.delBtn {
+ background-color: darkred;
+}
+
#changeUserBtn {
padding:.9em;
- padding-right: 1.5em;
+
}
main {
@@ -141,8 +220,9 @@ main {
justify-content: center;
align-items: center;
flex-direction: column;
- width: 90%;
+ width: 100%;
text-align: left;
+ left:0;
}
--
GitLab