@kalisio/kdk 2.0.0 → 2.1.0

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

@@ -0,0 +1,90 @@
+<template>
+  <KScreen :title="$t('KSendResetPassword.TITLE')">
+    <div slot="screen-content">
+      <div class="column justify-center sm-gutter">
+        <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 setup>
+import _ from 'lodash'
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { i18n, utils } from '../..'
+import KScreen from '../screen/KScreen.vue'
+
+// 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'
+      }
+    }
+  },
+  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')
+    }
+  }
+  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

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

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

@@ -0,0 +1,98 @@
+<template>
+  <div class="column">
+    <!-- Banner -->
+    <div class="row justify-center">
+      <component :is="logoComponent" />
+    </div>
+    <!-- Version -->
+    <KVersion class="q-pa-sm" />
+    <!-- Endpoint -->
+    <div class="row justify-center">
+      <cite>{{ $t('KAbout.DOMAIN') }}
+        <a :href="$config('domain')" target="_blank">{{ $config('domain') }}</a>
+      </cite>
+      <cite>
+        &nbsp;({{ $config('flavor') }})
+      </cite>
+    </div>
+    <!-- separator -->
+    <div class="q-py-md">
+      <q-separator />
+    </div>
+    <!-- Actions -->
+    <KPanel
+      id="actions"
+      :content="actions"
+      class="justify-center"
+    />
+    <!-- Sponsor -->
+    <KSponsor class="q-pt-lg" />
+  </div>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import config from 'config'
+import { ref } from 'vue'
+import { i18n } from '../../i18n'
+import { loadComponent } from '../../utils'
+import { getPlatform } from '../../utils/utils.platform'
+import { useVersion } from '../../composables'
+import KVersion from '../KVersion.vue'
+import KSponsor from '../KSponsor.vue'
+import KPanel from '../KPanel.vue'
+
+// Data
+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'),
+  subject: i18n.t('KAbout.BUG_REPORT_SUBJECT', {
+    appName: _.get(config, 'appName'),
+    clientVersion: clientVersionName.value,
+    apiVersion: apiVersionName.value
+  }),
+  body: i18n.t('KAbout.BUG_REPORT_BODY')
+}
+_.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 = [{
+  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}`
+  })
+}
+if (!_.isNil(changelog)) {
+  defaultActions.unshift({
+    id: 'view-changelog',
+    icon: 'las la-history',
+    label: 'KAbout.VIEW_CHANGELOG',
+    stack: true,
+    url: changelog
+  })
+}
+const actions = ref(_.get(config, 'about.actions', defaultActions))
+</script>

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

@@ -0,0 +1,12 @@
+<template>
+  <div v-if="User">
+    <KLayout />
+  </div>
+</template>
+
+<script setup>
+import KLayout from '../layout/KLayout.vue'
+import { Store } from '../../store.js'
+
+const User = Store.getRef('user')
+</script>

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

@@ -0,0 +1,55 @@
+<template>
+  <q-markup-table>
+    <thead class="bg-grey-3">
+      <tr>
+        <th class="text-left">{{ $t('KPlatform.PROPERTY') }}</th>
+        <th>
+          <div class="row items-center">
+            <div>{{ $t('KPlatform.VALUE') }}</div>
+            <q-space />
+            <KAction
+              id="copy-info"
+              icon="las la-copy"
+              tooltip="KPlatform.COPY_INFO"
+              :handler="copy"
+            />
+          </div>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(value, prop) in platform" :key="prop">
+        <td>{{ prop }}</td>
+        <td>{{ value === true ? $t('YES') : value === false ? $t('NO') : value }}</td>
+      </tr>
+    </tbody>
+  </q-markup-table>
+</template>
+
+<script setup>
+import { useQuasar, copyToClipboard } from 'quasar'
+import { i18n } from '../../i18n.js'
+import { getPlatform } from '../../utils/utils.platform'
+import KAction from '../KAction.vue'
+
+// data
+const $q = useQuasar()
+const platform = getPlatform()
+
+// function
+async function copy () {
+  try {
+    await copyToClipboard(JSON.stringify(platform, null, 2))
+    $q.notify({ type: 'positive', message: i18n.t('KPlatform.INFO_COPIED') })
+  } catch (error) {
+    $q.notify({ type: 'negative', message: i18n.t('KPositionIndicator.CANNOT_COPY_INFO') })
+  }
+}
+</script>
+
+<style lang="scss">
+// overwrite the default style allow word wrapping
+.q-table--no-wrap td {
+  white-space: normal;
+}
+</style>

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

@@ -0,0 +1,43 @@
+<template>
+  <KForm
+    id="settings"
+    ref="formRef"
+    :values="settings"
+    schema="settings.update"
+    :schema-properties="schemaFilter"
+  />
+</template>
+
+<script setup>
+import _ from 'lodash'
+import { ref, onMounted } from 'vue'
+import { api } from '../../api.js'
+import KForm from '../form/KForm.vue'
+
+// Data
+const serviceSettings = api.getService('settings')
+const formRef = ref(null)
+const settings = ref(null)
+const schemaFilter = ref(null)
+
+// Functions
+async function apply () {
+  const { isValid, values } = formRef.value.validate()
+  if (isValid) {
+    await serviceSettings.patch('settings', values)
+    return true
+  }
+}
+
+// Hooks
+onMounted(async () => {
+  settings.value = await serviceSettings.get('settings')
+  const mapping = serviceSettings.getSettingsMapping()
+  schemaFilter.value = Object.keys(mapping).filter(value => _.get(mapping, value))
+})
+
+// Expose
+defineExpose({
+  apply
+})
+</script>

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

@@ -0,0 +1,41 @@
+<template>
+  <div class="q-pa-md">
+    <KMarkdownViewer :url="url" />
+  </div>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import config from 'config'
+import { ref } from 'vue'
+import { getAppLocale } from '../../utils/utils.locale.js'
+import KMarkdownViewer from '../media/KMarkdownViewer.vue'
+
+// Data
+const appName = _.get(config, 'appName')
+const terms = _.get(config, 'terms', _.toLower(appName) + '-terms')
+const locale = getAppLocale()
+const url = ref(`${terms}_${locale}.md`)
+</script>
+
+<style lang="scss">
+// override headers size
+h1 {
+  font-size: 2.5rem;
+}
+h2 {
+  font-size: 2rem;
+}
+h3 {
+  font-size: 1.5rem;
+}
+h4 {
+  font-size: 1.4rem;
+}
+h5 {
+  font-size: 1.3rem;
+}
+h6 {
+  font-size: 1.2rem;
+}
+</style>