@kalisio/kdk 2.0.1 → 2.1.0

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

@@ -2,105 +2,89 @@
   <KScreen :title="$t('KSendResetPassword.TITLE')">
     <div slot="screen-content">
       <div class="column justify-center sm-gutter">
-          <div :class="textClass">
-            <p>
-              <q-icon name="las la-check" v-show="sent && success"/>
-              <q-icon name="las la-exclamation-circle" v-show="sent && !success"/>
-              &nbsp;&nbsp;
-              {{ message }}.
-            </p>
-          </div>
-          <div>
-            <k-form ref="form" :schema="schema" />
-          </div>
-          <div>
-            <div class="row justify-around">
-              <q-btn id="reset-password" color="primary" :loading="sending" @click="onSend">
-                {{$t('KSendResetPassword.ACTION')}}
-              </q-btn>
-            </div>
-          </div>
+        <div :class="textClass" v-if="message">
+          <p>
+            <q-icon name="las la-exclamation-circle" v-show="send"/>
+            &nbsp;&nbsp;
+            {{ message }}.
+          </p>
+        </div>
+        <!-- Form -->
+        <KForm ref="formRef" :schema="schema" />
+        <!-- Actions -->
+        <div class="row justify-around">
+          <KAction
+            id="send-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 { useRouter } from 'vue-router'
+import { i18n, utils } from '../..'
 import KScreen from '../screen/KScreen.vue'
-import KForm from '../form/KForm.vue'
-import { account } from '../../mixins'
 
-export default {
-  name: 'k-send-reset-password',
-  components: {
-    KScreen,
-    KForm
-  },
-  mixins: [account],
-  data () {
-    return {
-      message: '',
-      success: false,
-      sent: false,
-      sending: false,
-      schema: {
-        $schema: 'http://json-schema.org/draft-07/schema#',
-        $id: 'http://kalisio.xyz/schemas/send-reset-password#',
-        title: 'Send reset password form',
-        type: 'object',
-        properties: {
-          email: {
-            type: 'string',
-            format: 'email',
-            field: {
-              component: 'form/KEmailField',
-              label: 'KSendResetPassword.EMAIL_FIELD_LABEL'
-            }
-          }
-        },
-        required: ['email']
-      }
-    }
-  },
-  computed: {
-    textClass () {
-      const classObject = {}
-      if (this.sent) {
-        classObject['text-positive'] = this.success
-        classObject['text-negative'] = !this.success
+// Data
+const router = useRouter()
+const formRef = ref(null)
+const message = ref(i18n.t('KSendResetPassword.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/send-reset-password#',
+  title: 'Send reset password form',
+  type: 'object',
+  properties: {
+    email: {
+      type: 'string',
+      format: 'email',
+      field: {
+        component: 'form/KEmailField',
+        label: 'KSendResetPassword.EMAIL_FIELD_LABEL'
       }
-      return classObject
     }
   },
-  methods: {
-    async onSend () {
-      const result = this.$refs.form.validate()
-      if (result.isValid) {
-        try {
-          this.sending = true
-          await this.sendResetPassword(result.values.email)
-          this.message = this.$t('KSendResetPassword.SUCCESS_MESSAGE')
-          this.success = true
-        } catch (error) {
-          const type = _.get(error, 'errors.$className')
-          switch (type) {
-            case 'isVerified':
-              this.message = this.$t('KSendResetPassword.ERROR_MESSAGE_IS_VERIFIED')
-              break
-            default:
-              this.message = this.$t('KSendResetPassword.ERROR_MESSAGE_DEFAULT')
-          }
-          this.success = false
-        }
-        this.sent = true
-        this.sending = false
-      }
+  required: ['email']
+})
+
+// Computed
+const textClass = computed(() => {
+  const classObject = {}
+  classObject['self-center'] = true
+  if (send.value) classObject['text-negative'] = true
+  return classObject
+})
+
+// Functions
+async function apply () {
+  const { isValid, values } = formRef.value.validate()
+  if (!isValid) return false
+  try {
+    processing.value = true
+    await utils.sendResetPassword(values.email)
+    processing.value = false
+    router.push({ path: `reset-password/${values.email}` })
+  } catch (error) {
+    processing.value = false
+    const type = _.get(error, 'errors.$className')
+    switch (type) {
+      case 'isVerified':
+        message.value = i18n.t('KSendResetPassword.ERROR_MESSAGE_IS_VERIFIED')
+        break
+      default:
+        message.value = i18n.t('KSendResetPassword.ERROR_MESSAGE_DEFAULT')
     }
-  },
-  created () {
-    // Components initialization
-    this.message = this.$t('KSendResetPassword.MESSAGE')
   }
+  send.value = true
 }
 </script>

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

@@ -0,0 +1,71 @@
+<template>
+  <q-item>
+    <!-- Icon -->
+    <q-item-section avatar>
+      <q-icon :name="icon" />
+    </q-item-section>
+    <!-- Label -->
+    <q-item-section>
+      {{ label }}
+    </q-item-section>
+    <!-- Actions -->
+    <KPanel
+      :content="bindedActions"
+    />
+  </q-item>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import { removeSubscription } from '@kalisio/feathers-webpush/client.js'
+import { computed } from 'vue'
+import { Dialog } from 'quasar'
+import { Store, i18n, api, utils } from '../..'
+import KPanel from '../KPanel.vue'
+
+// Props
+const props = defineProps({
+  subscription: {
+    type: Object,
+    required: true
+  },
+  actions: {
+    type: Array,
+    required: true
+  }
+})
+
+// Computed
+const icon = computed(() => {
+  return 'lab la-' + _.get(props.subscription, 'browser.name')
+})
+const label = computed(() => {
+  return _.capitalize(_.get(props.subscription, 'browser.name')) + ' (' + _.get(props.subscription, 'browser.version') + ') - ' + _.capitalize(_.get(props.subscription, 'platform'))
+})
+const bindedActions = computed(() => {
+  return utils.bindContent(_.cloneDeep(props.actions), { unsubscribe })
+})
+
+// Functions
+function unsubscribe () {
+  const description = label.value
+  Dialog.create({
+    title: i18n.t('KSubscription.UNSUBSCRIBE_DIALOG_TITLE', { description }),
+    message: i18n.t('KSubscription.UNSUBSCRIBE_DIALOG_MESSAGE', { description }),
+    html: true,
+    ok: {
+      label: i18n.t('OK'),
+      flat: true
+    },
+    cancel: {
+      label: i18n.t('CANCEL'),
+      flat: true
+    }
+  }).onOk(async () => {
+    // Patch user subscriptions
+    const user = Store.get('user')
+    removeSubscription(user, props.subscription, 'subscriptions')
+    api.service('api/users').patch(Store.user._id, { subscriptions: user.subscriptions })
+  })
+}
+</script>

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

@@ -0,0 +1,46 @@
+<template>
+  <div class="q-pa-md column">
+    <div v-if="subscriptions.length > 0">
+      <q-list>
+        <template v-for="subscription in subscriptions" :key="subscription.endpoint">
+          <KSubscription
+            :subscription="subscription"
+            :actions="actions"
+          />
+        </template>
+      </q-list>
+    </div>
+    <div v-else class="row col justify-center">
+      <KStamp
+        icon="las la-exclamation-circle"
+        icon-size="1.6rem"
+        :text="$t('KSubscriptionsManager.EMPTY')"
+        direction="horizontal"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import { computed } from 'vue'
+import { Store } from '../../store.js'
+import KSubscription from './KSubscription.vue'
+import KStamp from '../KStamp.vue'
+
+// Props
+defineProps({
+  actions: {
+    type: Array,
+    default: () => []
+  }
+})
+
+// Data
+const User = Store.get('user')
+
+// Computed
+const subscriptions = computed(() => {
+  return _.get(User, 'subscriptions', [])
+})
+</script>

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

@@ -0,0 +1,105 @@
+<template>
+  <!-- Helper -->
+  <q-expansion-item icon="las la-question" :label="$t('KVerifyEmailManager.HELP_LABEL')">
+    <div class="q-pa-md">
+      <i18n-t class="text-body2" keypath="KVerifyEmailManager.HELP_TEXT" tag="p" scope="global" />
+    </div>
+  </q-expansion-item>
+  <q-expansion-item icon="las la-question" :label="$t('KVerifyEmailManager.HELP_EMAIL_LABEL')">
+    <div class="q-pa-md">
+      <i18n-t class="text-body2" keypath="KVerifyEmailManager.HELP_EMAIL_TEXT" tag="p" scope="global">
+        <template v-slot:email>
+          <span class="text-weight-bold">{{ notifierEmail }}</span>
+        </template>
+      </i18n-t>
+    </div>
+  </q-expansion-item>
+  <q-card>
+    <!-- Form -->
+    <q-card-section>
+      <KForm
+        ref="formRef"
+        :schema="schema"
+      />
+    </q-card-section>
+    <!-- Actions -->
+    <q-card-actions align="center">
+      <KAction
+        id="resend-verify-signup"
+        label="KVerifyEmailManager.ACTION"
+        renderer="form-button"
+        outline
+        :handler="resendVerifySignup"
+      />
+      <KAction
+        id="verify-email"
+        label="APPLY"
+        renderer="form-button"
+        :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 '../..'
+
+// Props
+defineProps({
+  notifierEmail: {
+    type: String,
+    default: true
+  }
+})
+
+// Data
+const User = Store.get('user')
+const formRef = ref(null)
+const processing = ref(false)
+const schema = 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: 'KVerifyEmailManager.TOKEN_LABEL'
+      }
+    }
+  },
+  required: ['token']
+})
+
+// Functions
+async function apply () {
+  const { isValid, values } = formRef.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('KVerifyEmailManager.EMAIL_VERIFIED')
+    })
+  } catch (error) {
+    processing.value = false
+    Notify.create({
+      type: 'negative',
+      message: i18n.t('KVerifyEmailManager.ERROR_MESSAGE')
+    })
+  }
+}
+function resendVerifySignup () {
+  utils.resendVerifySignup(User.email)
+}
+</script>

package/core/client/components/account/index.js

@@ -1,5 +1,7 @@
-import KAccountActivity from './KAccountActivity.vue'
+import KAccount from './KAccount.vue'
+import KProfile from './KProfile.vue'
 
 export {
-  KAccountActivity
+  KAccount,
+  KProfile
 }

package/core/client/components/app/KAbout.vue

@@ -47,6 +47,8 @@ const { clientVersionName, apiVersionName } = useVersion()
 const platform = getPlatform()
 // logo component
 const logoComponent = ref(loadComponent(_.get(config, 'logoComponent', 'KLogo')))
+// changelog url
+const changelog = _.get(config, 'appChangelog')
 // bug report
 const bugReport = {
   address: _.get(config, 'publisherContact'),
@@ -61,25 +63,36 @@ _.forOwn(platform, (value, key) => { bugReport.body += `${key}: ${value}%0D%0A`
 bugReport.body += `domain: ${_.get(config, 'domain')}%0D%0A`
 bugReport.body += `flavor: ${_.get(config, 'flavor')}%0D%0A`
 // actions
-const defaultActions = [
-  {
+const defaultActions = [{
+  id: 'platform-info',
+  icon: 'las la-desktop',
+  label: 'KAbout.PLATFORM_INFO',
+  stack: true,
+  dialog: {
+    title: 'KAbout.PLATFORM_INFO',
+    component: 'app/KPlatform',
+    okAction: 'CLOSE',
+    widthPolicy: 'narrow'
+  }
+}
+]
+if (_.isNil(bugReport.address)) {
+  defaultActions.unshift({
     id: 'report-bug',
     icon: 'las la-bug',
     label: 'KAbout.BUG_REPORT',
     stack: true,
     url: `mailto:${bugReport.address}?subject=${bugReport.subject}&body=${bugReport.body}`
-  }, {
-    id: 'platform-info',
-    icon: 'las la-desktop',
-    label: 'KAbout.PLATFORM_INFO',
+  })
+}
+if (!_.isNil(changelog)) {
+  defaultActions.unshift({
+    id: 'view-changelog',
+    icon: 'las la-history',
+    label: 'KAbout.VIEW_CHANGELOG',
     stack: true,
-    dialog: {
-      title: 'KAbout.PLATFORM_INFO',
-      component: 'app/KPlatform',
-      okAction: 'CLOSE',
-      widthPolicy: 'narrow'
-    }
-  }
-]
+    url: changelog
+  })
+}
 const actions = ref(_.get(config, 'about.actions', defaultActions))
 </script>

package/core/client/components/app/KPlatform.vue

@@ -39,10 +39,10 @@ const platform = getPlatform()
 // function
 async function copy () {
   try {
-    await copyToClipboard(JSON.stringify(platform.value, null, 2))
+    await copyToClipboard(JSON.stringify(platform, null, 2))
     $q.notify({ type: 'positive', message: i18n.t('KPlatform.INFO_COPIED') })
   } catch (error) {
-    $q.notify({ message: i18n.t('KPositionIndicator.CANNOT_COPY_INFO') })
+    $q.notify({ type: 'negative', message: i18n.t('KPositionIndicator.CANNOT_COPY_INFO') })
   }
 }
 </script>

package/core/client/components/app/KWelcome.vue

@@ -1,52 +1,72 @@
 <template>
   <q-dialog v-model="showWelcome" persistent>
-    <q-card class="q-pa-sm column q-gutter-y-md" style="min-width: 50vw">
+    <q-card class="q-pa-xs column items-center q-gutter-y-xs no-wrap">
       <!-- Logo -->
-      <component :is="logoComponent" />
+      <component
+        :is="logoComponent"
+        :height="dense ? '70px' : '100px'"
+      />
       <!-- Carousel -->
-      <div class="row justify-center">
-        <q-carousel
-          class="q-pa-none"
-          v-model="currentSlide"
-          swipeable
-          animated
-          padding
-          navigation
-          transition-prev="scale"
-          transition-next="scale"
-          control-type="flat"
-          control-color="primary"
+      <q-carousel
+        v-model="currentSlide"
+        swipeable
+        animated
+        navigation
+        transition-prev="scale"
+        transition-next="scale"
+        control-type="flat"
+        control-color="primary"
+        height="320px"
+      >
+        <q-carousel-slide
+          name="welcome"
+          class="column no-wrap justify-center text-center q-gutter-sm"
         >
-          <q-carousel-slide name="welcome" class="column no-wrap justify-center text-center q-gutter-md">
-            <div class="text-h5">{{ $t('KWelcome.WELCOME_TITLE') }}</div>
-            <div class="text-subtitle1">{{ $t('KWelcome.WELCOME_MESSAGE') }}</div>
-            <div class="text-subtitle1">{{ $t('KWelcome.ONLINE_HELP') }}
-              <q-icon size="1.5em" class="text-primary cursor-pointer" name="las la-external-link-square-alt" @click="onOnlineHelp()"/>
-            </div>
-          </q-carousel-slide>
-          <q-carousel-slide name="tour" class="column no-wrap justify-center text-center q-gutter-md">
-            <div class="text-subtitle1">{{ $t('KWelcome.TOUR_MESSAGE') }}
-              <q-icon size="1.5em" class="text-primary cursor-pointer" name="las la-external-link-square-alt" @click="onDefaultTour()"/>
-            </div>
-            <div class="text-subtitle1">{{ $t('KWelcome.TOUR_LINK_MESSAGE') }}</div>
-          </q-carousel-slide>
-          <q-carousel-slide name="goodbye" class="column no-wrap justify-center text-center q-gutter-md">
-            <div class="text-subtitle1">
-              <span>
-                {{ $t('KWelcome.CONTEXTUAL_HELP') }}
-                <q-icon size="1.5em" class="text-primary cursor-pointer" name="las la-question-circle"/>
-              </span>
-            </div>
-            <div class="text-subtitle1">{{ $t('KWelcome.GOODBYE_MESSAGE') }}</div>
-          </q-carousel-slide>
-        </q-carousel>
-      </div>
-      <div class="row justify-center">
-        <k-action id="close-button" label="CLOSE" renderer="form-button" :handler="() => hide()" />
-      </div>
-      <div class="row justify-center">
-        <q-checkbox v-model="toggle" @update:modelValue="onToggleIntroduction" :label="$t('KWelcome.HIDE_WELCOME')" color="primary" />
+          <div :class="dense ? 'text-weight-medium' : 'text-h6'">{{ $t('KWelcome.WELCOME_TITLE') }}</div>
+          <div>{{ $t('KWelcome.WELCOME_MESSAGE') }}</div>
+          <div>{{ $t('KWelcome.ONLINE_HELP') }}
+            <q-icon size="1.5em" class="text-primary cursor-pointer" name="las la-external-link-square-alt" @click="onOnlineHelp()"/>
+          </div>
+        </q-carousel-slide>
+        <q-carousel-slide
+          name="tour"
+          class="column no-wrap justify-center text-center q-gutter-sm"
+        >
+          <div>{{ $t('KWelcome.TOUR_MESSAGE') }}
+            <q-icon size="1.5em" class="text-primary cursor-pointer" name="las la-external-link-square-alt" @click="onDefaultTour()"/>
+          </div>
+          <div>{{ $t('KWelcome.TOUR_LINK_MESSAGE') }}</div>
+        </q-carousel-slide>
+        <q-carousel-slide
+          name="goodbye"
+          class="column no-wrap justify-center text-center q-gutter-sm"
+        >
+          <div>
+            <span>
+              {{ $t('KWelcome.CONTEXTUAL_HELP') }}
+              <q-icon size="1.5em" class="text-primary cursor-pointer" name="las la-question-circle"/>
+            </span>
+          </div>
+          <div>{{ $t('KWelcome.GOODBYE_MESSAGE') }}</div>
+        </q-carousel-slide>
+      </q-carousel>
+      <div :class="dense ? 'q-py-xs' : 'q-py-md'">
+        <KAction
+          id="close-button"
+          label="CLOSE"
+          renderer="form-button"
+          :handler="() => hide()"
+        />
       </div>
+      <q-checkbox
+        v-model="toggle"
+        :label="$t('KWelcome.HIDE_WELCOME')"
+        color="primary"
+        size="xs"
+        :dense="dense"
+        @update:modelValue="onToggleIntroduction"
+        :class="dense ? 'q-pt-xs text-caption' : 'q-pt-md'"
+      />
     </q-card>
   </q-dialog>
 </template>
@@ -54,19 +74,25 @@
 <script setup>
 import _ from 'lodash'
 import config from 'config'
-import { ref, onBeforeUnmount } from 'vue'
-import { openURL } from 'quasar'
+import { ref, computed, onBeforeUnmount } from 'vue'
+import { openURL, useQuasar } from 'quasar'
 import { Store, api } from '../..'
 import { loadComponent } from '../../utils'
 import KAction from '../KAction.vue'
 
 // Data
+const $q = useQuasar()
 const logoComponent = ref(loadComponent(_.get(config, 'logoComponent', 'KLogo')))
 const defaultTour = _.get(config, 'welcome.tour', 'home')
 const showWelcome = ref(false)
 const currentSlide = ref('welcome')
 const toggle = ref(false)
 
+// Computed
+const dense = computed(() => {
+  return $q.screen.lt.sm
+})
+
 // functions
 function getWelcomeKey () {
   return _.get(config, 'appName').toLowerCase() + '-welcome'