@kalisio/kdk 2.0.1 → 2.1.1

package/core/client/components/account/KAccount.vue

@@ -0,0 +1,68 @@
+<template>
+  <q-card class="q-py-sm no-shadow">
+    <!-- Sections -->
+    <q-expansion-item
+      v-if="isVerified"
+      :label="$t('KVerifyEmailManager.TITLE')"
+      group="account"
+      class="bg-grey-2"
+      header-class= 'text-red'
+      id="verify-email-manager"
+      default-opened
+    >
+      <KVerifyEmailManager notifierEmail="email-notifications@kalisio.com" />
+    </q-expansion-item>
+    <template v-for="section in sections" :key="section.title">
+      <q-expansion-item
+        :label="$tie(section.title)"
+        group="account"
+        class="bg-grey-2"
+        :id="section.id"
+      >
+        <component :is="section.instance" v-bind="section" />
+      </q-expansion-item>
+    </template>
+    <!-- Deletion -->
+    <q-expansion-item
+      v-if="deletable"
+      :label="$t('KDeleteAccountManager.TITLE')"
+      group="account"
+      class="bg-grey-2"
+      id="delete-account-manager"
+    >
+      <KDeleteAccountManager />
+    </q-expansion-item>
+  </q-card>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import config from 'config'
+import { ref, onMounted } from 'vue'
+import { Store, utils, Events } from '../..'
+import KVerifyEmailManager from './KVerifyEmailManager.vue'
+import KDeleteAccountManager from './KDeleteAccountManager.vue'
+
+// Data
+const isVerified = ref(false)
+const deletable = ref(true)
+const sections = ref([])
+const User = Store.get('user')
+
+// Make store react to external changes to update verify email section
+Events.on('user-changed', (path, value) => {
+  if (_.has(value, 'isVerified')) isVerified.value = !value.isVerified
+})
+
+// Hooks
+onMounted(async () => {
+  deletable.value = _.get(config, 'account.deletable', true)
+  if (_.has(User, 'isVerified')) isVerified.value = !User.isVerified
+  const confSections = _.cloneDeep(_.get(config, 'account.sections', []))
+  for (let i = 0; i < confSections.length; ++i) {
+    const section = confSections[i]
+    section.instance = utils.loadComponent(section.component)
+  }
+  sections.value = confSections
+})
+</script>

package/core/client/components/account/KDeleteAccountManager.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="q-pa-md row justify-between items-center no-wrap bg-white">
+    <span>{{ $t('KDeleteAccountManager.QUESTION') }}</span>
+    <KAction
+      id="delete-account"
+      label="DELETE"
+      color="negative"
+      renderer= 'form-button'
+      outline
+      :closePopup="true"
+      :handler="onDelete"
+    />
+  </div>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import { useRouter } from 'vue-router'
+import { Dialog } from 'quasar'
+import { Store, i18n, api } from '../..'
+import KAction from '../KAction.vue'
+
+// Data
+const router = useRouter()
+const User = Store.get('user')
+
+// Function
+async function onDelete () {
+  const name = _.get(User, 'profile.name')
+  Dialog.create({
+    title: i18n.t('KDeleteAccountManager.CONFIRMATION_TITLE'),
+    message: i18n.t('KDeleteAccountManager.CONFIRMATION'),
+    html: true,
+    prompt: {
+      model: '',
+      type: 'text',
+      isValid: val => val === name
+    },
+    persistent: true,
+    ok: {
+      label: i18n.t('OK'),
+      flat: true
+    },
+    cancel: {
+      label: i18n.t('CANCEL'),
+      flat: true
+    }
+  }).onOk(async (data) => {
+    try {
+      await api.getService('users').remove(User._id)
+      // Redirecting to logut will logut the user but logout an inexsiting user will raise an error
+      // We prefer to clean the token manually instead
+      // router.push({ name: 'logout' })
+      Store.set('user', null)
+      await api.authentication.removeAccessToken()
+      router.push({ name: 'login' })
+    } catch (error) {
+      throw new Error(`[KDK] Cannot delete ${name} account: ${error}`)
+    }
+  })
+}
+</script>

package/core/client/components/account/KEmailManager.vue

@@ -0,0 +1,128 @@
+<template>
+  <q-card class="q-pa-md">
+    <!-- Form -->
+    <q-card-section>
+      <KForm
+        ref="modifyEmailFormRef"
+        :schema="modifyEmailSchema"
+      />
+    </q-card-section>
+    <!-- Actions -->
+    <q-card-actions align="right">
+      <KAction
+        id="modify-email"
+        label="APPLY"
+        renderer="form-button"
+        outline
+        :loading="processing"
+        :handler="apply"
+      />
+    </q-card-actions>
+    <q-dialog v-model="dialog" persistent>
+      <q-card>
+        <!-- Form -->
+        <q-card-section align="center">
+          <KForm
+            ref="validateEmailFormRef"
+            :schema="validateEmailSchema"
+          />
+        </q-card-section>
+        <!-- Actions -->
+        <q-card-actions align="center">
+          <KAction
+            id="validate-email"
+            label="APPLY"
+            renderer="form-button"
+            :loading="processing"
+            :handler="applyChanges"
+          />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+  </q-card>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Notify } from 'quasar'
+import { Store, utils, i18n } from '../..'
+
+// Data
+const User = Store.get('user')
+const modifyEmailFormRef = ref(null)
+const validateEmailFormRef = ref(null)
+const dialog = ref(false)
+const processing = ref(false)
+const modifyEmailSchema = ref({
+  $schema: 'http://json-schema.org/draft-07/schema#',
+  $id: 'http://kalisio.xyz/schemas/modify-email-manager#',
+  title: 'Modify email form',
+  type: 'object',
+  properties: {
+    password: {
+      type: 'string',
+      format: 'password',
+      field: {
+        component: 'form/KPasswordField',
+        label: 'KEmailManager.PASSWORD_FIELD_LABEL'
+      }
+    },
+    email: {
+      type: 'string',
+      format: 'email',
+      field: {
+        component: 'form/KEmailField',
+        label: 'KEmailManager.EMAIL_FIELD_LABEL'
+      }
+    }
+  },
+  required: ['email', 'password']
+})
+const validateEmailSchema = ref({
+  $schema: 'http://json-schema.org/draft-07/schema#',
+  $id: 'http://kalisio.xyz/schemas/verify-email-manager#',
+  title: 'Verify email form',
+  type: 'object',
+  properties: {
+    token: {
+      type: 'string',
+      minLength: 6,
+      maxLength: 6,
+      tokenLength: 6,
+      field: {
+        component: 'form/KTokenField',
+        label: 'KEmailManager.TOKEN_LABEL'
+      }
+    }
+  },
+  required: ['token']
+})
+
+// Functions
+async function apply () {
+  const { isValid, values } = modifyEmailFormRef.value.validate()
+  if (!isValid) return false
+  try {
+    processing.value = true
+    await utils.sendChangeIdentity(User.email, values.email, values.password)
+    dialog.value = true
+    processing.value = false
+  } catch (error) {
+    processing.value = false
+  }
+}
+async function applyChanges () {
+  const { isValid, values } = validateEmailFormRef.value.validate()
+  if (!isValid) return
+  try {
+    processing.value = true
+    await utils.verifySignup(values.token, User.email)
+    processing.value = false
+    Notify.create({ type: 'positive', message: i18n.t('KEmailManager.EMAIL_CHANGED') })
+  } catch (error) {
+    processing.value = false
+    Notify.create({ type: 'negative', message: i18n.t('KEmailManager.ERROR_MESSAGE') })
+  }
+  dialog.value = false
+}
+</script>

package/core/client/components/account/KPasswordManager.vue

@@ -0,0 +1,90 @@
+<template>
+  <q-card class="q-pa-md">
+    <!-- Form -->
+    <q-card-section>
+      <KForm
+        ref="formRef"
+        :schema="schema"
+      />
+    </q-card-section>
+    <!-- Actions -->
+    <q-card-actions align="right">
+      <KAction
+        id="change-password"
+        label="APPLY"
+        renderer="form-button"
+        outline
+        :loading="processing"
+        :handler="apply"
+      />
+    </q-card-actions>
+  </q-card>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Notify } from 'quasar'
+import { Store, i18n, utils } from '../..'
+import KForm from '../form/KForm.vue'
+import KAction from '../KAction.vue'
+
+// Data
+const formRef = ref(null)
+const User = Store.get('user')
+const schema = ref({
+  $schema: 'http://json-schema.org/draft-07/schema#',
+  $id: 'http://kalisio.xyz/schemas/password-manager.json#',
+  title: 'Change Password form',
+  type: 'object',
+  properties: {
+    oldPassword: {
+      type: 'string',
+      format: 'password',
+      field: {
+        component: 'form/KPasswordField',
+        label: 'KPasswordManager.OLD_PASSWORD_FIELD_LABEL'
+      }
+    },
+    password: {
+      type: 'string',
+      format: 'password',
+      field: {
+        component: 'form/KPasswordField',
+        label: 'KPasswordManager.PASSWORD_FIELD_LABEL'
+      }
+    },
+    confirmPassword: {
+      type: 'string',
+      format: 'password',
+      const: {
+        $data: '1/password'
+      },
+      field: {
+        component: 'form/KPasswordField',
+        label: 'KPasswordManager.CONFIRM_PASSWORD_FIELD_LABEL'
+      }
+    }
+  },
+  required: ['oldPassword', 'password', 'confirmPassword']
+})
+const processing = ref(false)
+
+// Functions
+async function apply () {
+  const { isValid, values } = formRef.value.validate()
+  if (!isValid) return false
+  try {
+    processing.value = true
+    await utils.changePassword(User.email, values.oldPassword, values.password)
+    processing.value = false
+    Notify.create({
+      type: 'positive',
+      message: i18n.t('KPasswordManager.PASSWORD_CHANGED')
+    })
+  } catch (error) {
+    processing.value = false
+    return false
+  }
+  return true
+}
+</script>

package/core/client/components/account/KProfile.vue

@@ -0,0 +1,109 @@
+<template>
+  <div v-if="User" class="q-pb-md column content-center q-gutter-md bg-grey-4">
+    <!-- Header -->
+    <KPanel
+      id="profile-header"
+      :content="header"
+      :context="User"
+      class="full-width justify-end no-wrap"
+      @triggered="onTriggered"
+    />
+    <!-- Avatar -->
+    <div class="row justify-center">
+      <KAvatar
+        :subject="avatar"
+        size="7rem"
+      />
+    </div>
+    <!-- Information -->
+    <div class="column">
+      <div class="row justify-center text-subtitle1 text-weight-bold">
+        {{ name }}
+      </div>
+      <div class="row justify-center">
+        {{ description }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { Store } from '../../store.js'
+import KAvatar from '../KAvatar.vue'
+import KPanel from '../KPanel.vue'
+import _ from 'lodash'
+
+// Props
+const props = defineProps({
+  editable: {
+    type: Boolean,
+    default: true
+  },
+  manageable: {
+    type: Boolean,
+    default: true
+  }
+})
+
+// Emit
+const emit = defineEmits(['triggered'])
+
+// Data
+const User = Store.getRef('user')
+
+// Computed
+const header = computed(() => {
+  const actions = []
+  if (props.editable) {
+    actions.push({
+      id: 'edit-profile',
+      icon: 'las la-edit',
+      tooltip: 'KProfile.EDIT_PROFILE',
+      dialog: {
+        component: 'editor/KEditor',
+        service: 'users',
+        objectId: User.value._id,
+        perspective: 'profile',
+        hideButtons: true,
+        cancelAction: 'CANCEL',
+        okAction: {
+          id: 'ok-button',
+          label: 'APPLY',
+          handler: 'apply'
+        }
+      }
+    })
+  }
+  if (props.manageable) {
+    const manageAccountAction = {
+      id: 'manage-account',
+      icon: 'las la-cog',
+      tooltip: 'KProfile.MANAGE_ACCOUNT',
+      dialog: {
+        component: 'account/KAccount',
+        okAction: 'CLOSE'
+      }
+    }
+    if (_.has(User.value, 'isVerified') && !User.value.isVerified) {
+      manageAccountAction.badge = {
+        rounded: true,
+        floating: true,
+        class: 'q-ma-sm',
+        color: 'red',
+        icon: { name: 'fas fa-exclamation', size: '8px' }
+      }
+    }
+    actions.push(manageAccountAction)
+  }
+  return actions
+})
+const name = computed(() => _.get(User.value, 'profile.name', ''))
+const description = computed(() => _.get(User.value, 'profile.description', ''))
+const avatar = computed(() => _.get(User.value, 'profile', {}))
+
+// Functions
+function onTriggered (args) {
+  emit('triggered', args)
+}
+</script>

package/core/client/components/account/KResetPassword.vue

@@ -1,131 +1,120 @@
 <template>
-  <KScreen :title="$t('KResetPassword.TITLE')">
+  <KScreen :title="$t('KResetPassword.TITLE')" :actions="actions">
     <div slot="screen-content">
       <div class="column justify-center sm-gutter">
-          <div :class="textClass" v-if="message" >
-            <p>
-              <q-icon name="las la-check" v-show="reset && success"/>
-              <q-icon name="las la-exclamation-circle" v-show="reset && !success"/>
-              &nbsp;&nbsp;
-              {{ message }}.
-            </p>
-          </div>
-          <div v-if="!success">
-            <k-form ref="form" :schema="schema" />
-          </div>
-          <div v-if="!success">
-            <div class="row justify-around">
-              <q-btn color="primary" :loading="resetting" @click="onReset">
-                {{$t('KResetPassword.ACTION')}}
-              </q-btn>
-            </div>
-          </div>
-          <div class="self-center">
-            <a v-if="reset && !success" @click="$router.push({name: 'send-reset-password'})">
-              {{$t('KResetPassword.RESEND_LINK')}}
-            </a>
+        <div :class="textClass" v-if="message">
+          <p>
+            <q-icon name="las la-exclamation-circle" v-show="send"/>
             &nbsp;&nbsp;
-            <a v-if="reset && success" @click="$router.push({name: 'login'})">
-              {{$t('KResetPassword.LOG_IN_LINK')}}
-            </a>
-          </div>
+            {{ message }}
+          </p>
+        </div>
+        <!-- Form -->
+        <KForm ref="formRef" :schema="schema" />
+        <!-- Actions -->
+        <div class="row justify-around">
+          <KAction
+            id="reset-password"
+            label="APPLY"
+            renderer="form-button"
+            :loading="processing"
+            :handler="apply"
+          />
+        </div>
       </div>
     </div>
   </KScreen>
 </template>
 
-<script>
+<script setup>
 import _ from 'lodash'
+import { computed, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { Notify } from 'quasar'
+import { i18n, utils } from '../..'
 import KScreen from '../screen/KScreen.vue'
-import KForm from '../form/KForm.vue'
-import { account } from '../../mixins'
 
-export default {
-  name: 'k-reset-password',
-  components: {
-    KScreen,
-    KForm
-  },
-  mixins: [account],
-  data () {
-    return {
-      title: '',
-      message: '',
-      success: false,
-      reset: false,
-      resetting: false,
-      schema: {
-        $schema: 'http://json-schema.org/draft-07/schema#',
-        $id: 'http://kalisio.xyz/schemas/reset-password.json#',
-        title: 'Reset Password form',
-        description: 'Reset password form',
-        type: 'object',
-        properties: {
-          password: {
-            type: 'string',
-            format: 'password',
-            field: {
-              component: 'form/KPasswordField',
-              label: 'KResetPassword.PASSWORD_FIELD_LABEL'
-            }
-          },
-          confirmPassword: {
-            type: 'string',
-            format: 'password',
-            const: {
-              $data: '1/password'
-            },
-            field: {
-              component: 'form/KPasswordField',
-              label: 'KResetPassword.CONFIRM_PASSWORD_FIELD_LABEL'
-            }
-          }
-        },
-        required: ['password', 'confirmPassword']
+// Data
+const route = useRoute()
+const formRef = ref(null)
+const message = ref(i18n.t('KResetPassword.MESSAGE'))
+const processing = ref(false)
+const send = ref(false)
+const schema = ref({
+  $schema: 'http://json-schema.org/draft-07/schema#',
+  $id: 'http://kalisio.xyz/schemas/reset-password.json#',
+  title: 'Reset Password form',
+  description: 'Reset password form',
+  type: 'object',
+  properties: {
+    password: {
+      type: 'string',
+      format: 'password',
+      field: {
+        component: 'form/KPasswordField',
+        label: 'KResetPassword.PASSWORD_FIELD_LABEL'
       }
-    }
-  },
-  computed: {
-    textClass () {
-      const classObject = {}
-      if (this.reset) {
-        classObject['text-positive'] = this.success
-        classObject['text-negative'] = !this.success
+    },
+    confirmPassword: {
+      type: 'string',
+      format: 'password',
+      const: {
+        $data: '1/password'
+      },
+      field: {
+        component: 'form/KPasswordField',
+        label: 'KResetPassword.CONFIRM_PASSWORD_FIELD_LABEL'
       }
-      return classObject
-    }
-  },
-  methods: {
-    async onReset () {
-      const result = this.$refs.form.validate()
-      if (result.isValid) {
-        try {
-          this.resetting = true
-          await this.resetPassword(this.$route.params.token, result.values.password)
-          this.message = this.$t('KResetPassword.SUCCESS_MESSAGE')
-          this.success = true
-        } catch (error) {
-          const type = _.get(error, 'errors.$className')
-          switch (type) {
-            case 'badParams':
-              this.message = this.$t('KResetPassword.ERROR_MESSAGE_BAD_PARAMS')
-              break
-            case 'verifyExpired':
-              this.message = this.$t('KResetPassword.ERROR_MESSAGE_VERIFY_EXPIRED')
-              break
-            default:
-              this.message = this.$t('KResetPassword.ERROR_MESSAGE_DEFAULT')
-          }
-          this.success = false
-        }
-        this.reset = true
-        this.resetting = false
+    },
+    token: {
+      type: 'string',
+      minLength: 6,
+      maxLength: 6,
+      tokenLength: 6,
+      field: {
+        component: 'form/KTokenField',
+        label: 'KResetPassword.TOKEN_FIELD_LABEL'
       }
     }
   },
-  created () {
-    // Components initialization
-    this.message = this.$t('KResetPassword.MESSAGE')
+  required: ['password', 'confirmPassword', 'token']
+})
+
+// Computed
+const textClass = computed(() => {
+  const classObject = {}
+  classObject['self-center'] = true
+  if (send.value) classObject['text-negative'] = true
+  return classObject
+})
+const actions = computed(() => {
+  return [{ id: 'reset-password-link', label: 'KResetPassword.RESEND_LINK', route: { name: 'send-reset-password' } }]
+})
+
+// Functions
+async function apply () {
+  const { isValid, values } = formRef.value.validate()
+  if (!isValid) return false
+  try {
+    processing.value = true
+    await utils.resetPassword(route.params.email, values.token, values.password)
+    Notify.create({ type: 'positive', message: i18n.t('KResetPassword.SUCCESS_MESSAGE') })
+    await utils.login(route.params.email, values.password)
+    processing.value = false
+  } catch (error) {
+    processing.value = false
+    const type = _.get(error, 'errors.$className')
+    switch (type) {
+      case 'badParams':
+        message.value = i18n.t('KResetPassword.ERROR_MESSAGE_BAD_PARAMS')
+        break
+      case 'resetExpired':
+        message.value = i18n.t('KResetPassword.ERROR_MESSAGE_VERIFY_EXPIRED')
+        break
+      default:
+        message.value = i18n.t('KResetPassword.ERROR_MESSAGE_DEFAULT')
+    }
   }
+  send.value = true
 }
 </script>