initial

apps/client/components/authorization/email-confirmation.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="email-confirmation">
+    <img src="/email-confirmation.svg" alt="logo" draggable="false">
+
+    <h1 class="email-confirmation__title">
+      {{ $t('check_email') }}
+    </h1>
+
+    <div class="email-confirmation__content">
+      <i18n-t
+        scope="global"
+        keypath="we_have_sent_you_an_email_to"
+        tag="p"
+        class="email-confirmation__text"
+      >
+        <strong class="email-confirmation__email">{{ email }}</strong>
+      </i18n-t>
+
+      <div class="email-confirmation__instructions">
+        <slot />
+      </div>
+    </div>
+
+    <div class="email-confirmation__upper-text">
+      <i18n-t class="mb-18" keypath="check_spam_folder" tag="p" scope="global">
+        <strong class="text-grey-600">«{{ $t('spam') }}»</strong>
+      </i18n-t>
+    </div>
+
+    <div v-if="resendFn" class="email-confirmation__resend">
+      <span>{{ $t('did_not_get_mail') }}</span>
+
+      <UiButton class="ml-4" type="link" @click="resendFn">
+        {{ $t('send_again') }}
+      </UiButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  email: {
+    required: true,
+    type: String,
+  },
+  resendFn: { type: Function },
+})
+</script>
+
+<style lang="scss">
+.email-confirmation {
+  width: 516px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 0 auto;
+
+  &__title {
+    margin-bottom: 30px;
+  }
+
+  &__content {
+    background-color: $clr-grey-200;
+    padding: 24px;
+    border-radius: 12px;
+  }
+
+  &__text {
+    @include txt-l;
+    display: inline-block;
+    text-align: center;
+    margin-bottom: 20px;
+    width: 100%;
+  }
+
+  &__instructions {
+    @include txt-l-sb;
+    display: inline-block;
+    text-align: center;
+    width: 100%;
+  }
+
+  &__email {
+    color: $clr-grey-500;
+  }
+
+  &__upper-text {
+    @include txt-m;
+    display: inline-block;
+    text-align: center;
+    margin-top: 40px;
+
+    color: $clr-grey-500;
+  }
+
+  &__resend {
+    @include txt-i-m;
+
+    color: $clr-grey-600;
+  }
+
+  &__under-text {
+    @include txt-i-m;
+  }
+}
+</style>

apps/client/components/authorization/faq-password.vue

@@ -0,0 +1,48 @@
+<template>
+  <UiAccordion>
+    <UiAccordionItem
+      :title="$t('forgot_password_questions.forgot_password.title')"
+    >
+      <i18n-t
+        scope="global"
+        keypath="forgot_password_questions.forgot_password.content"
+        tag="p"
+      >
+        <UiButton type="link" href="/reset-password">
+          {{ $t('can_reset_password') }}
+        </UiButton>
+        <UiButton type="link">
+          {{ $t('write_us') }}
+        </UiButton>
+      </i18n-t>
+    </UiAccordionItem>
+
+    <UiAccordionItem
+      :title="$t('forgot_password_questions.access_to_mail.title')"
+    >
+      <i18n-t
+        scope="global"
+        keypath="forgot_password_questions.access_to_mail.content"
+        tag="p"
+      >
+        <UiButton type="link">
+          {{ $t('fill_the_form') }}
+        </UiButton>
+      </i18n-t>
+    </UiAccordionItem>
+
+    <UiAccordionItem :title="$t('forgot_password_questions.no_mail.title')">
+      <i18n-t
+        keypath="forgot_password_questions.no_mail.content"
+        tag="p"
+        scope="global"
+      >
+        <UiButton type="link">
+          {{ $t('write_us') }}
+        </UiButton>
+      </i18n-t>
+    </UiAccordionItem>
+  </UiAccordion>
+</template>
+
+<script setup lang="ts"></script>