@saasmakers/ui 2.0.10 → 2.0.12

package/app/assets/styles/base.css

@@ -1,5 +1,6 @@
 html,
 body {
+  scrollbar-gutter: stable;
   touch-action: manipulation;
 }
 

package/app/components/auth/AuthBox.vue

@@ -0,0 +1,225 @@
+<script lang="ts" setup>
+import { isSocialLoginCancellation } from '../../utils/auth'
+
+const props = withDefaults(defineProps<AuthBox>(), {
+  action: 'login',
+  hasBox: false,
+})
+
+const { t } = useI18n()
+const { isAndroid } = useCapacitor()
+const isClosed = ref(false)
+const emailToReactivate = ref('')
+const reactivatingAccount = ref(false)
+const reactivationSuccessful = ref(false)
+
+const authenticating = reactive({
+  apple: false,
+  google: false,
+})
+
+onMounted(() => {
+  if (isClosed.value) {
+    isClosed.value = false
+  }
+})
+
+function onAccountClosed(email: string) {
+  emailToReactivate.value = email
+  isClosed.value = true
+}
+
+async function onReactivateAccount() {
+  reactivatingAccount.value = true
+
+  try {
+    await props.onReactivate({ email: emailToReactivate.value })
+
+    isClosed.value = false
+    reactivationSuccessful.value = true
+  }
+  catch (error) {
+    console.error(error)
+  }
+  finally {
+    reactivatingAccount.value = false
+  }
+}
+
+function onSocialConnectError(error: unknown) {
+  if (isSocialLoginCancellation(error)) {
+    return
+  }
+
+  console.error(error)
+}
+
+async function onSocialConnectSuccess(payload: AuthSocialConnectSuccess) {
+  authenticating[payload.provider] = true
+
+  try {
+    const result = await props.onSocialLogin(payload)
+
+    if (result.isClosed) {
+      onAccountClosed(result.email ?? '')
+    }
+  }
+  catch (error) {
+    console.error(error)
+  }
+  finally {
+    authenticating[payload.provider] = false
+  }
+}
+</script>
+
+<template>
+  <div
+    class="flex flex-col items-center"
+    :class="{ 'rounded-lg bg-gray-100 dark:bg-gray-900 border shadow-sm border-gray-200 dark:border-gray-800 p-6 sm:p-10': hasBox }"
+  >
+    <div class="w-full flex flex-col gap-6 sm:w-96">
+      <BaseAlert
+        v-if="isClosed"
+        size="xs"
+        status="error"
+      >
+        <div class="flex flex-col gap-2 text-xs">
+          <span>{{ t('authUserAccountClosed') }}</span>
+
+          <span
+            v-if="!reactivatingAccount"
+            class="cursor-pointer underline"
+            role="button"
+            tabindex="0"
+            @click="onReactivateAccount"
+            @keydown.enter="onReactivateAccount"
+            @keydown.space.prevent="onReactivateAccount"
+          >
+            {{ t('reactivateAccount') }}
+          </span>
+
+          <span v-else>
+            {{ t('reactivatingAccount') }}
+          </span>
+        </div>
+      </BaseAlert>
+
+      <BaseAlert
+        v-else-if="reactivationSuccessful"
+        size="xs"
+        status="success"
+        :text="t('reactivationSuccessful')"
+      />
+
+      <div class="flex flex-col gap-4">
+        <AuthSocialConnect
+          v-if="!isAndroid"
+          :apple-config="appleConfig"
+          :loading="authenticating.apple"
+          provider="apple"
+          @error="onSocialConnectError"
+          @success="onSocialConnectSuccess"
+        />
+
+        <AuthSocialConnect
+          :google-config="googleConfig"
+          :loading="authenticating.google"
+          provider="google"
+          @error="onSocialConnectError"
+          @success="onSocialConnectSuccess"
+        />
+      </div>
+
+      <AuthEmailConnect
+        :action="action"
+        :on-forgot-password="onForgotPassword"
+        :on-login="onLogin"
+        @account-closed="onAccountClosed"
+      />
+    </div>
+  </div>
+</template>
+
+<i18n lang="json">
+{
+  "de": {
+    "authUserAccountClosed": "Dein Konto ist geschlossen",
+    "reactivateAccount": "Klicke hier, um es zu reaktivieren",
+    "reactivatingAccount": "Dein Konto wird reaktiviert...",
+    "reactivationSuccessful": "Dein Konto wurde reaktiviert. Du kannst dich jetzt wieder anmelden."
+  },
+  "en": {
+    "authUserAccountClosed": "Your account is closed",
+    "reactivateAccount": "Click here to reactivate it",
+    "reactivatingAccount": "Reactivating your account...",
+    "reactivationSuccessful": "Your account has been reactivated. You can now sign in again."
+  },
+  "es": {
+    "authUserAccountClosed": "Tu cuenta está cerrada",
+    "reactivateAccount": "Haz clic aquí para reactivarla",
+    "reactivatingAccount": "Reactivando tu cuenta...",
+    "reactivationSuccessful": "Tu cuenta ha sido reactivada. Ya puedes iniciar sesión de nuevo."
+  },
+  "fr": {
+    "authUserAccountClosed": "Votre compte est fermé",
+    "reactivateAccount": "Cliquez ici pour le réactiver",
+    "reactivatingAccount": "Réactivation de votre compte...",
+    "reactivationSuccessful": "Votre compte a été réactivé. Vous pouvez désormais vous reconnecter."
+  },
+  "id": {
+    "authUserAccountClosed": "Akun Anda ditutup",
+    "reactivateAccount": "Klik di sini untuk mengaktifkannya kembali",
+    "reactivatingAccount": "Mengaktifkan kembali akun Anda...",
+    "reactivationSuccessful": "Akun Anda telah diaktifkan kembali. Anda sekarang dapat masuk kembali."
+  },
+  "it": {
+    "authUserAccountClosed": "Il tuo account è chiuso",
+    "reactivateAccount": "Clicca qui per riattivarlo",
+    "reactivatingAccount": "Riattivazione dell'account...",
+    "reactivationSuccessful": "Il tuo account è stato riattivato. Ora puoi accedere di nuovo."
+  },
+  "ja": {
+    "authUserAccountClosed": "あなたのアカウントは閉じられています",
+    "reactivateAccount": "ここをクリックして再活性化してください",
+    "reactivatingAccount": "アカウントを再活性化しています...",
+    "reactivationSuccessful": "アカウントが再活性化されました。再度ログインできます。"
+  },
+  "ko": {
+    "authUserAccountClosed": "계정이 닫혀 있습니다",
+    "reactivateAccount": "여기를 눌러 다시 활성화하세요",
+    "reactivatingAccount": "계정을 다시 활성화하는 중...",
+    "reactivationSuccessful": "계정이 다시 활성화되었습니다. 이제 다시 로그인할 수 있습니다."
+  },
+  "nl": {
+    "authUserAccountClosed": "Je account is gesloten",
+    "reactivateAccount": "Klik hier om het te reactiveren",
+    "reactivatingAccount": "Je account wordt gereactiveerd...",
+    "reactivationSuccessful": "Je account is gereactiveerd. Je kunt je nu opnieuw aanmelden."
+  },
+  "pl": {
+    "authUserAccountClosed": "Twoje konto jest zamknięte",
+    "reactivateAccount": "Kliknij tutaj, aby je reaktywować",
+    "reactivatingAccount": "Reaktywacja Twojego konta...",
+    "reactivationSuccessful": "Twoje konto zostało reaktywowane. Możesz się teraz ponownie zalogować."
+  },
+  "pt": {
+    "authUserAccountClosed": "A tua conta está encerrada",
+    "reactivateAccount": "Clica aqui para reativar",
+    "reactivatingAccount": "A reativar a tua conta...",
+    "reactivationSuccessful": "A tua conta foi reativada. Já podes iniciar sessão novamente."
+  },
+  "pt-BR": {
+    "authUserAccountClosed": "Sua conta está encerrada",
+    "reactivateAccount": "Clique aqui para reativar",
+    "reactivatingAccount": "Reativando sua conta...",
+    "reactivationSuccessful": "Sua conta foi reativada. Agora você pode entrar novamente."
+  },
+  "vi": {
+    "authUserAccountClosed": "Tài khoản của bạn đã đóng",
+    "reactivateAccount": "Nhấn vào đây để kích hoạt lại",
+    "reactivatingAccount": "Đang kích hoạt lại tài khoản của bạn...",
+    "reactivationSuccessful": "Tài khoản của bạn đã được kích hoạt lại. Bạn có thể đăng nhập lại ngay bây giờ."
+  }
+}
+</i18n>

package/app/components/auth/AuthEmailConnect.vue

@@ -0,0 +1,486 @@
+<script lang="ts" setup>
+import useVuelidate from '@vuelidate/core'
+import { email, maxLength, minLength, required, requiredIf } from '@vuelidate/validators'
+
+const props = withDefaults(defineProps<AuthEmailConnect>(), {
+  action: 'login',
+  size: 'base',
+})
+
+const emit = defineEmits<{
+  accountClosed: [email: string]
+}>()
+
+const currentWindow = ref<AuthEmailConnectCurrentWindow>('login')
+const forgettingPassword = ref(false)
+const loggingWithEmail = ref(false)
+const resettingTurnstile = ref(true)
+
+const turnstile = ref<{
+  reset: () => void
+}>()
+
+const { t } = useI18n()
+
+const form = reactive({
+  captchaToken: '',
+  email: '',
+  password: '',
+})
+
+const v$ = useVuelidate({
+  email: {
+    email,
+    required,
+  },
+  password: {
+    maxLength: maxLength(255),
+    minLength: minLength(6),
+    required: requiredIf(() => currentWindow.value === 'login'),
+  },
+}, form)
+
+watch(
+  () => form.captchaToken,
+  (captchaToken) => {
+    resettingTurnstile.value = !captchaToken
+  },
+  { immediate: true },
+)
+
+async function onForgotPassword() {
+  try {
+    v$.value.$touch()
+
+    if (!v$.value.$invalid && !forgettingPassword.value) {
+      forgettingPassword.value = true
+
+      const result = await props.onForgotPassword({ email: form.email })
+
+      if (result.isClosed) {
+        emit('accountClosed', result.email ?? '')
+      }
+      else {
+        v$.value.$reset()
+      }
+    }
+  }
+  catch (error) {
+    console.error(error)
+  }
+
+  forgettingPassword.value = false
+}
+
+async function onLogin() {
+  try {
+    v$.value.$touch()
+
+    if (!v$.value.$invalid && !loggingWithEmail.value && !resettingTurnstile.value) {
+      loggingWithEmail.value = true
+
+      const result = await props.onLogin({
+        captchaToken: form.captchaToken,
+        email: form.email,
+        password: form.password,
+      })
+
+      if (result.isClosed) {
+        emit('accountClosed', result.email ?? '')
+      }
+      else {
+        v$.value.$reset()
+      }
+    }
+  }
+  catch (error) {
+    console.error(error)
+  }
+  finally {
+    form.captchaToken = ''
+
+    turnstile.value?.reset()
+
+    loggingWithEmail.value = false
+  }
+}
+
+function onUpdateCurrentWindow(newCurrentWindow: AuthEmailConnectCurrentWindow) {
+  currentWindow.value = newCurrentWindow
+
+  v$.value.$reset()
+}
+</script>
+
+<template>
+  <form :class="{ 'opacity-50 pointer-events-none': resettingTurnstile }">
+    <div
+      v-if="currentWindow === 'login'"
+      key="login"
+    >
+      <FieldInput
+        v-model="form.email"
+        background="white"
+        class="mb-4"
+        :label="t('email')"
+        type="email"
+        :validation="v$.email"
+        @submit="onLogin"
+      />
+
+      <FieldInput
+        v-model="form.password"
+        background="white"
+        class="mb-6"
+        :label="t('password')"
+        type="password"
+        :validation="v$.password"
+        @submit="onLogin"
+      >
+        <template #label>
+          <BaseText
+            v-if="action === 'login'"
+            bold
+            class="mb-3 cursor-pointer text-indigo-700 sm:mb-0 dark:text-indigo-300 hover:text-gray-800 dark:hover:text-gray-200"
+            size="xs"
+            :text="t('reset')"
+            @click="onUpdateCurrentWindow('forgotPassword')"
+          />
+        </template>
+      </FieldInput>
+
+      <BaseButton
+        color="indigo"
+        full-width
+        :loading="loggingWithEmail"
+        reverse
+        :size="size"
+        :text="{
+          sm: resettingTurnstile ? t('loading') : t(`buttons.${action}.sm`),
+          base: resettingTurnstile ? t('loading') : t(`buttons.${action}.base`),
+        }"
+        @click="onLogin"
+      />
+
+      <NuxtTurnstile
+        ref="turnstile"
+        v-model="form.captchaToken"
+      />
+    </div>
+
+    <div
+      v-else-if="currentWindow === 'forgotPassword'"
+      key="forgotPassword"
+    >
+      <FieldInput
+        v-model="form.email"
+        background="white"
+        class="mb-6"
+        :label="t('email')"
+        type="email"
+        :validation="v$.email"
+        @submit="onForgotPassword"
+      >
+        <template #label>
+          <BaseText
+            bold
+            class="mb-3 cursor-pointer text-indigo-700 sm:mb-0 dark:text-indigo-300 hover:text-gray-800 dark:hover:text-gray-200"
+            size="xs"
+            :text="t('login')"
+            @click="onUpdateCurrentWindow('login')"
+          />
+        </template>
+      </FieldInput>
+
+      <BaseButton
+        color="indigo"
+        full-width
+        :loading="forgettingPassword"
+        reverse
+        :text="{
+          sm: t('buttons.forgotPassword.sm'),
+          base: t('buttons.forgotPassword.base'),
+        }"
+        @click="onForgotPassword"
+      />
+    </div>
+  </form>
+</template>
+
+<i18n lang="json">
+{
+  "de": {
+    "buttons": {
+      "forgotPassword": {
+        "base": "Passwort zurücksetzen",
+        "sm": "Zurücksetzen"
+      },
+      "login": {
+        "base": "Mit E-Mail fortfahren",
+        "sm": "Weiter"
+      },
+      "register": {
+        "base": "Mit E-Mail registrieren",
+        "sm": "Registrieren"
+      }
+    },
+    "email": "E-Mail-Adresse",
+    "loading": "Laden…",
+    "login": "Anmelden?",
+    "password": "Passwort",
+    "reset": "Passwort zurücksetzen?"
+  },
+  "en": {
+    "buttons": {
+      "forgotPassword": {
+        "base": "Reset the password",
+        "sm": "Reset"
+      },
+      "login": {
+        "base": "Continue with Email",
+        "sm": "Continue"
+      },
+      "register": {
+        "base": "Register with Email",
+        "sm": "Register"
+      }
+    },
+    "email": "Email address",
+    "loading": "Loading…",
+    "login": "Login?",
+    "password": "Password",
+    "reset": "Reset password?"
+  },
+  "es": {
+    "buttons": {
+      "forgotPassword": {
+        "base": "Restablecer la contraseña",
+        "sm": "Restablecer"
+      },
+      "login": {
+        "base": "Continuar con correo electrónico",
+        "sm": "Continuar"
+      },
+      "register": {
+        "base": "Registrarse con correo electrónico",
+        "sm": "Registrarse"
+      }
+    },
+    "email": "Correo electrónico",
+    "loading": "Cargando…",
+    "login": "¿Iniciar sesión?",
+    "password": "Contraseña",
+    "reset": "¿Restablecer contraseña?"
+  },
+  "fr": {
+    "buttons": {
+      "forgotPassword": {
+        "base": "Réinitialiser le mot de passe",
+        "sm": "Réinitialiser"
+      },
+      "login": {
+        "base": "Se connecter avec Email",
+        "sm": "Continuer"
+      },
+      "register": {
+        "base": "S'inscrire avec Email",
+        "sm": "S'inscrire"
+      }
+    },
+    "email": "Adresse e-mail",
+    "loading": "Chargement…",
+    "login": "Se connecter ?",
+    "password": "Mot de passe",
+    "reset": "Réinitialiser ?"
+  },
+  "id": {
+    "buttons": {
+      "forgotPassword": {
+        "base": "Atur ulang kata sandi",
+        "sm": "Atur ulang"
+      },
+      "login": {
+        "base": "Lanjutkan dengan Email",
+        "sm": "Lanjutkan"
+      },
+      "register": {
+        "base": "Daftar dengan Email",
+        "sm": "Daftar"
+      }
+    },
+    "email": "Alamat email",
+    "loading": "Memuat…",
+    "login": "Masuk?",
+    "password": "Kata sandi",
+    "reset": "Atur ulang kata sandi?"
+  },
+  "it": {
+    "buttons": {
+      "forgotPassword": {
+        "base": "Reimposta la password",
+        "sm": "Reimposta"
+      },
+      "login": {
+        "base": "Continua con email",
+        "sm": "Continua"
+      },
+      "register": {
+        "base": "Registrati con email",
+        "sm": "Registrati"
+      }
+    },
+    "email": "Email",
+    "loading": "Caricamento…",
+    "login": "Accedere?",
+    "password": "Password",
+    "reset": "Reimpostare la password?"
+  },
+  "ja": {
+    "buttons": {
+      "forgotPassword": {
+        "base": "パスワードをリセット",
+        "sm": "リセット"
+      },
+      "login": {
+        "base": "メールアドレスで続ける",
+        "sm": "続ける"
+      },
+      "register": {
+        "base": "メールアドレスで登録",
+        "sm": "登録"
+      }
+    },
+    "email": "メールアドレス",
+    "loading": "読み込み中…",
+    "login": "ログイン？",
+    "password": "パスワード",
+    "reset": "パスワードをリセット？"
+  },
+  "ko": {
+    "buttons": {
+      "forgotPassword": {
+        "base": "비밀번호 재설정",
+        "sm": "재설정"
+      },
+      "login": {
+        "base": "이메일로 계속하기",
+        "sm": "계속"
+      },
+      "register": {
+        "base": "이메일로 가입하기",
+        "sm": "가입"
+      }
+    },
+    "email": "이메일 주소",
+    "loading": "로딩 중…",
+    "login": "로그인?",
+    "password": "비밀번호",
+    "reset": "비밀번호 재설정?"
+  },
+  "nl": {
+    "buttons": {
+      "forgotPassword": {
+        "base": "Het wachtwoord resetten",
+        "sm": "Resetten"
+      },
+      "login": {
+        "base": "Doorgaan met e-mail",
+        "sm": "Doorgaan"
+      },
+      "register": {
+        "base": "Registreren met e-mail",
+        "sm": "Registreren"
+      }
+    },
+    "email": "E-mailadres",
+    "loading": "Laden…",
+    "login": "Inloggen?",
+    "password": "Wachtwoord",
+    "reset": "Wachtwoord resetten?"
+  },
+  "pl": {
+    "buttons": {
+      "forgotPassword": {
+        "base": "Zresetuj hasło",
+        "sm": "Resetuj"
+      },
+      "login": {
+        "base": "Kontynuuj przez e-mail",
+        "sm": "Kontynuuj"
+      },
+      "register": {
+        "base": "Zarejestruj się przez e-mail",
+        "sm": "Zarejestruj się"
+      }
+    },
+    "email": "Adres e-mail",
+    "loading": "Ładowanie…",
+    "login": "Zalogować się?",
+    "password": "Hasło",
+    "reset": "Zresetować hasło?"
+  },
+  "pt": {
+    "buttons": {
+      "forgotPassword": {
+        "base": "Repor a palavra-passe",
+        "sm": "Repor"
+      },
+      "login": {
+        "base": "Continuar com e-mail",
+        "sm": "Continuar"
+      },
+      "register": {
+        "base": "Registar com e-mail",
+        "sm": "Registar"
+      }
+    },
+    "email": "Endereço de e-mail",
+    "loading": "A carregar…",
+    "login": "Iniciar sessão?",
+    "password": "Palavra-passe",
+    "reset": "Repor palavra-passe?"
+  },
+  "pt-BR": {
+    "buttons": {
+      "forgotPassword": {
+        "base": "Redefinir a senha",
+        "sm": "Redefinir"
+      },
+      "login": {
+        "base": "Continuar com e-mail",
+        "sm": "Continuar"
+      },
+      "register": {
+        "base": "Cadastrar com e-mail",
+        "sm": "Cadastrar"
+      }
+    },
+    "email": "Endereço de e-mail",
+    "loading": "Carregando…",
+    "login": "Entrar?",
+    "password": "Senha",
+    "reset": "Redefinir senha?"
+  },
+  "vi": {
+    "buttons": {
+      "forgotPassword": {
+        "base": "Đặt lại mật khẩu",
+        "sm": "Đặt lại"
+      },
+      "login": {
+        "base": "Tiếp tục bằng Email",
+        "sm": "Tiếp tục"
+      },
+      "register": {
+        "base": "Đăng ký bằng Email",
+        "sm": "Đăng ký"
+      }
+    },
+    "email": "Địa chỉ email",
+    "loading": "Đang tải…",
+    "login": "Đăng nhập?",
+    "password": "Mật khẩu",
+    "reset": "Đặt lại mật khẩu?"
+  }
+}
+</i18n>

package/app/components/auth/AuthSocialConnect.vue

@@ -94,6 +94,7 @@ async function onStartAuthentication() {
     }
 
     emit('error', error)
+
     console.error(error)
   }
   finally {

package/app/types/auth.d.ts

@@ -1,3 +1,41 @@
+export type AuthAction = 'login' | 'register'
+
+export interface AuthBox {
+  action?: AuthAction
+  appleConfig?: AuthSocialConnectAppleConfig
+  googleConfig?: AuthSocialConnectGoogleConfig
+  hasBox?: boolean
+  onForgotPassword: AuthEmailConnect['onForgotPassword']
+  onLogin: AuthEmailConnect['onLogin']
+  onReactivate: (params: {
+    email: string
+  }) => Promise<void>
+  onSocialLogin: (payload: AuthSocialConnectSuccess) => Promise<AuthConnectResult>
+}
+
+export interface AuthConnectResult {
+  email?: string
+  isClosed: boolean
+  isNew?: boolean
+}
+
+export interface AuthEmailConnect {
+  action?: AuthAction
+  onForgotPassword: (params: {
+    email: string
+  }) => Promise<AuthConnectResult>
+  onLogin: (params: AuthEmailConnectPayload) => Promise<AuthConnectResult>
+  size?: BaseButtonSize
+}
+
+export type AuthEmailConnectCurrentWindow = 'forgotPassword' | 'login'
+
+export interface AuthEmailConnectPayload {
+  captchaToken: string
+  email: string
+  password: string
+}
+
 export interface AuthSocialConnect {
   appleConfig?: AuthSocialConnectAppleConfig
   googleConfig?: AuthSocialConnectGoogleConfig

package/app/types/global.d.ts

@@ -2,6 +2,12 @@ import type { Directive } from 'vue'
 
 declare global {
   // Auth
+  type AuthAction = import('./auth').AuthAction
+  type AuthBox = import('./auth').AuthBox
+  type AuthConnectResult = import('./auth').AuthConnectResult
+  type AuthEmailConnect = import('./auth').AuthEmailConnect
+  type AuthEmailConnectCurrentWindow = import('./auth').AuthEmailConnectCurrentWindow
+  type AuthEmailConnectPayload = import('./auth').AuthEmailConnectPayload
   type AuthSocialConnect = import('./auth').AuthSocialConnect
   type AuthSocialConnectAppleConfig = import('./auth').AuthSocialConnectAppleConfig
   type AuthSocialConnectGoogleConfig = import('./auth').AuthSocialConnectGoogleConfig
@@ -135,6 +141,12 @@ declare global {
 }
 
 declare module 'vue' {
+  interface GlobalComponents {
+    NuxtTurnstile: new () => {
+      reset: () => void
+    }
+  }
+
   interface GlobalDirectives {
     vTooltip: Directive<HTMLElement, string | undefined | {
       content?: string

package/app/utils/auth.ts

@@ -3,7 +3,9 @@ export function isSocialLoginCancellation(error: unknown): boolean {
     return false
   }
 
-  const candidate = error as { code?: string }
+  const candidate = error as {
+    code?: string
+  }
 
   // @capgo/capacitor-social-login rejects user-dismissed sheets with this code on iOS and Android.
   // The message is localized, so never match on it.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "2.0.10",
+  "version": "2.0.12",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",