@nitra/cap 6.1.3 → 7.1.0

package/auth/NCapLoginApple.vue

@@ -0,0 +1,132 @@
+<template>
+  <div v-if="appleError" class="text-white text-red bg-red-1 q-pa-xs q-mb-md text-center">
+    {{ appleError }}
+  </div>
+  <q-btn
+    v-if="!isAndroid"
+    @click="signInWithApple()"
+    :loading="checkInProgress"
+    class="full-width bg-white"
+    padding="6px"
+    no-caps
+    unelevated
+    style="border: 1px solid #ddd">
+    <div class="row items-center full-width q-pl-xs text-grey-9">
+      <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 384 512">
+        <path
+          fill="#555555"
+          d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z" />
+      </svg>
+      <div class="col">{{ label }}</div>
+    </div>
+  </q-btn>
+</template>
+
+<script setup>
+import { Capacitor } from '@capacitor/core'
+import { SignInWithApple } from '@capacitor-community/apple-sign-in'
+import { ref } from 'vue'
+import { checkToken } from '@nitra/vite-boot/token'
+import tf from '@nitra/tfm'
+import homeCheck from './njs/home-check.js'
+
+const props = defineProps({
+  // apple signin options
+  id: { type: String, default: null, required: true },
+  verifyOnly: { type: Boolean, default: false }
+})
+
+// событие когда пользователь авторизован
+const emit = defineEmits(['verify', 'authorized'])
+
+const t = tf.bind({ tr: getTr() })
+
+const isAndroid = Capacitor.getPlatform() === 'android'
+const label = props.verifyOnly ? t`Прив’язати мій Apple` : t`Вхід через Apple`
+
+// console.log('props.id', props.id)
+const appleSignInOptions = {
+  clientId: props.id,
+  redirectURI: `https://${window.location.host}/not-used-with-popup`, // Не використовується з popup, але потрібно щоб було задано
+  // та й ще це повинен бути той самий домен, який вказаний в apple developer
+  // та й поточного домену де кнопка
+  scopes: 'email name', // в якості id будемо брати sub
+  state: 'origin:web', // Any string of your choice that you may use for some logic. It's optional and you may omit it.
+  usePopup: true, // Important if we want to capture the data apple sends on the client side.
+  nonce: 'nonce'
+}
+// лоадер
+const checkInProgress = ref(false)
+
+// APPLE
+const appleError = ref('')
+
+const authAppleUser = async identityToken => {
+  if (!identityToken) {
+    checkInProgress.value = false
+    return
+  }
+  // пользователь авторизован
+  try {
+    const respFromRun = await fetch('/auth/apple', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        idToken: identityToken,
+        verifyOnly: props.verifyOnly
+      })
+    })
+
+    const res = await respFromRun.json()
+    if (props.verifyOnly) {
+      emit('verify', res)
+      return
+    }
+
+    if (res?.token) {
+      const check = checkToken(res.token)
+      if (check.result === 'ok') {
+        emit('authorized', check.decoded)
+      } else {
+        // Перенаправляємо користувача на home, якщо йому дозволено тільки home
+        homeCheck(res.token)
+
+        appleError.value = t`Користувачу ${check.userName} не дозволено входити`
+      }
+    } else {
+      appleError.value = t`Помилка Apple авторизації`
+    }
+  } catch (error) {
+    appleError.value = error
+  } finally {
+    checkInProgress.value = false
+  }
+}
+
+const signInWithApple = async () => {
+  try {
+    const signInWithAppleResponse = await SignInWithApple.authorize(appleSignInOptions)
+    console.log(signInWithAppleResponse)
+    const { identityToken } = signInWithAppleResponse
+    await authAppleUser(identityToken)
+  } catch (error) {
+    appleError.value = error
+  }
+}
+
+/**
+ * LOCALIZATION
+ * @returns {object} translations
+ */
+function getTr() {
+  return {
+    'Вхід через Apple': { ru: 'Вход через аккаунт Apple' },
+    'Прив’язати мій Apple': { ru: 'Привязать мой Apple' },
+    'Помилка Apple авторизації': { ru: 'Ошибка авторизации Apple' },
+    'Користувачу ': { ru: 'Пользователю ' },
+    ' не дозволено входити': { ru: ' не разрешен вход' }
+  }
+}
+</script>

package/auth/NCapLoginGoogle.vue

@@ -0,0 +1,120 @@
+<template>
+  <div v-if="googleError" class="text-white text-red bg-red-1 q-pa-xs q-mb-md text-center">
+    {{ googleError }}
+  </div>
+  <q-btn
+    v-if="isGoogleAuthInitialized"
+    @click="signInWithGoogle()"
+    :loading="checkInProgress"
+    icon="fa-brands fa-google"
+    :label="t`Вхід через Google`"
+    class="full-width"
+    padding="sm md"
+    color="google"
+    no-caps />
+</template>
+
+<script setup>
+import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth'
+import { ref } from 'vue'
+import { checkToken } from '@nitra/vite-boot/token'
+import tf from '@nitra/tfm'
+import homeCheck from './njs/home-check.js'
+
+const googleError = ref('')
+
+const props = defineProps({
+  verifyOnly: { type: Boolean, default: false }
+})
+
+// событие когда пользователь авторизован
+const emit = defineEmits(['verify', 'authorized'])
+
+const t = tf.bind({ tr: getTr() })
+
+const checkInProgress = ref(false)
+const isGoogleAuthInitialized = ref(false)
+try {
+  GoogleAuth.init()
+  isGoogleAuthInitialized.value = true
+} catch {
+  isGoogleAuthInitialized.value = false
+}
+
+/**
+ *
+ */
+async function signInWithGoogle() {
+  checkInProgress.value = true
+  googleError.value = ''
+  try {
+    const response = await GoogleAuth.signIn()
+    const credential = response?.authentication?.idToken
+    if (!credential) {
+      checkInProgress.value = false
+      googleError.value = t`Помилка Google авторизації`
+      return
+    }
+    authGoogleUser(credential)
+  } catch {
+    checkInProgress.value = false
+    googleError.value = t`Помилка Google авторизації`
+  }
+}
+
+/**
+ *
+ * @param credential
+ */
+async function authGoogleUser(credential) {
+  try {
+    const respFromRun = await fetch('/auth/google', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        credential,
+        verifyOnly: props.verifyOnly
+      })
+    })
+
+    const res = await respFromRun.json()
+    if (props.verifyOnly) {
+      emit('verify', res)
+      return
+    }
+
+    if (res?.token) {
+      const check = checkToken(res.token)
+      if (check.result === 'ok') {
+        emit('authorized', check.decoded)
+      } else {
+        // Перенаправляємо користувача на home, якщо йому дозволено тільки home
+        homeCheck(res.token)
+
+        googleError.value = t`Користувачу ${check.userName} не дозволено входити`
+      }
+    } else {
+      googleError.value = t`Помилка Google авторизації`
+    }
+  } catch (error) {
+    googleError.value = error
+  } finally {
+    checkInProgress.value = false
+  }
+}
+
+/**
+ * LOCALIZATION
+ * @returns {object} translations
+ */
+function getTr() {
+  return {
+    'Помилка Google авторизації': { ru: 'Ошибка авторизации Google' },
+    'Користувачу ': { ru: 'Пользователю ' },
+    ' не дозволено входити': { ru: ' не разрешен вход' },
+    'Вхід через Google': { ru: 'Вход через аккаунт Google' }
+  }
+}
+</script>

package/auth/NCapLoginMulti.vue

@@ -0,0 +1,331 @@
+<template>
+  <q-page class="flex flex-center bg-grey-3">
+    <q-card style="width: 300px">
+      <!-- лого -->
+      <div style="margin-top: -50px" class="text-center">
+        <q-avatar class="shadow-2" size="100px">
+          <img :src="props.logo" />
+        </q-avatar>
+      </div>
+
+      <!-- вход по логину/паролю -->
+      <q-card-section class="q-pb-none">
+        <q-form @submit="loginSubmit" class="full-width q-gutter-y-md" autocomplete="on">
+          <div v-if="loginError" class="text-white text-red bg-red-1 q-pa-xs text-center">{{ loginError }}</div>
+
+          <q-input id="login" v-model.trim="login" type="login" autocomplete="username" :label="t`Логін`" outlined>
+            <template #prepend>
+              <q-icon name="person" />
+            </template>
+            <template v-if="login && browserSupportsWebAuthn()" #append>
+              <q-btn @click="biometry(login, 'login')" padding="none" flat icon="fingerprint" />
+            </template>
+          </q-input>
+          <q-input
+            id="password"
+            v-model="password"
+            :type="isPwd ? 'password' : 'text'"
+            autocomplete="current-password"
+            :label="t`Пароль`"
+            outlined>
+            <template #prepend>
+              <q-icon name="vpn_key" />
+            </template>
+            <template #append>
+              <q-icon @click="isPwd = !isPwd" :name="isPwd ? 'visibility_off' : 'visibility'" class="cursor-pointer" />
+            </template>
+          </q-input>
+
+          <q-btn
+            v-if="login && password && password.length > 4"
+            :loading="loginLoading"
+            type="submit"
+            :label="t`Увійти`"
+            class="full-width q-mt-md"
+            padding="md"
+            color="primary" />
+        </q-form>
+
+        <n-forgot-pass />
+      </q-card-section>
+
+      <!-- или -->
+      <q-card-section v-if="apple || google" class="row items-center q-gutter-x-md">
+        <q-separator class="col" />
+        <div>{{ t`АБО` }}</div>
+        <q-separator class="col" />
+      </q-card-section>
+
+      <q-card-section v-if="apple || google" class="q-gutter-y-md">
+        <!-- вход по email -->
+        <q-input
+          v-model="email"
+          type="email"
+          :label="t`Вхід через E-mail`"
+          debounce="300"
+          :rules="[checkEmail]"
+          :error-message="t`Помилковий формат email`"
+          :hint="email ? t`на цю адресу буде надіслано код` : undefined"
+          hide-bottom-space
+          outlined
+          autofocus>
+          <template #prepend>
+            <q-icon name="mail" />
+          </template>
+          <template v-if="email && checkEmail(email) && browserSupportsWebAuthn()" #append>
+            <q-btn @click="biometry(email)" padding="none" flat icon="fingerprint" />
+          </template>
+        </q-input>
+        <q-btn
+          v-if="email && checkEmail(email)"
+          @click="emailSubmit"
+          :label="t`Отримати код`"
+          :loading="emailLoading"
+          class="full-width q-mt-md"
+          padding="md"
+          color="primary" />
+
+        <!-- google логин -->
+        <div v-if="google">
+          <n-cap-login-google v-if="isNative" />
+          <n-login-google v-else :id="google" @authorized="authorized" />
+        </div>
+
+        <!-- apple логин -->
+        <div v-if="apple">
+          <n-cap-login-apple :id="apple" @authorized="authorized" />
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-page>
+</template>
+
+<script setup>
+import NCapLoginApple from './NCapLoginApple.vue'
+import NLoginGoogle from './NLoginGoogle.vue'
+import NCapLoginGoogle from './NCapLoginGoogle.vue'
+import homeCheck from './njs/home-check.js'
+import NForgotPass from './NForgotPass.vue'
+import { startAuthentication, browserSupportsWebAuthn } from '@simplewebauthn/browser'
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { date, Notify } from 'quasar'
+import { Capacitor } from '@capacitor/core'
+import { checkToken } from '@nitra/vite-boot/token'
+import { autoLogin, defaultLogin } from '@nitra/vite-boot/login'
+import tf from '@nitra/tfm'
+
+const router = useRouter()
+
+const props = defineProps({
+  logo: {
+    type: String,
+    default: 'https://cdn.jsdelivr.net/npm/@nitra/auth-components@2/assets/logo.jpeg'
+  },
+  google: {
+    type: String,
+    default: null
+  },
+  // apple signin options
+  apple: {
+    type: String,
+    default: null
+  }
+})
+
+// событие когда пользователь авторизован
+const emit = defineEmits(['authorized'])
+// Авто авторизація якщо у користувача є коректний токен
+autoLogin()
+
+const t = tf.bind({ tr: getTr() })
+
+const isNative = ref(Capacitor.isNativePlatform())
+
+// ВХОД ПО EMAIL
+const email = ref(localStorage.getItem('email') || '')
+const emailLowerCased = computed(() => email.value.toLowerCase())
+const emailLoading = ref(false)
+
+// валидный ли адрес
+const checkEmail = email => {
+  if (!email) {
+    return true
+  }
+
+  if (email.length > 320) {
+    return false
+  }
+
+  const regex =
+    /^(([^\s"(),.:;<>@[\\\]]+(\.[^\s"(),.:;<>@[\\\]]+)*)|(".+"))@((\[(?:\d{1,3}\.){3}\d{1,3}])|(([\dA-Za-z\-]+\.)+[A-Za-z]{2,}))$/
+
+  return regex.test(String(email).toLowerCase().trim())
+}
+
+// получить код
+const emailSubmit = async () => {
+  try {
+    emailLoading.value = true
+
+    const response = await fetch('/auth/otp-email', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        email: emailLowerCased.value,
+        href: globalThis.location.origin + '/code'
+      })
+    })
+    const res = await response.json()
+
+    if (res.error) {
+      loginError.value = JSON.stringify(res.error)
+    } else {
+      localStorage.setItem('email', emailLowerCased.value)
+      localStorage.setItem('email-otp-date', date.addToDate(new Date(), { minutes: 30 }))
+      await router.push('/code')
+    }
+  } catch (error) {
+    loginError.value = error.message
+  } finally {
+    emailLoading.value = false
+  }
+}
+
+// ВХОД ПО ЛОГИНУ/ПАРОЛЮ
+const login = ref(null)
+const password = ref(null)
+const isPwd = ref(true)
+const loginLoading = ref(false)
+const loginError = ref('')
+
+// отправить логин/пароль
+const loginSubmit = async () => {
+  try {
+    loginLoading.value = true
+    loginError.value = ''
+
+    const data = { login: login.value, pass: password.value }
+
+    const response = await fetch('/auth/send-login-pass', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(data)
+    })
+
+    const res = await response.json()
+
+    if (res.token) {
+      const check = checkToken(res.token)
+      if (check.result === 'ok') {
+        await defaultLogin(check.decoded, res.token)
+      } else {
+        // Перенаправляємо користувача на home, якщо йому дозволено тільки home
+        homeCheck(res.token)
+
+        loginError.value = t`Користувачу ${localStorage.getItem(
+          'email'
+        )} не дозволено входити в дане програмне забезпечення`
+      }
+    } else {
+      if (JSON.stringify(res.error).includes('Incorrect auth')) {
+        loginError.value = t`Помилковий логін або пароль`
+      } else {
+        loginError.value = t`Помилка: ${JSON.stringify(res.error)}`
+      }
+    }
+  } catch (error) {
+    loginError.value = error.message
+  } finally {
+    loginLoading.value = false
+  }
+}
+
+/**
+ *
+ * @param jwt
+ */
+function authorized(jwt) {
+  emit('authorized', jwt)
+}
+
+const biometry = async (user, type = 'email') => {
+  try {
+    // Отримуємо параметри реєстрації (зберігається challenge на сервері)
+    const resp = await fetch('/auth/generate-authentication-options', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        user,
+        type
+      })
+    })
+    const authOptions = await resp.json()
+
+    if (!authOptions.challenge) {
+      Notify.create({
+        type: 'warning',
+        message: t`${t`У користувача "`}${user}" немає зареєстрованих біометричних даних`
+      })
+      return
+    }
+
+    // Pass the options to the authenticator and wait for a response
+    const authResp = await startAuthentication(authOptions)
+
+    // POST the response to the endpoint that calls
+    const verificationResp = await fetch('/auth/verify-authentication', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(authResp)
+    })
+
+    // Wait for the results of verification
+    const res = await verificationResp.json()
+
+    if (res.verified && res.token) {
+      const check = checkToken(res.token)
+      if (check.result === 'ok') {
+        await defaultLogin(check.decoded, res.token)
+      } else {
+        loginError.value = t`Користувачу ${user} не дозволено входити в дане програмне забезпечення`
+      }
+    } else {
+      loginError.value = t`Користувачу ${user} не дозволено входити в дане програмне забезпечення`
+    }
+  } catch (error) {
+    Notify.create({ type: 'negative', message: `${error}` })
+  }
+}
+
+/**
+ * LOCALIZATION
+ * @returns {object} translations
+ */
+function getTr() {
+  return {
+    'на цю адресу буде надіслано код': { ru: 'на этот адрес будет отправлен код' },
+    'Помилковий формат email': { ru: 'Некорректный формат email' },
+    'Помилковий логін або пароль': { ru: 'Неверный логин или пароль' },
+    'Отримати код': { ru: 'Получить код' },
+    'Помилка: ': { ru: 'Ошибка: ' },
+    АБО: { ru: 'ИЛИ' },
+    Увійти: { ru: 'Войти' },
+    Логін: { ru: 'Логин' },
+    Пароль: { ru: 'Пароль' },
+    'У користувача "': { ru: 'У пользователя "' },
+    '" немає зареєстрованих біометричних даних': { ru: '" нет зарегистрированных биометрических данных' },
+    'Вхід через E-mail': { ru: 'Вход через E-mail' },
+    'Користувачу ': { ru: 'Пользователю ' },
+    ' не дозволено входити в дане програмне забезпечення': { ru: ' не разрешено входить в данное приложение' }
+  }
+}
+</script>

package/auth/NDialog.vue

@@ -0,0 +1,113 @@
+<template>
+  <q-dialog v-model="dialog" @hide="$emit('close')">
+    <q-card :style="'min-width: 330px;' + (wide ? 'max-width: 990px;' : 'max-width:90vw; ')">
+      <!-- Шапка диалога -->
+      <q-card-section :class="'text-white bg-' + color">
+        <div class="row items-center">
+          <q-icon v-if="icon" :name="icon" size="md" class="q-mr-sm" />
+          <div class="col">
+            <div class="text-h6">
+              {{ title }}
+            </div>
+            <div v-if="subtitle" class="text-subtitle1 q-my-xs">
+              {{ subtitle }}
+            </div>
+          </div>
+
+          <!-- закрыть диалог -->
+          <q-btn v-if="noActions" v-close-popup icon="close" color="white" class="q-ml-sm" round flat />
+        </div>
+      </q-card-section>
+
+      <!-- Слот для содержимого -->
+      <q-card-section>
+        <slot />
+      </q-card-section>
+
+      <!-- Дії -->
+      <q-card-section v-if="!noActions" class="row q-pt-none">
+        <!-- підтвердити -->
+        <q-btn @click="$emit('confirm')" :label="button" :color="color" padding="sm md" class="col" />
+        <!-- відмінити -->
+        <q-btn v-close-popup @click="$emit('cancel')" :label="t`Відмінити`" class="col" flat />
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import tf from '@nitra/tfm'
+
+const t = tf.bind({ tr: getTr() })
+
+const props = defineProps({
+  // состояние диалога
+  modelValue: {
+    type: Boolean,
+    default: null
+  },
+  // заголовок
+  title: {
+    type: String,
+    default: ''
+  },
+  // подзаголовок
+  subtitle: {
+    type: String,
+    default: ''
+  },
+  // иконка диалога
+  icon: {
+    type: String,
+    default: null
+  },
+  // цвет диалога
+  color: {
+    type: String,
+    default: 'primary'
+  },
+  // название кнопки подтверждения
+  button: {
+    type: String,
+    default: 'Подтвердить'
+  },
+  // название кнопки отмены
+  buttonCancel: {
+    type: String,
+    default: ''
+  },
+  // без кнопок (появится крестик закрытия диалога в шапке)
+  noActions: {
+    type: Boolean,
+    default: false
+  },
+  // широкий вариант
+  wide: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'confirm', 'cancel', 'close'])
+
+// состояние диалога - активен / неактивен
+const dialog = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+
+/**
+ * LOCALIZATION
+ * @returns {object} translations
+ */
+function getTr() {
+  return {
+    Відмінити: { ru: 'Отмена' }
+  }
+}
+</script>

package/auth/NForgotPass.vue

@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <q-btn
+      @click="forgotPassword = true"
+      :label="t`Забули пароль?`"
+      color="primary"
+      padding="16px 2px"
+      class="full-width"
+      align="center"
+      no-caps
+      flat />
+
+    <!-- Диалог - подтверждение удаления категории  -->
+    <n-dialog v-model="forgotPassword" @confirm="restorePassword" :title="t`Відновлення паролю`" :button="t`Відновити`">
+      <div v-if="forgotError" class="text-white text-red q-pa-xs text-center" style="background: #f002">
+        {{ forgotError }}
+      </div>
+      <q-input
+        v-model="forgotLogin"
+        :label="t`Ваш телефон або email`"
+        :rules="[val => !!val || t`вкажіть телефон чи email`]"
+        outlined
+        hide-bottom-space />
+    </n-dialog>
+  </div>
+</template>
+
+<script setup>
+import NDialog from './NDialog.vue'
+import { Notify } from 'quasar'
+import { ref } from 'vue'
+import tf from '@nitra/tfm'
+
+const t = tf.bind({ tr: getTr() })
+
+const forgotPassword = ref(false)
+const forgotLogin = ref('')
+const forgotError = ref('')
+
+const restorePassword = async () => {
+  forgotError.value = ''
+  try {
+    const response = await fetch('/auth/forgot-pass', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ login: forgotLogin.value })
+    })
+
+    const res = await response.json()
+
+    if (res.error) {
+      forgotError.value = t`Помилка: ${JSON.stringify(res.error)}`
+      return
+    }
+
+    if (!res.type) {
+      forgotError.value = t`Некоректно вказано email або номер телефону`
+      return
+    }
+
+    if (res.type === 'email') {
+      Notify.create({
+        type: 'positive',
+        message: t`Новий пароль надіслано на email ${forgotLogin.value}`
+      })
+    } else if (res.type === 'phone') {
+      Notify.create({
+        type: 'positive',
+        message: t`Новий пароль надіслано на номер ${forgotLogin.value}`
+      })
+    }
+
+    forgotPassword.value = false
+  } catch (error) {
+    forgotError.value = error
+  }
+}
+
+/**
+ * LOCALIZATION
+ * @returns {object} translations
+ */
+function getTr() {
+  return {
+    'Забули пароль?': { ru: 'Забыли пароль?' },
+    'Відновлення паролю': { ru: 'Восстановление пароля' },
+    Відновити: { ru: 'Восстановить' },
+    'Ваш телефон або email': { ru: 'Ваш телефон или email' },
+    'вкажіть телефон чи email': { ru: 'укажите телефон или email' },
+    'Помилка: ': { ru: 'Ошибка: ' },
+    'Некоректно вказано email або номер телефону': { ru: 'Некорректно указан email или номер телефона' },
+    'Новий пароль надіслано на email ': { ru: 'Новый пароль отправлен на email ' },
+    'Новий пароль надіслано на номер ': { ru: 'Новый пароль отправлен на номер ' }
+  }
+}
+</script>

package/auth/NLoginGoogle.vue

@@ -0,0 +1,114 @@
+<template>
+  <div v-if="googleError" class="text-white text-red bg-red-1 q-pa-xs q-mb-md text-center">
+    {{ googleError }}
+  </div>
+  <div id="buttonDiv" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { checkToken } from '@nitra/vite-boot/token'
+import tf from '@nitra/tfm'
+import homeCheck from './njs/home-check.js'
+
+const googleError = ref('')
+
+const props = defineProps({
+  id: { type: String, default: null, required: true },
+  verifyOnly: { type: Boolean, default: false }
+})
+
+// событие когда пользователь авторизован
+const emit = defineEmits(['verify', 'authorized'])
+
+const t = tf.bind({ tr: getTr() })
+
+let local = 'uk-UA'
+if (import.meta.env.VITE_T || import.meta.env.VITE_TFM === 'ru') {
+  local = 'ru_RU'
+}
+
+// Завантажуємо скрипт Google асинхронно
+const scriptTag = document.createElement('script')
+scriptTag.src = 'https://accounts.google.com/gsi/client'
+scriptTag.async = true
+scriptTag.defer = true
+// Та коли він завантажився ініціалізуємо його
+scriptTag.addEventListener('load', () => {
+  window.google.accounts.id.initialize({
+    client_id: props.id,
+    callback: handleCredentialResponse
+  })
+  // рендеримо кнопку з атрибутами
+  window.google.accounts.id.renderButton(document.querySelector('#buttonDiv'), {
+    theme: 'filled_white',
+    size: 'large',
+    text: 'signin_with',
+    width: '270',
+    locale: local
+  })
+})
+document.head.append(scriptTag)
+
+// Коли відповідь від кнопки прийшла
+/**
+ *
+ * @param credentialResponse
+ */
+async function handleCredentialResponse(credentialResponse) {
+  const credential = credentialResponse.credential
+  googleError.value = ''
+
+  if (!credentialResponse.clientId || !credential) {
+    googleError.value = t`Помилка Google авторизації`
+    return
+  }
+
+  try {
+    const respFromRun = await fetch('/auth/google', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        credential,
+        verifyOnly: props.verifyOnly
+      })
+    })
+
+    const res = await respFromRun.json()
+    if (props.verifyOnly) {
+      emit('verify', res)
+      return
+    }
+
+    if (res?.token) {
+      const check = checkToken(res.token)
+      if (check.result === 'ok') {
+        emit('authorized', check.decoded)
+      } else {
+        // Перенаправляємо користувача на home, якщо йому дозволено тільки home
+        homeCheck(res.token)
+
+        googleError.value = t`Користувачу ${check.userName} не дозволено входити`
+      }
+    } else {
+      googleError.value = t`Помилка Google авторизації`
+    }
+  } catch (error) {
+    googleError.value = error
+  }
+}
+
+/**
+ * LOCALIZATION
+ * @returns {object} translations
+ */
+function getTr() {
+  return {
+    'Помилка Google авторизації': { ru: 'Ошибка авторизации Google' },
+    'Користувачу ': { ru: 'Пользователю ' },
+    ' не дозволено входити': { ru: ' не разрешен вход' }
+  }
+}
+</script>

package/auth/njs/home-check.js

@@ -0,0 +1,23 @@
+import jwtDecode from '@nitra/jwt-decode'
+
+/**
+ *
+ * @param jwtOrig
+ */
+export default function (jwtOrig) {
+  const jwt = jwtDecode(jwtOrig)
+
+  // Якщо не дозволено жодної ролі, то не йдемо далі
+  if (jwt['https://hasura.io/jwt/claims']['x-hasura-allowed-roles'].length === 0) {
+    return
+  }
+
+  // Якщо користувачу дозволено тільки home, то редиректимо на home
+  if (
+    jwt['https://hasura.io/jwt/claims']['x-hasura-allowed-roles'].length === 1 &&
+    jwt['https://hasura.io/jwt/claims']['x-hasura-allowed-roles'][0] === 'home-user'
+  ) {
+    const domain = import.meta.env.VITE_DOMAIN || '.nitra.ai'
+    globalThis.location.href = `https://home${domain}/profile`
+  }
+}

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@nitra/cap",
-  "version": "6.1.3",
+  "version": "7.1.0",
   "description": "Nitra capacitor components",
   "type": "module",
   "exports": {
-    ".": "./index.js"
+    ".": "./index.js",
+    "./auth/*": "./auth/*"
   },
   "scripts": {
     "fix": "yarn dlx eslint --fix . && npx prettier --write . "
@@ -20,10 +21,18 @@
   },
   "homepage": "https://github.com/nitra/cap",
   "dependencies": {
-    "@capacitor-firebase/messaging": "^6.1.0",
-    "@capacitor/core": "^6.1.2",
-    "@capawesome/capacitor-app-update": "^6.0.0",
-    "@firebase/app": "^0.10.11",
-    "firebase": "^10.13.2"
-  }
+    "@capacitor-community/apple-sign-in": "^7.0.1",
+    "@capacitor-firebase/messaging": "^7.3.1",
+    "@capacitor/core": "^7.4.3",
+    "@capawesome/capacitor-app-update": "^7.0.1",
+    "@codetrix-studio/capacitor-google-auth": "^3.4.0-rc.4",
+    "@firebase/app": "^0.14.3",
+    "@nitra/tfm": "^2.4.0",
+    "@nitra/vite-boot": "^3.7.1",
+    "@simplewebauthn/browser": "^11.0.0",
+    "firebase": "^12.3.0"
+  },
+  "files": [
+    "auth"
+  ]
 }

package/app-update/README.md

@@ -1,23 +0,0 @@
-# Проверка и установка новой версии приложение в маркете
-
-## API
-
-- [`updateApp(...)`](#updateapp)
-
-### updateApp(...)
-
-```typescript
-updateApp(isImmediate: boolean | undefined, isMandatory: boolean | undefined ) => Promise<void>
-```
-
-Проверка и установка новой версии приложение в маркете
-
-Для **Android**, через [In-app updates](https://developer.android.com/guide/playcore/in-app-updates)]  
-Для **IOS**, открываем App Store
-
-| Параметр          | Тип       | Описание                                                          |
-|-------------------|-----------|-------------------------------------------------------------------|
-| **`isImmediate`** | `boolean` | только Android, обновление "в полный" экран, по-умолчанию - false |
-| **`isMandatory`** | `boolean` | только Android, обязательно обновление, по-умолчанию - false      |
-
----

package/app-update/index.js

@@ -1,49 +0,0 @@
-import { Capacitor } from '@capacitor/core'
-import {
-  AppUpdate,
-  AppUpdateAvailability,
-  FlexibleUpdateInstallStatus,
-  AppUpdateResultCode
-} from '@capawesome/capacitor-app-update'
-
-/**
- * Проверка наличия обновления, для Android установка обновления, IOS - открытие AppStore
- * @async
- * @function updateApp
- * @param {boolean} isImmediate - только Android, обновление "в полный" экран, по-умолчанию - false
- * @param {boolean} isMandatory - только Android, обязательно обновление, по-умолчанию - false
- */
-export async function updateApp(isImmediate, isMandatory) {
-  if (!Capacitor.isNativePlatform() || !Capacitor.isPluginAvailable('AppUpdate')) {
-    return
-  }
-  const { updateAvailability } = await AppUpdate.getAppUpdateInfo()
-  if (updateAvailability !== AppUpdateAvailability.UPDATE_AVAILABLE) {
-    return
-  }
-  if (Capacitor.getPlatform() === 'ios') {
-    await AppUpdate.openAppStore()
-    return
-  }
-  if (Capacitor.getPlatform() === 'android') {
-    if (isImmediate) {
-      const appUpdateResult = await AppUpdate.performImmediateUpdate()
-      if (
-        isMandatory &&
-        (appUpdateResult.code === AppUpdateResultCode.CANCELED ||
-          appUpdateResult.code === AppUpdateResultCode.NOT_ALLOWED)
-      ) {
-        await updateApp(isImmediate, isMandatory)
-      }
-    } else {
-      AppUpdate.addListener('onFlexibleUpdateStateChange', flexibleUpdateState => {
-        if (flexibleUpdateState.installStatus === FlexibleUpdateInstallStatus.DOWNLOADED) {
-          AppUpdate.removeAllListeners()
-          AppUpdate.completeFlexibleUpdate()
-        }
-      })
-      await AppUpdate.startFlexibleUpdate()
-    }
-    return
-  }
-}

package/index.js

@@ -1,2 +0,0 @@
-export * from './app-update'
-export * from './save-token'

package/save-token/README.md

@@ -1,121 +0,0 @@
-# Receiving and Saving User Push Tokens
-
-## Description
-
-This library is designed to handle obtaining and saving Firebase push tokens on the client side. It supports both mobile platforms (via Capacitor) and web platforms. The main function, `saveToken`, retrieves a push token from Firebase, stores it locally, and sends it to your server.
-
-This library interacts with Firebase for token management and Capacitor to check the platform and permissions. It ensures that push tokens are properly handled, regardless of whether the platform is iOS, Android, or Web.
-
-## API
-
-### `saveToken()`
-
-```typescript
-saveToken() => Promise<void>
-```
-
-## usage the library
-
-### To use this package, you should add this env to your project where you want to provide push notifications
-
-`VITE_APP=test`
-`VITE_PROJECT_ID=test`
-`VITE_VAPID_KEY=test`
-`VITE_API_KEY=test`
-`VITE_AUTH_DOMAIN=test`
-`VITE_STORAGE_BUCKET=test`
-`VITE_MESSAGING_SENDER_ID=test`
-`VITE_APP_ID=test`
-
-## example in node
-
-### Using function after login
-
-```jsx
-    <template>
-    <n-code :on-token-checked="saveToken" />
-    </template>
-
-    <script setup>
-    import NCode from '@nitra/abie-components/auth/NCode.vue'
-    import { saveToken } from '@nitra/cap'
-
-    await saveToken()
-    </script>
-
-    <route lang="yaml">
-    meta:
-    layout: blank
-    </route>
-
-```
-
-## Environment Variable Validation with Vite
-
-### To ensure that the required environment variables are set and the sw.js file is added to the project, add the following to your vite.config.js
-
-```typescript
-import { requireEnvVar } from '@nitra/vite-check-env'
-import { defineConfig, loadEnv } from 'vite'
-import { build } from 'esbuild'
-
-export default {
-  plugins: [
-    {
-      name: 'nitra-service-worker-transform',
-      apply: 'build',
-      transformIndexHtml() {
-        build({
-          plugins: [env(loadEnv(mode, '.'))],
-          format: 'esm',
-          entryPoints: [path.join(process.cwd(), '../node_modules/@nitra/cap/save-token/sw.js')],
-          outfile: path.join(process.cwd(), 'dist', 'sw.js')
-        })
-      }
-    },
-    requireEnvVar([
-      'VITE_VAPID_KEY',
-      'VITE_APP',
-      'VITE_API_KEY',
-      'VITE_AUTH_DOMAIN',
-      'VITE_PROJECT_ID',
-      'VITE_STORAGE_BUCKET',
-      'VITE_MESSAGING_SENDER_ID',
-      'VITE_APP_ID'
-    ])
-  ]
-}
-
-function env(props) {
-  return {
-    name: 'env',
-    setup: build => {
-      const options = build.initialOptions
-      const define = options.define ?? {}
-      for (const k in props) {
-        define[`import.meta.env.${k}`] = JSON.stringify(props[k])
-      }
-      options.define = {
-        ...define
-      }
-    }
-  }
-}
-```
-
-# For local test you can add this code
-if (process.env.npm_lifecycle_event === 'start-remote-dev') {
-  proxy['^/n-push/.*'] = ''
-} else {
-  proxy['^/n-push/.*'] = '<http://0.0.0.0:8090>'
-}
-
-/n-push/ - url of the notify project
-
-The `notify project` is a server-side component designed to handle API requests for saving user push tokens. It uses the Fastify framework and JWT-based security for authentication.
-
-### Install the plugin in the project directory
-
-```typescript
-yarn add -D @nitra/vite-check-env
-```

package/save-token/index.js

@@ -1,100 +0,0 @@
-import { Capacitor } from '@capacitor/core'
-import { FirebaseMessaging } from '@capacitor-firebase/messaging'
-import { getToken } from '@nitra/vite-boot/token'
-import { initializeApp } from 'firebase/app'
-
-/**
- * Save the Firebase push token for a given app and platform.
- * @returns {Promise<void>}
- */
-export async function saveToken() {
-  try {
-    if (localStorage.getItem(`pushToken_${import.meta.env.VITE_APP}`)) {
-      console.log('Push Token is already exists.')
-
-      return
-    }
-
-    initializeApp({
-      apiKey: import.meta.env.VITE_API_KEY,
-      authDomain: import.meta.env.VITE_AUTH_DOMAIN,
-      projectId: import.meta.env.VITE_PROJECT_ID,
-      storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
-      messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID,
-      appId: import.meta.env.VITE_APP_ID
-    })
-
-    if (Capacitor.isNativePlatform() && !Capacitor.isPluginAvailable('FirebaseMessaging')) {
-      console.error('FirebaseMessaging plugin is not available')
-
-      return
-    }
-
-    let permissions = await FirebaseMessaging.checkPermissions()
-
-    if (permissions.receive !== 'granted') {
-      console.warn('Permissions are not granted, try to request permissions...')
-
-      let permissionsRequest = await FirebaseMessaging.requestPermissions()
-
-      if (permissionsRequest.receive !== 'granted') {
-        console.error('Permissions are not granted, exiting...')
-
-        return
-      }
-    }
-
-    const pushToken = Capacitor.isNativePlatform()
-      ? await FirebaseMessaging.getToken() // For iOS/Android
-      : await getWebPushToken()
-
-    if (!pushToken?.token && typeof pushToken?.token !== 'string') {
-      console.error('Token is undefined exiting...')
-
-      return
-    }
-
-    await sendTokenToServer(pushToken.token)
-  } catch (error) {
-    console.error('Error while saving push token:', error)
-  }
-}
-
-/**
- * Get the Firebase push token for web platform.
- * @returns {Promise<object>} Web Push token
- */
-async function getWebPushToken() {
-  const serviceWorkerRegistration = await navigator.serviceWorker.register('sw.js', {
-    type: 'module'
-  })
-
-  return FirebaseMessaging.getToken({
-    vapidKey: import.meta.env.VITE_VAPID_KEY,
-    serviceWorkerRegistration
-  })
-}
-
-/**
- * Send the Firebase push token to the server.
- * @param {string} pushToken - The push token returned by Firebase Messaging.
- * @returns {Promise<void>}
- */
-async function sendTokenToServer(pushToken) {
-  const response = await fetch('/n-push/save-user', {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      authorization: `Bearer ${getToken()}`
-    },
-    body: JSON.stringify({
-      platform: Capacitor.getPlatform(),
-      app: import.meta.env.VITE_APP,
-      token: pushToken
-    })
-  })
-
-  if (response.ok) {
-    localStorage.setItem(`pushToken_${import.meta.env.VITE_APP}`, pushToken)
-  }
-}

package/save-token/sw.js

@@ -1,13 +0,0 @@
-import { getMessaging } from 'https://www.gstatic.com/firebasejs/10.13.2/firebase-messaging-sw.js'
-import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.13.2/firebase-app.js'
-
-const firebaseApp = initializeApp({
-  apiKey: import.meta.env.VITE_API_KEY,
-  authDomain: import.meta.env.VITE_AUTH_DOMAIN,
-  projectId: import.meta.env.VITE_PROJECT_ID,
-  storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
-  messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID,
-  appId: import.meta.env.VITE_APP_ID
-})
-
-export const messaging = getMessaging(firebaseApp)