@simsustech/quasar-components 0.1.0

package/src/ui/authentication/LoginForm.vue

@@ -0,0 +1,162 @@
+<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.login.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.login.fields.username"
+      bottom-slots
+      :rules="validations['username']"
+      lazy-rules
+    />
+    <q-input
+      id="password"
+      v-model="password"
+      class="q-pt-none"
+      v-bind="input"
+      name="password"
+      :type="showPassword ? 'text' : 'password'"
+      :label="lang.login.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-btn
+      v-if="passwordForgotUrl"
+      class="q-pt-none"
+      :label="lang.login.forgotPassword"
+      size="sm"
+      flat
+      :to="passwordForgotUrl"
+    ></q-btn>
+    <slot name="default" :submit="submit" />
+  </q-form>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'LoginForm'
+}
+</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'
+
+import QSubmitButton from '../general/QSubmitButton.vue'
+
+export interface Props {
+  useUsername?: boolean
+  passwordForgotUrl?: string
+  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,
+      password,
+      username,
+      done
+    }: {
+      email?: string
+      password: string
+      username?: 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 username = ref('')
+const showPassword = ref(false)
+const header = computed(() => lang.value.login.login)
+const createAccount = computed(() => lang.value.login.createAccount)
+const invalidCredentials = computed(() => lang.value.login.invalidCredentials)
+const unprocessableRequest = computed(() => lang.value.unprocessableRequest)
+
+const formRef = ref<QForm>()
+const validations = computed<
+  Record<string, ((val: string) => boolean | string)[]>
+>(() => ({
+  email: [
+    (val) => !!val || lang.value.login.validations.fieldRequired,
+    (val) => isEmail(val) || lang.value.login.validations.invalidEmail
+  ],
+  username: [(val) => !!val || lang.value.login.validations.fieldRequired],
+  password: [(val) => !!val || lang.value.login.validations.fieldRequired]
+}))
+
+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,
+        done: evt.done
+      })
+    } else evt.done()
+  })
+}
+
+const variables = ref({
+  header,
+  createAccount,
+  invalidCredentials,
+  unprocessableRequest
+})
+const functions = ref({
+  submit
+})
+defineExpose({
+  variables,
+  functions
+})
+</script>

package/src/ui/authentication/OtpInput.vue

@@ -0,0 +1,30 @@
+<template>
+  <q-input
+    id="otp"
+    name="otp"
+    :model-value="modelValue"
+    bottom-slots
+    lazy-rules
+    :label="lang.otp.verificationCode"
+    :rules="validations['otp']"
+    @update:model-value="$emit('update:modelValue', $event)"
+  />
+</template>
+
+<script setup lang="ts">
+import { QInput } from 'quasar'
+import { computed } from 'vue'
+import { useLang } from './lang'
+
+defineProps<{
+  modelValue: string
+}>()
+defineEmits(['update:modelValue'])
+
+const lang = useLang()
+const validations = computed<
+  Record<string, ((val: string) => boolean | string)[]>
+>(() => ({
+  otp: [(val) => !!val || lang.value.otp.validations.fieldRequired]
+}))
+</script>

package/src/ui/authentication/PasswordChangeForm.vue

@@ -0,0 +1,161 @@
+<template>
+  <q-form ref="formRef" class="q-gutter-md" v-bind="form">
+    <otp-input v-bind="input" v-model="otp" />
+    <q-input
+      v-bind="input"
+      id="newPassword"
+      v-model="newPassword"
+      name="newPassword"
+      :type="showPassword ? 'text' : 'password'"
+      :label="lang.password.fields.password"
+      bottom-slots
+      :rules="validations['newPassword']"
+      lazy-rules
+    >
+      <template #append>
+        <q-icon
+          :name="showPassword ? 'visibility' : 'visibility_off'"
+          class="cursor-pointer"
+          @click="showPassword = !showPassword"
+        />
+      </template>
+    </q-input>
+    <q-input
+      v-bind="input"
+      id="repeatNewPassword"
+      v-model="repeatNewPassword"
+      name="repeatNewPassword"
+      :type="showRepeatPassword ? 'text' : 'password'"
+      :label="lang.password.fields.repeatPassword"
+      bottom-slots
+      :rules="validations['repeatNewPassword']"
+      lazy-rules
+    >
+      <template #append>
+        <q-icon
+          :name="showRepeatPassword ? 'visibility' : 'visibility_off'"
+          class="cursor-pointer"
+          @click="showRepeatPassword = !showRepeatPassword"
+        />
+      </template>
+    </q-input>
+    <slot name="default" :submit="submit" />
+  </q-form>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'PasswordChangeForm'
+}
+</script>
+
+<script setup lang="ts">
+import { ref, computed, watch, toRef, withDefaults } from 'vue'
+import { useQuasar, QFormProps, QForm, QInputProps } from 'quasar'
+import { useLang, loadLang } from './lang'
+import equals from 'validator/es/lib/equals.js'
+
+import QSubmitButton from '../general/QSubmitButton.vue'
+import OtpInput from './OtpInput.vue'
+
+export interface Props {
+  email: string
+  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,
+  form: undefined,
+  input: undefined
+})
+// const attrs = useAttrs();
+const emit = defineEmits<{
+  (
+    e: 'submit',
+    {
+      email,
+      newPassword,
+      otp,
+      done
+    }: {
+      email: string
+      newPassword: string
+      otp: 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 = toRef(props, 'email')
+const minimumPasswordLength = toRef(props, 'minimumPasswordLength')
+const otp = ref('')
+const newPassword = ref('')
+const repeatNewPassword = ref('')
+const showPassword = ref(false)
+const showRepeatPassword = ref(false)
+const header = computed(() => lang.value.password.changePassword)
+
+const formRef = ref<QForm>()
+const validations = computed<
+  Record<string, ((val: string) => boolean | string)[]>
+>(() => ({
+  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, newPassword.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,
+        newPassword: newPassword.value,
+        otp: otp.value,
+        done: evt.done
+      })
+    } else evt.done()
+  })
+}
+
+const variables = ref({
+  header
+})
+const functions = ref({
+  submit
+})
+defineExpose({
+  variables,
+  functions
+})
+</script>

package/src/ui/authentication/PasswordChangeStepper.vue

@@ -0,0 +1,153 @@
+<template>
+  <q-stepper v-model="step">
+    <q-step name="requestOtp" :title="requestOtpHeader">
+      <request-otp-form
+        ref="requestOtpFormRef"
+        :input="input"
+        @submit="requestOtp"
+      ></request-otp-form>
+    </q-step>
+
+    <q-step name="changePassword" :title="passwordChangeHeader">
+      <password-change-form
+        ref="passwordChangeFormRef"
+        :email="email"
+        :input="input"
+        @submit="changePassword"
+      >
+      </password-change-form>
+    </q-step>
+    <template #navigation>
+      <q-stepper-navigation class="text-right">
+        <q-submit-button
+          v-if="step === 'requestOtp'"
+          is-next-button
+          @submit="requestOtpFormRef?.functions.submit"
+        ></q-submit-button>
+        <q-submit-button
+          v-if="step === 'changePassword'"
+          @submit="passwordChangeFormRef?.functions.submit"
+        ></q-submit-button>
+      </q-stepper-navigation>
+    </template>
+  </q-stepper>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'PasswordChangeStepper'
+}
+</script>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useQuasar, QInputProps } from 'quasar'
+import { useLang, loadLang } from './lang'
+import QSubmitButton from '../general/QSubmitButton.vue'
+import RequestOtpForm from './RequestOtpForm.vue'
+import PasswordChangeForm from './PasswordChangeForm.vue'
+export interface Props {
+  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: 'requestOtp',
+    {
+      email,
+      done
+    }: {
+      email: string
+      done: () => void
+    }
+  ): void
+  (
+    e: 'changePassword',
+    {
+      email,
+      newPassword,
+      otp,
+      done
+    }: {
+      email: string
+      newPassword: string
+      otp: 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 steps = ['requestOtp', 'changePassword'] as const
+const step = ref<typeof steps[number]>('requestOtp')
+const email = ref('')
+const header = computed(() => lang.value.password.changePassword)
+const passwordChanged = computed(() => lang.value.password.passwordChanged)
+const unprocessableRequest = computed(() => lang.value.unprocessableRequest)
+const checkEmail = computed(() => lang.value.otp.checkEmail)
+
+const requestOtpFormRef = ref<typeof RequestOtpForm>()
+const passwordChangeFormRef = ref<typeof PasswordChangeForm>()
+
+const requestOtpHeader = computed(
+  () => requestOtpFormRef.value?.variables.header || ''
+)
+const passwordChangeHeader = computed(
+  () => passwordChangeFormRef.value?.variables.header || ''
+)
+const requestOtp: InstanceType<typeof RequestOtpForm>['$props']['onSubmit'] = ({
+  email: emittedEmail,
+  done
+}) => {
+  emit('requestOtp', {
+    email: emittedEmail,
+    done: () => {
+      email.value = emittedEmail
+      done()
+    }
+  })
+}
+
+const changePassword: InstanceType<
+  typeof PasswordChangeForm
+>['$props']['onSubmit'] = ({ email, newPassword, otp, done }) => {
+  emit('changePassword', {
+    email,
+    newPassword,
+    otp,
+    done
+  })
+}
+
+const variables = ref({
+  header,
+  passwordChanged,
+  unprocessableRequest,
+  checkEmail,
+  steps
+})
+const functions = ref({
+  goToStep: (newStep: typeof steps[number]) => (step.value = newStep)
+})
+defineExpose({
+  variables,
+  functions
+})
+</script>

package/src/ui/authentication/README.md

@@ -0,0 +1,15 @@
+# Authentication
+
+> Authentication related components for Quasar Framework
+
+# Usage
+
+```html
+<template>
+  <login-form />
+</template>
+
+<script setup lang="ts">
+  import { LoginForm } from '@simsustech/quasar-components/authentication'
+</script>
+```