yakovenko_arina/your-gold
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

registration

Browse Source
This commit is contained in:
Arina Yakovenko
2025-07-01 13:35:37 +02:00
parent fd4b122936
commit ea72074559
5 changed files with 102 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
components/section/RegistrationMain.vue
View File

@ -7,19 +7,19 @@
}" />
<div class="w-full sm:w-[80%] mx-auto my-auto xl:w-full xl:px-12 ">
<div class="space-25-55">
<div class="flex justify-between">
<div class="flex flex-wrap-reverse gap-y-4 justify-between">
<h2 class="h2-bold-bounded">{{ $t('sign_up') }}</h2>
<button
<button @click="menuStore.navigateToItem()"
class="h-[40px] sm:h-[43px] px-[10px] sm:px-[17px] border border-gray dark:border-button-disabled text-gray dark:text-button-disabled hover:bg-gray transition-all hover:text-white rounded-[8px] cursor-pointer">{{
$t('back_to_home') }}</button>
</div>
<div class="space-y-[25px] sm:space-y-[30px]">
<p>Obecné informace</p>
<p>{{ $t('current_information') }}</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-[30px]">
<div class="space-y-[15px]">
<p class="pl-6">{{ $t('first_name') }}</p>
<input :placeholder="$t('first_name')" type="text"
class="text-sm sm:text-xl border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
class="text-sm sm:text-xl border border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
</div>
<div class="space-y-[15px]">
<p class="pl-6">{{ $t('last_name') }}</p>
@ -29,7 +29,7 @@
<div class="space-y-[15px]">
<p class="pl-6">{{ $t('email') }}</p>
<input :placeholder="$t('email')" type="text"
class="text-sm sm:text-xl border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
class="text-sm sm:text-xl border border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
</div>
<div class="space-y-[15px]" ref="dropdownRef">
<p class="pl-6">{{ $t('phone') }}</p>
@ -48,7 +48,7 @@
</div>
<div v-if="dropCountry"
class="mt-2 absolute bg-bg-light dark:bg-bg-dark rounded-[5px] ring-0 cursor-pointer w-full border border-button py-[10px] px-[5px] overflow-hidden">
class="mt-2 absolute bg-bg-light dark:bg-bg-dark rounded-[5px] ring-0 cursor-pointer w-[130px] sm:w-full border border-button py-[10px] px-[5px] overflow-hidden">
<div class="overflow-y-auto h-[200px] w-full">
<p v-for="item in menuStore.countries" :key="item.iso_code"
@click="() => { menuStore.selectedPhoneCountry = item; dropCountry = false }"
@ -62,13 +62,14 @@
</div>
<p class="text-sm sm:text-xl font-normal">{{ menuStore.selectedPhoneCountry.call_prefix
}}</p>
<input :placeholder="$t('phone')" type="text"
<input id="phone" :placeholder="$t('phone')" type="text"
class="text-sm sm:text-xl placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0" />
</div>
</div>
<div class="space-y-[15px]">
<p class="pl-6">{{ $t('account_type') }}</p>
<USelect v-model="selectedType" :items="component.front_section_lang[0].data.account_types"
<USelect v-model="selectedType"
:items="component.front_section_lang && component.front_section_lang[0].data.account_types"
value-key="name" :searchable="false" :ui="{
base: 'bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0 h-[50px] sm:h-[67px] w-full p-0',
trailing: 'hidden w-full',
@ -83,7 +84,9 @@
<div
class="flex items-center justify-between gap-2 uppercase text-sm sm:text-xl border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 w-full h-[50px] sm:h-[67px]">
<p class="truncate whitespace-nowrap">
{{ component.front_section_lang[0].data.account_types.find((item) => item.name === modelValue)?.name }}
{{component.front_section_lang &&
component.front_section_lang[0].data.account_types.find((item) => item.name
=== modelValue)?.name}}
</p>
<span> <i
class="uil uil-angle-down text-2xl font-light cursor-pointer"></i></span>
@ -150,7 +153,9 @@ const menuStore = useMenuStore()
const dropdownRef = ref(null);
const dropCountry = ref()
const selectedType = ref(props.component.front_section_lang[0].data.account_types[0].name)
const selectedType = ref()
if (props.component.front_section_lang)
selectedType.value = props.component.front_section_lang[0].data.account_types[0].name
onClickOutside(dropdownRef, () => {
dropCountry.value = false