108 lines
2.0 KiB
Vue
108 lines
2.0 KiB
Vue
<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>
|