@owlmeans/web-auth-email 0.0.0-stage → 0.1.19

package/src/consts.ts

@@ -0,0 +1,53 @@
+import { EMAIL_AUTH_OFFER, EMAIL_LOGIN_METHOD } from '@owlmeans/auth-email'
+import type { AuthMethodMeta } from '@owlmeans/client-auth/manager/plugins'
+
+/**
+ * The library-tier i18n resource this package's own strings live in (`lib : auth-email.*`).
+ *
+ * An application overrides any of them by registering the same resource at the app tier, in the
+ * library namespace — see the README.
+ */
+export const EMAIL_AUTH_I18N = 'auth-email'
+
+/**
+ * The library resource `@owlmeans/client-auth/login` fills with the sign-in screen's copy. This
+ * package adds one key to it — `login.method.email`, the chooser button's label.
+ */
+export const AUTH_I18N = 'auth'
+
+/** Where the browser keeps its e-mail sign-in device id (`localStorage`). */
+export const EMAIL_DEVICE_STORAGE = 'owlmeans:auth-email:device'
+
+/** Where a PIN sign-in's one-use "set a password" offer ticket waits for the offer step (`sessionStorage`). */
+export const EMAIL_OFFER_STORAGE = 'owlmeans:auth-email:offer'
+
+/** Random bytes in a device id: 16 bytes are 22 base64url characters (`EMAIL_DEVICE_ID_PATTERN`). */
+export const EMAIL_DEVICE_ID_BYTES = 16
+
+/** `LoginStep.alias` of the post-sign-in password offer — the same name as its screen's route. */
+export const EMAIL_OFFER_LOGIN_STEP = EMAIL_AUTH_OFFER
+
+/**
+ * Below the marketing-consent step (which declares none, so `0`): a Terms confirmation and the
+ * consent choices come first, the optional password offer last.
+ */
+export const EMAIL_OFFER_STEP_PRIORITY = -10
+
+/**
+ * How the e-mail method presents itself on the sign-in chooser. `appendEmailLogin({ method })`
+ * merges over it, and `cfg.security.auth.login.overrides.email` over both.
+ */
+export const EMAIL_LOGIN_METHOD_META: Readonly<AuthMethodMeta> = Object.freeze({
+  id: EMAIL_LOGIN_METHOD,
+  i18nKey: EMAIL_LOGIN_METHOD,
+  icon: 'mail',
+  order: 20,
+  emphasis: 'secondary',
+})
+
+/** Google's documents the reCAPTCHA notice links to (the badge itself is hidden). */
+export const RECAPTCHA_PRIVACY_URL = 'https://policies.google.com/privacy'
+export const RECAPTCHA_TERMS_URL = 'https://policies.google.com/terms'
+
+/** Where "Powered by OwlMeans" leads, as on the chooser card. */
+export const OWLMEANS_URL = 'https://owlmeans.com'

package/src/entrypoints.ts

@@ -0,0 +1,15 @@
+import { handler } from '@owlmeans/client'
+import { bindScreen } from '@owlmeans/client-entrypoint'
+import type { EmailAuthEntrypoints } from '@owlmeans/auth-email'
+import { PasswordOfferScreen } from './components/offer.js'
+
+/**
+ * The offer screen, bound and ready to spread into an application's entrypoint list.
+ *
+ * The API routes are NOT bound here: they are ordinary backend routes the application binds with
+ * its own `bindAll(protocols)`, beside the server's `serveEmailAuthEntrypoints` — the same split as
+ * `marketingConsentEntrypoints`.
+ */
+export const emailAuthEntrypoints = (protocols: EmailAuthEntrypoints) => [
+  bindScreen(protocols.offer, handler(PasswordOfferScreen)),
+]

package/src/hooks/consts.local.ts

@@ -0,0 +1,12 @@
+import {
+  EMAIL_AUTH_PASSWORD_PIN, EMAIL_AUTH_PASSWORD_REMOVE, EMAIL_AUTH_PASSWORD_SET, EMAIL_AUTH_PASSWORD_STATUS,
+} from '@owlmeans/auth-email'
+import type { EmailPasswordAliases } from '../types.js'
+
+/** The aliases `makeEmailAuthProtocols` declares — what an application without the client service mounts. */
+export const DEFAULT_PASSWORD_ALIASES: EmailPasswordAliases = {
+  status: EMAIL_AUTH_PASSWORD_STATUS,
+  pin: EMAIL_AUTH_PASSWORD_PIN,
+  set: EMAIL_AUTH_PASSWORD_SET,
+  remove: EMAIL_AUTH_PASSWORD_REMOVE,
+}

package/src/hooks/types.ts

@@ -0,0 +1,79 @@
+import type { MouseEvent } from 'react'
+import type { EmailPasswordPurpose, EmailPasswordStatusView } from '@owlmeans/auth-email'
+import type { EmailLoginState } from '../state/types.js'
+import type { EmailRefusal } from '../refusal/types.js'
+import type { EmailPasswordAction } from '../password/types.js'
+
+export interface UseEmailLoginOptions {
+  /** The interface language; its base language travels with send-PIN and sign-in, for the mail. */
+  locale?: string
+  /** Pre-fill the address. */
+  email?: string
+}
+
+/** The "Other sign-in options" link back to the chooser. */
+export interface EmailLoginOtherOptions {
+  href: string
+  go: (event?: MouseEvent) => void
+}
+
+/**
+ * The headless e-mail sign-in form — everything `EmailLoginScreen` renders from, for a replacement
+ * screen to render its own way (`registerEmailLoginScreen`).
+ *
+ * Every action is safe to call at any time: a call while another is in flight does nothing, and a
+ * call the form cannot make yet sets `state.refusal` (an invalid address, an incomplete code)
+ * instead of sending anything.
+ */
+export interface EmailLoginModel {
+  state: EmailLoginState
+  /** The deployment asked for a captcha — show Google's notice. */
+  captcha: boolean
+  /** Password sign-in is offered — show "Already set a password? Use it". */
+  passwordOffered: boolean
+  pinLength: number
+  setEmail: (value: string) => void
+  setPin: (value: string) => void
+  setPassword: (value: string) => void
+  setReveal: (value: boolean) => void
+  /** Mail a PIN (from the e-mail step) or a new one (from the PIN step). */
+  send: () => Promise<void>
+  /** Sign in with the typed PIN. */
+  verify: () => Promise<void>
+  /** Sign in with the password; an unknown device answers with a mailed PIN instead. */
+  signIn: () => Promise<void>
+  /** What Enter does on the current step. */
+  submit: () => Promise<void>
+  choosePassword: () => void
+  choosePin: () => void
+  changeEmail: () => void
+  /** Ask for the options again after they failed to load. */
+  retryOptions: () => Promise<void>
+  /** Null where the chooser is not bound in this application. */
+  otherOptions: EmailLoginOtherOptions | null
+}
+
+export interface UsePasswordOptions {
+  /** The interface language; its base language travels with the confirmation-PIN request. */
+  locale?: string
+}
+
+/** The I/O half of the password panel. Nothing thrown reaches the caller — it lands in `refusal`. */
+export interface UsePassword {
+  status: EmailPasswordStatusView | null
+  loading: boolean
+  /** A PIN request or a confirmation is in flight. */
+  busy: boolean
+  /** The purpose a confirmation PIN was mailed for; null while none waits. */
+  pending: EmailPasswordPurpose | null
+  refusal: EmailRefusal | null
+  /** The last action that went through, for a short confirmation. */
+  done: EmailPasswordAction | null
+  reload: () => Promise<void>
+  /** Mail a confirmation PIN to the account's own address. Resolves whether it was sent. */
+  sendPin: (purpose: EmailPasswordPurpose) => Promise<boolean>
+  /** Confirm an action with the mailed PIN (and the new password for set/change). Resolves whether it went through. */
+  confirm: (action: EmailPasswordAction, input: { pin: string, password?: string }) => Promise<boolean>
+  /** Abandon a pending confirmation. */
+  cancel: () => void
+}

package/src/hooks/use-email-login.ts

@@ -0,0 +1,234 @@
+import { useCallback, useEffect, useMemo, useReducer, useRef, type MouseEvent } from 'react'
+import { useContext, useNavigate } from '@owlmeans/client'
+import type { ClientEntrypoint } from '@owlmeans/client-entrypoint'
+import { DISPATCHER } from '@owlmeans/auth'
+import {
+  EMAIL_CAPTCHA_ACTION_PASSWORD, EMAIL_CAPTCHA_ACTION_PIN, EMAIL_LOGIN_SERVICE, EmailAuthError, EmailAuthUnavailable,
+  EmailSignInReason,
+} from '@owlmeans/auth-email'
+import type { EmailAuthOptionsView, EmailSignInView } from '@owlmeans/auth-email'
+import { captchaLoader } from '@owlmeans/web-captcha'
+import { useCaptcha, type UseCaptchaResult } from '@owlmeans/web-captcha/react'
+import { logger } from '@owlmeans/log'
+import { emailLoginStateHelper as helper } from '../state.js'
+import { emailRefusalHelper } from '../refusal.js'
+import { emailStorageHelper } from '../storage.js'
+import { wireLocale } from '../utils/locale.js'
+import type { EmailRefusalContext } from '../refusal/types.js'
+import type { EmailLoginClientService } from '../types.js'
+import type { EmailLoginModel, EmailLoginOtherOptions, UseEmailLoginOptions } from './types.js'
+
+const log = logger('auth-email')
+
+/**
+ * The e-mail sign-in form: an address, then a mailed PIN — or, where the deployment offers
+ * passwords, the address and a password, which on a device the account does not know turns into a
+ * mailed PIN as well. A captcha token is fetched right before each send-PIN and password sign-in
+ * when the deployment asks for one; the PIN step needs none.
+ *
+ * Every transition is `emailLoginStateHelper.reduce`; this hook only performs the calls and
+ * dispatches what they answered. A successful answer is finished by the client service
+ * (`complete`), which leaves the page.
+ */
+export const useEmailLogin = (opts: UseEmailLoginOptions = {}): EmailLoginModel => {
+  const ctx = useContext()
+  const nav = useNavigate()
+  const client = ctx.service<EmailLoginClientService>(EMAIL_LOGIN_SERVICE)
+  const locale = wireLocale(opts.locale)
+
+  const [state, dispatch] = useReducer(helper.reduce, opts.email, helper.initial)
+  // Handlers read the latest form, not the one of the render that created them.
+  const current = useRef(state)
+  current.current = state
+
+  const siteKey = state.options?.captcha?.siteKey ?? null
+  const pinCaptcha = useCaptcha({ siteKey, action: EMAIL_CAPTCHA_ACTION_PIN })
+  const passwordCaptcha = useCaptcha({ siteKey, action: EMAIL_CAPTCHA_ACTION_PASSWORD })
+
+  const loadOptions = useCallback(async (fresh?: boolean): Promise<EmailAuthOptionsView | null> => {
+    try {
+      const options = await client.options(fresh === true ? { fresh } : undefined)
+      dispatch({ type: 'options', options })
+
+      return options
+    } catch (error) {
+      log.warn('E-mail sign-in options unavailable', error)
+      dispatch({ type: 'options-failed' })
+
+      return null
+    }
+  }, [client])
+
+  useEffect(() => { void loadOptions() }, [loadOptions])
+
+  const refuse = useCallback((error: unknown, context: EmailRefusalContext) => {
+    const refusal = emailRefusalHelper.refusalOf(error, context)
+    // The kind and the call only — never the address, the code or the password.
+    log.debug('E-mail sign-in refused', { context, kind: refusal.kind })
+    dispatch({ type: 'refused', refusal })
+  }, [])
+
+  /** A token for this action — through the hook's own captcha when it is the one loaded. */
+  const captchaToken = useCallback(async (
+    options: EmailAuthOptionsView, captcha: UseCaptchaResult, action: string,
+  ): Promise<string | undefined> => {
+    if (options.captcha == null || options.captcha.siteKey === '') {
+      return undefined
+    }
+    const token = options.captcha.siteKey === siteKey
+      ? await captcha.execute()
+      : await captchaLoader.token(options.captcha.siteKey, action)
+
+    return token ?? undefined
+  }, [siteKey])
+
+  /** The options this call runs under: the loaded ones, else a fresh read. */
+  const optionsNow = useCallback(async (): Promise<EmailAuthOptionsView> => {
+    const options = current.current.options ?? await loadOptions(true)
+    if (options == null) {
+      throw new EmailAuthUnavailable('options')
+    }
+
+    return options
+  }, [loadOptions])
+
+  const finish = useCallback(async (view: EmailSignInView): Promise<void> => {
+    if (view.token != null && view.token !== '') {
+      dispatch({ type: 'signed-in' })
+      await client.complete(view)
+      return
+    }
+    if (view.challenge != null && view.reason === EmailSignInReason.Device) {
+      dispatch({ type: 'device', challenge: view.challenge })
+      return
+    }
+    throw new EmailAuthError('answer')
+  }, [client])
+
+  const send = useCallback(async () => {
+    const form = current.current
+    if (form.busy != null || form.step === 'done') {
+      return
+    }
+    const block = helper.sendBlock(form)
+    if (block != null) {
+      dispatch({ type: 'refused', refusal: block })
+      return
+    }
+    dispatch({ type: 'start', busy: 'send' })
+    try {
+      const options = await optionsNow()
+      const captcha = await captchaToken(options, pinCaptcha, EMAIL_CAPTCHA_ACTION_PIN)
+      const { challenge } = await client.sendPin({
+        email: helper.normalizeEmail(form.email),
+        ...(locale != null ? { locale } : {}),
+        ...(captcha != null ? { captcha } : {}),
+      })
+      dispatch({ type: 'sent', challenge })
+    } catch (error) {
+      refuse(error, 'send')
+    }
+  }, [client, locale, optionsNow, captchaToken, pinCaptcha, refuse])
+
+  const verify = useCallback(async () => {
+    const form = current.current
+    if (form.busy != null || form.step !== 'pin') {
+      return
+    }
+    const block = helper.verifyBlock(form)
+    if (block != null) {
+      dispatch({ type: 'refused', refusal: block })
+      return
+    }
+    dispatch({ type: 'start', busy: 'sign-in' })
+    try {
+      await finish(await client.signIn({
+        email: helper.normalizeEmail(form.email),
+        device: emailStorageHelper.deviceId(),
+        challenge: form.challenge!,
+        pin: form.pin,
+        ...(locale != null ? { locale } : {}),
+      }))
+    } catch (error) {
+      refuse(error, 'pin')
+    }
+  }, [client, locale, finish, refuse])
+
+  const signIn = useCallback(async () => {
+    const form = current.current
+    if (form.busy != null || form.step !== 'password') {
+      return
+    }
+    const block = helper.signInBlock(form)
+    if (block != null) {
+      dispatch({ type: 'refused', refusal: block })
+      return
+    }
+    dispatch({ type: 'start', busy: 'sign-in' })
+    try {
+      const options = await optionsNow()
+      const captcha = await captchaToken(options, passwordCaptcha, EMAIL_CAPTCHA_ACTION_PASSWORD)
+      await finish(await client.signIn({
+        email: helper.normalizeEmail(form.email),
+        device: emailStorageHelper.deviceId(),
+        password: form.password,
+        ...(locale != null ? { locale } : {}),
+        ...(captcha != null ? { captcha } : {}),
+      }))
+    } catch (error) {
+      refuse(error, 'password')
+    }
+  }, [client, locale, optionsNow, captchaToken, passwordCaptcha, finish, refuse])
+
+  const submit = useCallback(async () => {
+    switch (current.current.step) {
+      case 'email':
+        return await send()
+      case 'pin':
+        return await verify()
+      case 'password':
+        return await signIn()
+      default:
+        return
+    }
+  }, [send, verify, signIn])
+
+  const retryOptions = useCallback(async () => { await loadOptions(true) }, [loadOptions])
+
+  const otherOptions = useMemo((): EmailLoginOtherOptions | null => {
+    let href: string
+    try {
+      href = ctx.entrypoint<ClientEntrypoint>(DISPATCHER).path()
+    } catch {
+      return null
+    }
+
+    return {
+      href,
+      go: (event?: MouseEvent) => {
+        event?.preventDefault()
+        void nav.go(DISPATCHER)
+      },
+    }
+  }, [ctx, nav])
+
+  return {
+    state,
+    captcha: state.options?.captcha != null,
+    passwordOffered: helper.passwordOffered(state),
+    pinLength: helper.pinLength(state),
+    setEmail: useCallback((value: string) => dispatch({ type: 'email', value }), []),
+    setPin: useCallback((value: string) => dispatch({ type: 'pin', value }), []),
+    setPassword: useCallback((value: string) => dispatch({ type: 'password', value }), []),
+    setReveal: useCallback((value: boolean) => dispatch({ type: 'reveal', value }), []),
+    send,
+    verify,
+    signIn,
+    submit,
+    choosePassword: useCallback(() => dispatch({ type: 'choose-password' }), []),
+    choosePin: useCallback(() => dispatch({ type: 'choose-pin' }), []),
+    changeEmail: useCallback(() => dispatch({ type: 'change-email' }), []),
+    retryOptions,
+    otherOptions,
+  }
+}

package/src/hooks/use-password.ts

@@ -0,0 +1,137 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useContext } from '@owlmeans/client'
+import type { ClientEntrypoint } from '@owlmeans/client-entrypoint'
+import { EMAIL_LOGIN_SERVICE } from '@owlmeans/auth-email'
+import type {
+  EmailChallengeView, EmailPasswordPurpose, EmailPasswordStatusView,
+} from '@owlmeans/auth-email'
+import { logger } from '@owlmeans/log'
+import { emailRefusalHelper } from '../refusal.js'
+import { emailStorageHelper } from '../storage.js'
+import { wireLocale } from '../utils/locale.js'
+import type { EmailRefusal, EmailRefusalContext } from '../refusal/types.js'
+import type { EmailPasswordAction } from '../password/types.js'
+import type { EmailLoginClientService, EmailPasswordAliases } from '../types.js'
+import { DEFAULT_PASSWORD_ALIASES } from './consts.local.js'
+import type { UsePassword, UsePasswordOptions } from './types.js'
+
+const log = logger('auth-email')
+
+/**
+ * The I/O half of the password panel: the account's password state, a confirmation PIN, and the
+ * set / change / remove calls confirmed by it.
+ *
+ * The routes are addressed by alias: `aliases`, else those of the tree `appendEmailLogin` was given,
+ * else the `EMAIL_AUTH_PASSWORD_*` defaults. The mailed challenge never leaves this hook. The
+ * current browser's device id goes with every confirmation, so it stays remembered while the
+ * account's other devices are forgotten.
+ */
+export const usePassword = (aliases?: EmailPasswordAliases, opts: UsePasswordOptions = {}): UsePassword => {
+  const ctx = useContext()
+  const locale = wireLocale(opts.locale)
+
+  const defaults = useMemo((): EmailPasswordAliases => {
+    if (!ctx.hasService(EMAIL_LOGIN_SERVICE)) {
+      return DEFAULT_PASSWORD_ALIASES
+    }
+    const password = ctx.service<EmailLoginClientService>(EMAIL_LOGIN_SERVICE).protocols().password
+
+    return {
+      status: password.status.alias, pin: password.pin.alias, set: password.set.alias, remove: password.remove.alias,
+    }
+  }, [ctx])
+  const statusAlias = aliases?.status ?? defaults.status
+  const pinAlias = aliases?.pin ?? defaults.pin
+  const setAlias = aliases?.set ?? defaults.set
+  const removeAlias = aliases?.remove ?? defaults.remove
+
+  const [status, setStatus] = useState<EmailPasswordStatusView | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [busy, setBusy] = useState(false)
+  const [pending, setPending] = useState<EmailPasswordPurpose | null>(null)
+  const [refusal, setRefusal] = useState<EmailRefusal | null>(null)
+  const [done, setDone] = useState<EmailPasswordAction | null>(null)
+  const challenge = useRef<string | null>(null)
+
+  const refuse = useCallback((error: unknown, context: EmailRefusalContext) => {
+    const next = emailRefusalHelper.refusalOf(error, context)
+    log.debug('Password action refused', { context, kind: next.kind })
+    setRefusal(next)
+  }, [])
+
+  const reload = useCallback(async () => {
+    setLoading(true)
+    setRefusal(null)
+    try {
+      setStatus(await ctx.entrypoint<ClientEntrypoint<EmailPasswordStatusView>>(statusAlias).call())
+    } catch (error) {
+      refuse(error, 'status')
+    } finally {
+      setLoading(false)
+    }
+  }, [ctx, statusAlias, refuse])
+
+  useEffect(() => { void reload() }, [reload])
+
+  const sendPin = useCallback(async (purpose: EmailPasswordPurpose): Promise<boolean> => {
+    setBusy(true)
+    setRefusal(null)
+    setDone(null)
+    try {
+      const view = await ctx.entrypoint<ClientEntrypoint<EmailChallengeView>>(pinAlias).call({
+        body: { purpose, ...(locale != null ? { locale } : {}) },
+      })
+      challenge.current = view.challenge
+      setPending(purpose)
+
+      return true
+    } catch (error) {
+      refuse(error, 'confirm')
+
+      return false
+    } finally {
+      setBusy(false)
+    }
+  }, [ctx, pinAlias, locale, refuse])
+
+  const confirm = useCallback(async (
+    action: EmailPasswordAction, input: { pin: string, password?: string },
+  ): Promise<boolean> => {
+    if (challenge.current == null) {
+      setRefusal({ kind: 'code' })
+      return false
+    }
+    setBusy(true)
+    setRefusal(null)
+    try {
+      const device = emailStorageHelper.deviceId()
+      const next = action === 'remove'
+        ? await ctx.entrypoint<ClientEntrypoint<EmailPasswordStatusView>>(removeAlias).call({
+          body: { challenge: challenge.current, pin: input.pin, device },
+        })
+        : await ctx.entrypoint<ClientEntrypoint<EmailPasswordStatusView>>(setAlias).call({
+          body: { password: input.password ?? '', challenge: challenge.current, pin: input.pin, device },
+        })
+      challenge.current = null
+      setStatus(next)
+      setPending(null)
+      setDone(action)
+
+      return true
+    } catch (error) {
+      refuse(error, action === 'remove' ? 'remove' : 'set')
+
+      return false
+    } finally {
+      setBusy(false)
+    }
+  }, [ctx, setAlias, removeAlias, refuse])
+
+  const cancel = useCallback(() => {
+    challenge.current = null
+    setPending(null)
+    setRefusal(null)
+  }, [])
+
+  return { status, loading, busy, pending, refusal, done, reload, sendPin, confirm, cancel }
+}

package/src/hooks/use-translate.ts

@@ -0,0 +1,14 @@
+import { useCallback } from 'react'
+import { useI18nLib } from '@owlmeans/client-i18n'
+import { EMAIL_AUTH_I18N } from '../consts.js'
+import type { Translate } from '../types.js'
+
+/**
+ * This package's own translator (`lib : auth-email`), in the `(key, defaultValue)` shape every
+ * component here takes as its `translate` prop. Needs the application's i18n provider.
+ */
+export const useEmailAuthTranslate = (): Translate => {
+  const t = useI18nLib(EMAIL_AUTH_I18N)
+
+  return useCallback((key: string, defaultValue: string) => t(key, { defaultValue }), [t])
+}

package/src/i18n/auth/be.json

@@ -0,0 +1,7 @@
+{
+  "login": {
+    "method": {
+      "email": "Працягнуць з электроннай поштай"
+    }
+  }
+}

package/src/i18n/auth/de.json

@@ -0,0 +1,7 @@
+{
+  "login": {
+    "method": {
+      "email": "Mit E-Mail fortfahren"
+    }
+  }
+}

package/src/i18n/auth/en.json

@@ -0,0 +1,7 @@
+{
+  "login": {
+    "method": {
+      "email": "Continue with email"
+    }
+  }
+}

package/src/i18n/auth/es.json

@@ -0,0 +1,7 @@
+{
+  "login": {
+    "method": {
+      "email": "Continuar con correo electrónico"
+    }
+  }
+}

package/src/i18n/auth/fr.json

@@ -0,0 +1,7 @@
+{
+  "login": {
+    "method": {
+      "email": "Continuer avec une adresse e-mail"
+    }
+  }
+}

package/src/i18n/auth/pl.json

@@ -0,0 +1,7 @@
+{
+  "login": {
+    "method": {
+      "email": "Kontynuuj z e-mailem"
+    }
+  }
+}

package/src/i18n/auth/ru.json

@@ -0,0 +1,7 @@
+{
+  "login": {
+    "method": {
+      "email": "Продолжить с электронной почтой"
+    }
+  }
+}

package/src/i18n/auth/uk.json

@@ -0,0 +1,7 @@
+{
+  "login": {
+    "method": {
+      "email": "Продовжити з електронною поштою"
+    }
+  }
+}