@simsustech/quasar-components 0.1.0

package/src/ui/authentication/RegisterForm.vue

@@ -0,0 +1,218 @@
+<template>
+  <q-form ref="formRef" class="q-gutter-md" v-bind="form">
+    <q-input
+      v-if="!useUsername"
+      v-bind="input"
+      id="email"
+      v-model="email"
+      name="email"
+      :label="lang.register.fields.email"
+      bottom-slots
+      :rules="validations['email']"
+      lazy-rules
+    />
+    <q-input
+      v-if="useUsername"
+      v-bind="input"
+      id="username"
+      v-model="username"
+      name="username"
+      :label="lang.register.fields.username"
+      bottom-slots
+      :rules="validations['username']"
+      lazy-rules
+    />
+    <q-input
+      v-for="field in extraFields"
+      :key="field.name"
+      v-model="extraFieldValues[field.name]"
+      type="text"
+      :name="field.name"
+      :label="field.label"
+      :rules="field.rules"
+      bottom-slots
+    />
+    <q-input
+      v-bind="input"
+      id="password"
+      v-model="password"
+      name="password"
+      :type="showPassword ? 'text' : 'password'"
+      :label="lang.register.fields.password"
+      :rules="validations['password']"
+      lazy-rules
+      bottom-slots
+    >
+      <template #append>
+        <q-icon
+          :name="showPassword ? 'visibility' : 'visibility_off'"
+          class="cursor-pointer"
+          @click="showPassword = !showPassword"
+        />
+      </template>
+    </q-input>
+    <q-input
+      id="repeatPassword"
+      v-model="repeatPassword"
+      :type="showPassword ? 'text' : 'password'"
+      :label="lang.register.fields.repeatPassword"
+      bottom-slots
+      required
+      :rules="validations['repeatPassword']"
+      lazy-rules
+    >
+      <template #append>
+        <q-icon
+          :name="showPassword ? 'visibility' : 'visibility_off'"
+          class="cursor-pointer"
+          @click="showPassword = !showPassword"
+        />
+      </template>
+    </q-input>
+    <slot name="default" :submit="submit" />
+  </q-form>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'RegisterForm'
+}
+</script>
+
+<script setup lang="ts">
+import { ref, computed, watch, toRef } from 'vue'
+import { useQuasar, QFormProps, QForm, QInputProps } from 'quasar'
+import { useLang, loadLang } from './lang'
+import isEmail from 'validator/es/lib/isEmail.js'
+import equals from 'validator/es/lib/equals.js'
+import isAlphanumeric from 'validator/es/lib/isAlphanumeric.js'
+
+import QSubmitButton from '../general/QSubmitButton.vue'
+
+export interface Props {
+  useUsername?: boolean
+  extraFields?: {
+    name: string
+    label: string
+    rules?: ((val: string) => boolean)[]
+  }[]
+  minimumPasswordLength?: number
+  form?: QFormProps & HTMLFormElement
+  input?: Omit<
+    QInputProps,
+    | 'id'
+    | 'name'
+    | 'modelValue'
+    | 'label'
+    | 'rules'
+    | 'type'
+    | 'lazy-rules'
+    | 'autofocus'
+    | ('label' & { style?: Partial<CSSStyleDeclaration> })
+  >
+}
+const props = withDefaults(defineProps<Props>(), {
+  minimumPasswordLength: 8,
+  extraFields: undefined,
+  form: undefined,
+  input: undefined
+})
+// const attrs = useAttrs();
+const emit = defineEmits<{
+  (
+    e: 'submit',
+    {
+      email,
+      password,
+      username,
+      extraFields,
+      done
+    }: {
+      email?: string
+      password: string
+      username?: string
+      extraFields?: Record<string, string>
+      done: () => void
+    }
+  ): void
+}>()
+const $q = useQuasar()
+const lang = useLang()
+if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
+watch($q.lang, (val) => {
+  loadLang($q.lang.isoName)
+})
+
+const email = ref('')
+const password = ref('')
+const repeatPassword = ref('')
+const extraFieldValues = ref<Record<string, string>>({})
+const username = ref('')
+const showPassword = ref(false)
+const header = computed(() => lang.value.register.register)
+const forgotPassword = computed(() => lang.value.register.forgotPassword)
+const accountCreated = computed(() => lang.value.register.accountCreated)
+const unprocessableRequest = computed(() => lang.value.unprocessableRequest)
+const alreadyRegistered = computed(() => lang.value.register.alreadyRegistered)
+
+const minimumPasswordLength = toRef(props, 'minimumPasswordLength')
+const formRef = ref<QForm>()
+const validations = computed<
+  Record<string, ((val: string) => boolean | string)[]>
+>(() => ({
+  email: [
+    (val) => !!val || lang.value.register.validations.fieldRequired,
+    (val) => isEmail(val) || lang.value.register.validations.invalidEmail
+  ],
+  username: [
+    (val) => !!val || lang.value.register.validations.fieldRequired,
+    (val) =>
+      isAlphanumeric(val) || lang.value.register.validations.notAlphaNumeric
+  ],
+  password: [
+    (val) => !!val || lang.value.password.validations.fieldRequired,
+    (val) =>
+      val.length >= minimumPasswordLength.value ||
+      lang.value.password.validations.minimumPasswordLength(
+        minimumPasswordLength.value
+      )
+  ],
+  repeatPassword: [
+    (val) => !!val || lang.value.password.validations.fieldRequired,
+    (val) =>
+      equals(val, password.value) ||
+      lang.value.password.validations.passwordsDoNotMatch
+  ]
+}))
+
+const submit: InstanceType<typeof QSubmitButton>['$props']['onSubmit'] = (
+  evt
+) => {
+  formRef.value?.validate().then((success) => {
+    if (success) {
+      emit('submit', {
+        email: email.value,
+        password: password.value,
+        username: username.value,
+        extraFields: extraFieldValues.value,
+        done: evt.done
+      })
+    } else evt.done()
+  })
+}
+
+const variables = ref({
+  header,
+  forgotPassword,
+  accountCreated,
+  unprocessableRequest,
+  alreadyRegistered
+})
+const functions = ref({
+  submit
+})
+defineExpose({
+  variables,
+  functions
+})
+</script>

package/src/ui/authentication/RequestOtpForm.vue

@@ -0,0 +1,99 @@
+<template>
+  <q-form ref="formRef" v-bind="form">
+    <q-input
+      v-bind="input"
+      id="email"
+      v-model.trim="email"
+      name="email"
+      type="text"
+      :label="lang.otp.fields.email"
+      :rules="validations['email']"
+      lazy-rules
+      autofocus
+    />
+    <slot name="default" :submit="submit" />
+  </q-form>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'RequestOtpForm'
+}
+</script>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useQuasar, QFormProps, QForm, QInputProps } from 'quasar'
+import { useLang, loadLang } from './lang'
+import isEmail from 'validator/es/lib/isEmail.js'
+import QSubmitButton from '../general/QSubmitButton.vue'
+
+export interface Props {
+  form?: QFormProps & HTMLFormElement
+  input?: Omit<
+    QInputProps,
+    | 'id'
+    | 'name'
+    | 'modelValue'
+    | 'label'
+    | 'rules'
+    | 'type'
+    | 'lazy-rules'
+    | 'autofocus'
+    | ('label' & { style?: Partial<CSSStyleDeclaration> })
+  >
+}
+defineProps<Props>()
+// const attrs = useAttrs();
+const emit = defineEmits<{
+  (
+    e: 'submit',
+    {
+      email,
+      done
+    }: {
+      email: string
+      done: () => void
+    }
+  ): void
+}>()
+const $q = useQuasar()
+const lang = useLang()
+if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
+watch($q.lang, (val) => {
+  loadLang($q.lang.isoName)
+})
+
+const email = ref('')
+const header = computed(() => lang.value.otp.request)
+
+const formRef = ref<QForm>()
+const validations = computed<
+  Record<string, ((val: string) => boolean | string)[]>
+>(() => ({
+  email: [
+    (val) => !!val || lang.value.otp.validations.fieldRequired,
+    (val) => isEmail(val) || lang.value.otp.validations.invalidEmail
+  ]
+}))
+
+const submit: InstanceType<typeof QSubmitButton>['$props']['onSubmit'] = ({
+  done
+}) => {
+  formRef.value?.validate().then((success) => {
+    if (success) {
+      emit('submit', {
+        email: email.value,
+        done: done
+      })
+    } else done()
+  })
+}
+
+const variables = ref({ header })
+const functions = ref({ submit })
+defineExpose({
+  variables,
+  functions
+})
+</script>

package/src/ui/authentication/UserMenuButton.vue

@@ -0,0 +1,54 @@
+<template>
+  <q-btn icon="person">
+    <q-menu>
+      <q-list>
+        <q-item :to="userRoute">
+          <q-item-section>{{ lang.myAccount }}</q-item-section>
+        </q-item>
+        <slot name="default" />
+        <q-item clickable @click="emit('signOut')">
+          <q-item-section>{{ lang.signOut }}</q-item-section>
+        </q-item>
+      </q-list>
+    </q-menu>
+  </q-btn>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'UserMenuButton'
+}
+</script>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useQuasar } from 'quasar'
+import { useLang, loadLang } from './lang'
+import type { RouteLocationRaw } from 'vue-router'
+
+export interface Props {
+  userRoute: RouteLocationRaw
+}
+defineProps<Props>()
+// const attrs = useAttrs();
+const emit = defineEmits<{
+  (e: 'signOut'): void
+}>()
+const $q = useQuasar()
+const lang = useLang()
+if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
+watch($q.lang, (val) => {
+  loadLang($q.lang.isoName)
+})
+
+const variables = ref({
+  // header: lang.value.some.nested.prop
+})
+const functions = ref({
+  // submit
+})
+defineExpose({
+  variables,
+  functions
+})
+</script>

package/src/ui/authentication/VerificationSlider.vue

@@ -0,0 +1,57 @@
+<template>
+  {{ lang.verification.slider }}
+  <q-slider v-model="sliderValue" :color="sliderColor" :readonly="completed" />
+</template>
+
+<script lang="ts">
+export default {
+  name: 'VerificationSlider'
+}
+</script>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useQuasar } from 'quasar'
+import { useLang, loadLang } from './lang'
+
+export interface Props {
+  useVerificationSlider?: boolean
+}
+defineProps<Props>()
+// const attrs = useAttrs();
+const emit = defineEmits<{
+  (e: 'verified'): void
+}>()
+const $q = useQuasar()
+const lang = useLang()
+if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
+watch($q.lang, (val) => {
+  loadLang($q.lang.isoName)
+})
+
+const sliderValue = ref(0)
+const sliderColor = ref('red')
+const completed = ref(false)
+
+watch(sliderValue, (newVal, oldVal) => {
+  if (newVal > 80) {
+    sliderColor.value = 'green'
+    setTimeout(() => {
+      sliderValue.value = 100
+      completed.value = true
+    }, 500)
+    emit('verified')
+  }
+})
+
+const variables = ref({
+  // header: lang.value.some.nested.prop
+})
+const functions = ref({
+  // submit
+})
+defineExpose({
+  variables,
+  functions
+})
+</script>

package/src/ui/authentication/index.ts

@@ -0,0 +1,12 @@
+export { default as RequestOtpForm } from './RequestOtpForm.vue'
+export { default as OtpInput } from './OtpInput.vue'
+export { default as EmailChangeForm } from './EmailChangeForm.vue'
+export { default as EmailChangeStepper } from './EmailChangeStepper.vue'
+export { default as PasswordChangeForm } from './PasswordChangeForm.vue'
+export { default as PasswordChangeStepper } from './PasswordChangeStepper.vue'
+export { default as LoginForm } from './LoginForm.vue'
+export { default as RegisterForm } from './RegisterForm.vue'
+export { default as VerificationSlider } from './VerificationSlider.vue'
+export { default as ConsentList } from './ConsentList.vue'
+export { default as UserMenuButton } from './UserMenuButton.vue'
+export { default as LoginButton } from './LoginButton.vue'

package/src/ui/authentication/lang/en-US.ts

@@ -0,0 +1,94 @@
+import type { Language } from '../lang'
+
+const lang: Language = {
+  isoName: 'en-US',
+  myAccount: 'Account',
+  signOut: 'Sign out',
+  unprocessableRequest: 'The server was unable to process the request.',
+  consent: {
+    message: (name: string) => `${name} is requesting access to your data.`,
+    deny: 'Deny',
+    allow: 'Allow'
+  },
+  email: {
+    fields: {
+      email: 'Email address',
+      newEmail: 'Your new email address',
+      repeatNewEmail: 'Repeat your new email address'
+    },
+    validations: {
+      fieldRequired: 'Field is required.',
+      invalidEmail: 'A valid email address is required.',
+      emailsDoNotMatch: 'The email addresses do not match.'
+    },
+    changeEmail: 'Change your email address.',
+    emailChanged: 'Your email address has been changed.'
+  },
+  otp: {
+    fields: {
+      email: 'Email'
+    },
+    validations: {
+      fieldRequired: 'Field is required.',
+      invalidEmail: 'A valid email address is required.'
+    },
+    request: 'Request a one-time password',
+    checkEmail:
+      'You will receive a verification code in your email. Please use this verification code in the next step.',
+    verificationCode: 'Verification code'
+  },
+  login: {
+    fields: {
+      email: 'Email',
+      password: 'Password',
+      username: 'Username'
+    },
+    validations: {
+      fieldRequired: 'Field is required.',
+      invalidEmail: 'A valid email address is required.'
+    },
+    login: 'Login',
+    loginWith: 'Login with',
+    createAccount: 'Create account',
+    forgotPassword: 'Forgot your password?',
+    invalidCredentials: 'Email address or password is incorrect.'
+  },
+  password: {
+    fields: {
+      password: 'Password',
+      repeatPassword: 'Repeat password'
+    },
+    validations: {
+      fieldRequired: 'Field is required',
+      minimumPasswordLength: (minimumPasswordLength) =>
+        `The minimum length of the password is ${minimumPasswordLength} characters.`,
+      passwordsDoNotMatch: 'The password do not match.'
+    },
+    changePassword: 'Change your password.',
+    passwordChanged: 'Your password has been changed.'
+  },
+  register: {
+    fields: {
+      email: 'Email',
+      password: 'Password',
+      username: 'Username',
+      repeatPassword: 'Repeat password'
+    },
+    validations: {
+      fieldRequired: 'Field is required',
+      invalidEmail: 'A valid email address is required.',
+      notAlphaNumeric: 'Veld mag geen speciale tekens bevatten.'
+    },
+    register: 'Register',
+    forgotPassword: 'Forgot your password?',
+    accountCreated:
+      'Your account has been sucessfully created. You can now login with your credentials.',
+    alreadyRegistered: 'Email address is already registered.'
+  },
+  verification: {
+    slider:
+      'Sleep a.u.b. de onderstaande balk helemaal naar rechts tot deze groen wordt.'
+  }
+}
+
+export default lang

package/src/ui/authentication/lang/index.ts

@@ -0,0 +1,124 @@
+export interface Language {
+  isoName: string
+  unprocessableRequest: string
+  myAccount: string
+  signOut: string
+  consent: {
+    message: (name: string) => string
+    deny: string
+    allow: string
+  }
+  email: {
+    fields: {
+      email: string
+      newEmail: string
+      repeatNewEmail: string
+    }
+    validations: {
+      fieldRequired: string
+      invalidEmail: string
+      emailsDoNotMatch: string
+    }
+    changeEmail: string
+    emailChanged: string
+  }
+  login: {
+    fields: {
+      email: string
+      password: string
+      username: string
+    }
+    validations: {
+      fieldRequired: string
+      invalidEmail: string
+    }
+    login: string
+    loginWith: string
+    forgotPassword: string
+    createAccount: string
+    invalidCredentials: string
+  }
+  otp: {
+    fields: {
+      email: string
+    }
+    validations: {
+      fieldRequired: string
+      invalidEmail: string
+    }
+    request: string
+    checkEmail: string
+    verificationCode: string
+  }
+  password: {
+    fields: {
+      password: string
+      repeatPassword: string
+    }
+    validations: {
+      fieldRequired: string
+      minimumPasswordLength: (minimumPasswordLength: number) => string
+      passwordsDoNotMatch: string
+    }
+    changePassword: string
+    passwordChanged: string
+  }
+  register: {
+    fields: {
+      email: string
+      password: string
+      repeatPassword: string
+      username: string
+    }
+    validations: {
+      fieldRequired: string
+      invalidEmail: string
+      notAlphaNumeric: string
+    }
+    register: string
+    forgotPassword: string
+    accountCreated: string
+    alreadyRegistered: string
+  }
+  verification: {
+    slider: string
+  }
+}
+
+import type { Ref } from 'vue'
+import { ref } from 'vue'
+import en from './en-US'
+export const lang = ref(en)
+
+const locales = import.meta.glob<{ default: Language }>([
+  './*.ts',
+  '!./index.ts'
+])
+
+export const defineLang = (lang: Language) => {
+  return lang
+}
+
+export const useLang = () => {
+  return lang as Ref<Language>
+}
+
+let loadingLanguage = false
+export const loadLang = async (isoName: string) => {
+  if (!loadingLanguage) {
+    loadingLanguage = true
+    try {
+      const data = (await locales[`./${isoName}.ts`]()).default
+
+      if (data) {
+        lang.value = data
+      }
+    } catch (e) {
+      if (import.meta.env.DEBUG) console.error(e)
+      throw new Error(
+        `[quasar-components] Failed to load ${isoName} language file.`
+      )
+    }
+    loadingLanguage = false
+  }
+}