From 801b685f301c90da9a2702e2eb4d8abc85bba952 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakob=20Gr=C3=B8nhaug?= <jakob@gronha.ug>
Date: Fri, 28 Apr 2023 11:21:39 +0200
Subject: [PATCH] Profil-opprettelse (ikke funksjonell)
---
public/profile/default_avatar.png | Bin 0 -> 4126 bytes
src/router/index.js | 6 ++
src/util/API.js | 12 ++-
src/views/ProfileCreationView.vue | 144 ++++++++++++++++++++++++++++++
4 files changed, 160 insertions(+), 2 deletions(-)
create mode 100644 public/profile/default_avatar.png
create mode 100644 src/views/ProfileCreationView.vue
diff --git a/public/profile/default_avatar.png b/public/profile/default_avatar.png
new file mode 100644
index 0000000000000000000000000000000000000000..45afcfe8037e158b9ab75b9e7219692e50084770
GIT binary patch
literal 4126
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
literal 0
HcmV?d00001
diff --git a/src/router/index.js b/src/router/index.js
index f5e1f1d..568aa49 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import LoginView from '../views/LoginView.vue'
import SelectProfileView from '../views/SelectProfileView.vue'
+import ProfileCreationView from '../views/ProfileCreationView.vue'
import RegisterAccountView from '../views/RegisterAccountView.vue'
const router = createRouter({
@@ -22,6 +23,11 @@ const router = createRouter({
name: "selectProfile",
component: SelectProfileView
},
+ {
+ path: '/newProfile',
+ name: "newProfile",
+ component: ProfileCreationView
+ },
{
path: '/registerAccount',
name: 'registerAccount',
diff --git a/src/util/API.js b/src/util/API.js
index 08c1a8a..0eba7c0 100644
--- a/src/util/API.js
+++ b/src/util/API.js
@@ -83,8 +83,16 @@ export const API = {
},
// Sends the user into the "register profile" view
- addProfile: async () => {
- console.log("todo");
+ addProfile: async (profile) => {
+ const authStore = useAuthStore();
+ if (!authStore.isLoggedIn) {
+ throw new Error();
+ }
+
+ return axios.post(import.meta.env.VITE_BACKEND_URL + '/profile', {
+ headers: { Authorization: "Bearer " + authStore.token },
+ body: profile
+ })
},
// Returns all profiles to the logged in user
diff --git a/src/views/ProfileCreationView.vue b/src/views/ProfileCreationView.vue
new file mode 100644
index 0000000..6f44c78
--- /dev/null
+++ b/src/views/ProfileCreationView.vue
@@ -0,0 +1,144 @@
+<script>
+export default {
+ data: () => {
+ return {
+ image: "profile/default_avatar.png",
+ profile: {
+ profileImageUrl: "",
+ name: "",
+ isRestricted: false
+ }
+ }
+ },
+ methods: {
+ submit() {
+ console.log(this.profile)
+ },
+
+ updateImg(e) {
+ let file = document.getElementById('avatar').files[0];
+ let reader = new FileReader();
+
+ reader.onload = function(ev) {
+ document.getElementById("avatar_preview").src = ev.target.result;
+ }
+
+ reader.readAsDataURL(file);
+ }
+ }
+}
+</script>
+
+<template>
+ <main>
+ <h1>Ny profil</h1>
+
+ <form action="todo" method="post">
+ <label for="avatar" id="avatar_label">
+ <div class="img_hover">
+ <img :src="image" alt="fjes" id="avatar_preview">
+ <p class="hover_text">
+ Klikk for å endre
+ </p>
+ </div>
+ </label>
+ <input type="file" name="avatar" id="avatar" @change="updateImg">
+ <label for="name">Navn</label>
+ <input name="name" type="text" v-model="profile.name">
+ <div class="check_container">
+ <label for="child">Begrenset:</label>
+ <input name="child" type="checkbox" v-model="profile.isRestricted">
+ </div>
+ </form>
+ <button @click="submit">Opprett</button>
+ </main>
+</template>
+
+<style scoped lang="scss">
+@import '../style.scss';
+
+$img-size: 150px;
+
+input[type="file"] {
+ display: none;
+}
+
+main {
+ display: flex;
+ flex-direction: column;
+
+ padding-top: 15%;
+
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+
+ gap: 1em;
+}
+
+#avatar_label {
+ display: flex;
+ justify-content: center;
+ width: 100%;
+}
+
+.check_container {
+ display: flex;
+ gap: .5em;
+}
+
+.img_hover {
+ display: flex;
+
+ justify-content: center;
+ align-items: center;
+
+ &:hover .hover_text {
+ visibility: visible;
+ opacity: 1;
+ }
+
+ &:hover img {
+ filter: brightness(70%);
+ border-radius: 25%;
+ }
+
+ img {
+ height: $img-size;
+ width: $img-size;
+ border-radius: 50%;
+
+ transition: all 300ms ease;
+ }
+}
+
+.hover_text {
+ position: absolute;
+
+ font-weight: bold;
+
+ color: #fff;
+ visibility: hidden;
+ opacity: 0;
+
+ transition: all 350ms eases;
+}
+
+form {
+ display: flex;
+ flex-direction: column;
+
+ max-width: 20em;
+}
+
+
+button {
+ padding: .5rem 1rem;
+ border: 2px $green solid;
+ border-radius: .5rem;
+ background-color: $light-green;
+
+ color: white;
+ font-weight: bold;
+}
+</style>
\ No newline at end of file
--
GitLab