Add functionality to generate user avatars and enable users to upload and manage their profile photos

2023-03-13 16:03:52 +03:00
parent 3f3954bf9f
commit 5b3b584c8f
83 changed files with 19107 additions and 224 deletions
@@ -11,7 +11,7 @@
    @vdropzone-error="onError"
    @vdropzone-upload-progress="onUploadProgress"
  >
-    <div class="w-100 h-100 position-relative bg-light">
+    <div class="w-100 h-100 position-relative bg-light rounded">
      <template v-if="active">
        <div
          class="bg-primary h-100 progress-bar position-absolute"
@@ -43,6 +43,13 @@
        >
          {{ $t('internal.signup.enabled') }}
        </b-form-checkbox>
+        <b-form-checkbox
+          v-model="settings['auth.internal.profile-avatar.enabled']"
+          :value="true"
+          :unchecked-value="false"
+        >
+          {{ $t('internal.profile-avatar.enabled') }}
+        </b-form-checkbox>
      </b-form-group>
      <b-form-group
        label-cols="2"
@@ -0,0 +1,157 @@
+<template>
+  <b-card
+    class="shadow-sm"
+    data-test-id="card-user-info"
+    header-bg-variant="white"
+    footer-bg-variant="white"
+  >
+    <template #header>
+      <h3 class="m-0">
+        {{ $t('title') }}
+      </h3>
+    </template>
+
+    <b-form
+      enctype="multipart/form-data"
+      @submit.prevent="$emit('submit', user)"
+    >
+      <img
+        :src="uploadedAvatar('avatar')"
+        style="height: 4rem; width: 4rem;"
+        class="rounded-circle mb-4"
+      >
+
+      <div
+        class="d-flex align-items-center"
+      >
+        <c-uploader-with-preview
+          :endpoint="`/users/${user.userID}/avatar`"
+          :labels="$t('uploader', { returnObjects: true })"
+          @upload="$emit('onUpload')"
+          @clear="$emit('resetAttachment', 'avatar')"
+        />
+
+        <c-input-confirm
+          v-if="uploadedAvatar('avatar') && isKindAvatar"
+          size="lg"
+          size-confirm="lg"
+          variant="danger"
+          class="ml-2 h-100"
+          @confirmed="$emit('resetAttachment', 'avatar')"
+        >
+          {{ $t('general:label.delete') }}
+        </c-input-confirm>
+      </div>
+
+      <div class="form-row mt-3">
+        <b-form-group
+          :label="$t('initial.color')"
+          class="col"
+        >
+          <b-form-input
+            v-model="user.meta.avatarColor"
+            type="color"
+            data-test-id="input-handle"
+          />
+        </b-form-group>
+
+        <b-form-group
+          :label="$t('initial.backgroundColor')"
+          class="col"
+        >
+          <b-form-input
+            v-model="user.meta.avatarBgColor"
+            type="color"
+          />
+        </b-form-group>
+      </div>
+    </b-form>
+
+    <template #footer>
+      <c-submit-button
+        class="float-right"
+        :processing="processing"
+        :success="success"
+        :disabled="saveDisabled"
+        @submit="$emit('submit', user)"
+      />
+    </template>
+  </b-card>
+</template>
+
+<script>
+import { NoID } from '@cortezaproject/corteza-js'
+import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
+import CUploaderWithPreview from 'corteza-webapp-admin/src/components/CUploaderWithPreview'
+
+export default {
+  name: 'CUserEditorAvatar',
+
+  i18nOptions: {
+    namespaces: 'system.users',
+    keyPrefix: 'editor.avatar',
+  },
+
+  components: {
+    CSubmitButton,
+    CUploaderWithPreview,
+  },
+
+  props: {
+    user: {
+      type: Object,
+      required: true,
+    },
+
+    processing: {
+      type: Boolean,
+      value: false,
+    },
+
+    success: {
+      type: Boolean,
+      value: false,
+    },
+
+    canCreate: {
+      type: Boolean,
+      required: true,
+    },
+  },
+
+  computed: {
+    fresh () {
+      return !this.user.userID || this.user.userID === NoID
+    },
+
+    editable () {
+      return this.fresh ? this.canCreate : this.user.canUpdateUser
+    },
+
+    saveDisabled () {
+      return !this.editable
+    },
+
+    isKindAvatar () {
+      return this.user.meta.avatarKind === 'avatar'
+    },
+  },
+
+  methods: {
+    uploadedAvatar (name) {
+      const attachmentID = this.user.meta.avatarID
+
+      if (attachmentID !== '0') {
+        return (
+          this.$SystemAPI.baseURL +
+            this.$SystemAPI.attachmentOriginalEndpoint({
+              attachmentID,
+              kind: 'avatar',
+              name,
+            })
+        )
+      }
+    },
+  },
+}
+</script>
@@ -52,6 +52,18 @@
      @sessionsRevoke="onSessionsRevoke"
    />

+    <c-user-editor-avatar
+      v-if="user && userID && $Settings.get('auth.internal.profile-avatar.Enabled', false)"
+      :user="user"
+      :processing="info.processing"
+      :success="info.success"
+      :can-create="canCreate"
+      class="mt-3"
+      @submit="onAvatarSubmit"
+      @onUpload="onAvatarUpload"
+      @resetAttachment="onResetAvatar"
+    />
+
    <c-user-editor-roles
      v-if="user && userID"
      v-model="membership.active"
@@ -92,6 +104,7 @@
 import { NoID, system } from '@cortezaproject/corteza-js'
 import editorHelpers from 'corteza-webapp-admin/src/mixins/editorHelpers'
 import CUserEditorInfo from 'corteza-webapp-admin/src/components/User/CUserEditorInfo'
+import CUserEditorAvatar from '../../../components/User/CUserEditorAvatar'
 import CUserEditorPassword from 'corteza-webapp-admin/src/components/User/CUserEditorPassword'
 import CUserEditorMfa from 'corteza-webapp-admin/src/components/User/CUserEditorMFA'
 import CUserEditorRoles from 'corteza-webapp-admin/src/components/User/CUserEditorRoles'
@@ -103,6 +116,7 @@ export default {
    CUserEditorRoles,
    CUserEditorPassword,
    CUserEditorInfo,
+    CUserEditorAvatar,
    CUserEditorMfa,
    CUserEditorExternalAuthProviders,
  },
@@ -271,6 +285,28 @@ export default {
      }
    },

+    onAvatarSubmit (user) {
+      this.info.processing = true
+
+      const payload = {
+        userID: user.userID,
+        avatarColor: user.meta.avatarColor,
+        avatarBgColor: user.meta.avatarBgColor,
+      }
+
+      this.$SystemAPI.userProfileAvatarInitial(payload)
+        .then(() => {
+          this.fetchUser()
+          this.$auth.handle()
+          this.animateSuccess('info')
+          this.toastSuccess(this.$t('notification:user.avatarUpload.success'))
+        })
+        .catch(this.toastErrorHandler(this.$t('notification:user.avatarUpload.error')))
+        .finally(() => {
+          this.info.processing = false
+        })
+    },
+
    /**
     * Handles user delete event, calls user delete API endpoint
     * and handles response & errors
@@ -451,6 +487,22 @@ export default {
          this.decLoader()
        })
    },
+
+    onAvatarUpload () {
+      this.fetchUser()
+    },
+
+    onResetAvatar () {
+      const userID = this.userID
+
+      this.$SystemAPI.userDeleteAvatar({ userID })
+        .then(() => {
+          this.fetchUser()
+
+          this.toastSuccess(this.$t('notification:user.avatarDelete.success'))
+        })
+        .catch(this.toastErrorHandler(this.$t('notification:user.avatarDelete.error')))
+    },
  },
 }
 </script>