mealie/frontend/components/Domain/User/UserProfileCard.vue

<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>