refactor(frontend): 🚧 Add group/user CRUD support for admins

frontend/components/Domain/User/UserProfileCard.vue

@@ -0,0 +1,159 @@
+<template>
+  <BaseStatCard :icon="$globals.icons.user">
+    <template #avatar>
+      <v-avatar color="accent" size="120" class="white--text headline mt-n16">
+        <img
+          v-if="!hideImage"
+          :src="require(`~/static/account.png`)"
+          @error="hideImage = true"
+          @load="hideImage = false"
+        />
+        <div v-else>
+          {{ initials }}
+        </div>
+      </v-avatar>
+    </template>
+    <template #after-heading>
+      <div class="ml-auto text-right">
+        <div class="body-3 grey--text font-weight-light" v-text="$t('user.user-id-with-value', { id: user.id })" />
+
+        <h3 class="display-2 font-weight-light text--primary">
+          <small> {{ $t("group.group-with-value", { groupID: user.group }) }}</small>
+        </h3>
+      </div>
+    </template>
+    <template #actions>
+      <BaseDialog
+        :title="$t('user.reset-password')"
+        :title-icon="$globals.icons.lock"
+        :submit-text="$t('settings.change-password')"
+        :loading="loading"
+        :top="true"
+        @submit="changePassword"
+      >
+        <template #activator="{ open }">
+          <v-btn color="info" class="mr-1" small @click="open">
+            <v-icon left>{{ $globals.icons.lock }}</v-icon>
+            {{ $t("settings.change-password") }}
+          </v-btn>
+        </template>
+
+        <v-card-text>
+          <v-form ref="passChange">
+            <v-text-field
+              v-model="password.current"
+              :prepend-icon="$globals.icons.lock"
+              :label="$t('user.current-password')"
+              validate-on-blur
+              :type="showPassword ? 'text' : 'password'"
+              @click:append="showPassword.current = !showPassword.current"
+            ></v-text-field>
+            <v-text-field
+              v-model="password.newOne"
+              :prepend-icon="$globals.icons.lock"
+              :label="$t('user.new-password')"
+              :type="showPassword ? 'text' : 'password'"
+              @click:append="showPassword.newOne = !showPassword.newOne"
+            ></v-text-field>
+            <v-text-field
+              v-model="password.newTwo"
+              :prepend-icon="$globals.icons.lock"
+              :label="$t('user.confirm-password')"
+              :rules="[password.newOne === password.newTwo || $t('user.password-must-match')]"
+              validate-on-blur
+              :type="showPassword ? 'text' : 'password'"
+              @click:append="showPassword.newTwo = !showPassword.newTwo"
+            ></v-text-field>
+          </v-form>
+        </v-card-text>
+      </BaseDialog>
+    </template>
+    <template #bottom>
+      <v-card-text>
+        <v-form ref="userUpdate">
+          <v-text-field v-model="user.username" :label="$t('user.username')" required validate-on-blur> </v-text-field>
+          <v-text-field v-model="user.fullName" :label="$t('user.full-name')" required validate-on-blur> </v-text-field>
+          <v-text-field v-model="user.email" :label="$t('user.email')" validate-on-blur required> </v-text-field>
+        </v-form>
+      </v-card-text>
+      <v-divider></v-divider>
+      <v-card-actions class="pb-1 pt-3">
+        <AppButtonUpload :icon="$globals.icons.fileImage" :text="$t('user.upload-photo')" file-name="profile_image" />
+        <v-spacer></v-spacer>
+        <BaseButton update @click="updateUser" />
+      </v-card-actions>
+    </template>
+  </BaseStatCard>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      hideImage: false,
+      passwordLoading: false,
+      password: {
+        current: "",
+        newOne: "",
+        newTwo: "",
+      },
+      showPassword: false,
+      loading: false,
+      user: {},
+    };
+  },
+
+  watch: {
+    userProfileImage() {
+      this.hideImage = false;
+    },
+  },
+
+  methods: {
+    async refreshProfile() {
+      const [response, err] = await api.users.self();
+
+      if (err) {
+        return; // TODO: Log or Notifty User of Error
+      }
+
+      this.user = response.data;
+    },
+    openAvatarPicker() {
+      this.showAvatarPicker = true;
+    },
+    selectAvatar(avatar) {
+      this.user.avatar = avatar;
+    },
+    async updateUser() {
+      if (!this.$refs.userUpdate.validate()) {
+        return;
+      }
+      this.loading = true;
+      const response = await api.users.update(this.user);
+      if (response) {
+        this.$store.commit("setToken", response.data.access_token);
+        this.refreshProfile();
+        this.loading = false;
+        this.$store.dispatch("requestUserData");
+      }
+    },
+    async changePassword() {
+      this.paswordLoading = true;
+      const data = {
+        currentPassword: this.password.current,
+        newPassword: this.password.newOne,
+      };
+
+      if (this.$refs.passChange.validate()) {
+        if (await api.users.changePassword(this.user.id, data)) {
+          this.$emit("refresh");
+        }
+      }
+      this.paswordLoading = false;
+    },
+  },
+};
+</script>
+
+<style></style>