Add user profile page

2022-11-03 18:13:05 +01:00
parent a2f0221229
commit 9384ece657
6 changed files with 133 additions and 23 deletions
--- a/pages/user.vue
+++ b/pages/user.vue
@@ -0,0 +1,119 @@
+<template>
+  <v-container>
+    <v-sheet class="rounded-lg pa-4">
+      <v-row align="center">
+        <v-col cols="auto" style="position: relative">
+          <v-avatar size="200">
+            <v-img src="https://avatarfiles.alphacoders.com/207/207426.png"></v-img>
+          </v-avatar>
+          <v-btn fab absolute dark style="bottom: 15px; right: 15px" @click="changeProfilePic">
+            <v-icon>mdi-account-edit</v-icon>
+          </v-btn>
+        </v-col>
+        <v-col>
+          <div class="text-h4">{{ userFullName }}</div>
+          <div class="text-h6 text--secondary">{{ userRole }}</div>
+          <v-spacer class="my-6"></v-spacer>
+          <div class="text-subtitle-1 text--secondary">Registriert: {{ formatDate($auth.currentUser.metadata.creationTime) }}</div>
+          <div class="text-subtitle-1 text--secondary">Letzter Login: {{ formatDate($auth.currentUser.metadata.lastSignInTime) }}</div>
+        </v-col>
+        <v-col cols="12">
+          <v-divider></v-divider>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>
+          <v-text-field v-model="displayName" label="Anzeigename" counter="15" :maxlength="15"></v-text-field>
+          <v-text-field v-model="fullName" label="Vollständiger Name" disabled></v-text-field>
+          <v-text-field v-model="email" label="E-Mail-Adresse" disabled></v-text-field>
+          <v-btn depressed color="primary" :loading="loading" @click="save">
+            Änderungen speichern
+          </v-btn>
+          <v-btn outlined color="primary" @click="logout">
+            <v-icon left>mdi-logout-variant</v-icon>
+            Logout
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-sheet>
+  </v-container>
+</template>
+
+<script>
+import { signOut } from 'firebase/auth'
+import { doc, updateDoc } from 'firebase/firestore'
+import _capitalize from 'lodash-es/capitalize'
+
+export default {
+  name: 'UserPage',
+  data () {
+    return {
+      fullName: '',
+      displayName: '',
+      email: '',
+      loading: false
+    }
+  },
+  computed: {
+    userFullName () {
+      const nameParsed = this.$auth.currentUser.email.split('@')[0]
+      const nameParts = []
+
+      for (const namePart of nameParsed.split('.')) {
+        nameParts.push(_capitalize(namePart))
+      }
+
+      return nameParts.join(' ')
+    },
+    userRole () {
+      const isTutor = this.$auth.currentUser.email.endsWith('@iu.org')
+      const isAdmin = this.$store.getters.isAdmin
+      if (isAdmin) return 'Admin'
+      else if (isTutor) return 'Tutor'
+      else return 'Student'
+    }
+  },
+  created () {
+    this.fullName = this.userFullName
+    this.displayName = this.$store.state.user.displayName
+    this.email = this.$auth.currentUser.email
+  },
+  methods: {
+    formatDate (str) {
+      return new Date(str).toLocaleString('de-DE')
+    },
+    changeProfilePic () {
+      // TODO
+      this.$toast({ content: 'Diese Funktion ist in der Demo-Version nicht verfügbar.', color: 'info', timeout: 3000 })
+    },
+    save () {
+      const newDisplayName = this.displayName.trim()
+      if (!newDisplayName || newDisplayName === this.$store.state.user.displayName) return
+
+      this.loading = true
+      const ref = doc(this.$db, `benutzer/${this.$auth.currentUser.uid}`)
+      updateDoc(ref, {
+        anzeigename: newDisplayName
+      }).then((empty) => {
+        this.$store.commit('setUserDisplayName', newDisplayName)
+        this.$toast({ content: 'Die Änderungen wurden gespeichert!', color: 'success' })
+      }).catch((error) => {
+        // Failed to update user profile; display error message
+        this.$toast({content: error, color: 'error'})
+      }).then(() => {
+        this.loading = false
+      })
+    },
+    logout () {
+      signOut(this.$auth).then(() => {
+        // Sign-out successful
+        // The authentication state observer will redirect the user to the main page (dashboard),
+        // see pages/index.vue
+      }).catch((error) => {
+        // An error happened.
+        this.$toast({ content: error, color: 'error' })
+      })
+    }
+  }
+}
+</script>