schon/storefront/app/components/forms/register.vue

<template>
  <form @submit.prevent="handleRegister()" class="form">
    <div class="form__top">
      <h2 class="form__title">{{ t('forms.register.title') }}</h2>
      <p class="form__subtitle">{{ t('forms.register.subtitle') }}</p>
    </div>
    <div class="form__main">
      <div class="form__main-box">
        <ui-input
            :type="'text'"
            :placeholder="t('fields.firstName')"
            :label="t('fields.firstName')"
            :rules="[required]"
            v-model="firstName"
        />
        <ui-input
            :type="'text'"
            :placeholder="t('fields.lastName')"
            :label="t('fields.lastName')"
            :rules="[required]"
            v-model="lastName"
        />
      </div>
      <div class="form__main-box">
        <ui-input
            :type="'text'"
            :placeholder="t('fields.phoneNumber')"
            :label="t('fields.phoneNumber')"
            :rules="[required]"
            v-model="phoneNumber"
            :inputMode="'tel'"
        />
        <ui-input
            :type="'email'"
            :placeholder="t('fields.email')"
            :label="t('fields.email')"
            :rules="[isEmail]"
            v-model="email"
            :inputMode="'email'"
        />
      </div>
      <ui-input
          :type="'password'"
          :placeholder="t('fields.password')"
          :label="t('fields.password')"
          :rules="[isPasswordValid]"
          v-model="password"
      />
      <ui-input
          :type="'password'"
          :placeholder="t('fields.confirmPassword')"
          :label="t('fields.confirmPassword')"
          :rules="[compareStrings]"
          v-model="confirmPassword"
      />
      <ui-checkbox
          v-model="isSubscribed"
      >
        {{ t('checkboxes.subscribe') }}
      </ui-checkbox>
      <ui-checkbox
          v-model="isAgree"
      >
        <i18n-t tag="p" scope="global" keypath="checkboxes.agree">
          <template #terms>
            <nuxt-link-locale
                class="form__link"
                to="/docs/terms-of-use"
            >
              {{ t('docs.terms.title') }}
            </nuxt-link-locale>
          </template>
          <template #policy>
            <nuxt-link-locale
                class="form__link"
                to="/docs/privacy-policy"
            >
              {{ t('docs.policy.title') }}
            </nuxt-link-locale>
          </template>
        </i18n-t>
      </ui-checkbox>
      <ui-button
          :type="'submit'"
          class="form__button"
          :isDisabled="!isFormValid"
          :isLoading="loading"
      >
        {{ t('buttons.createAccount') }}
      </ui-button>
      <div class="form__login">
        <p>{{ t('forms.register.login') }}</p>
        <ui-link
            @click="redirectTo('sign-in')"
        >
          {{ t('buttons.login') }}
        </ui-link>
      </div>
    </div>
  </form>
</template>

<script setup lang="ts">
import {useValidators} from '@composables/rules';
import {useRegister} from '@composables/auth';
import {useRouteQuery} from '@vueuse/router';
import {useProjectConfig} from "@composables/config";

const { t } = useI18n();
const appStore = useAppStore();
const route = useRoute();
const localePath = useLocalePath();

const { uiConfig } = useProjectConfig();
const { required, isEmail, isPasswordValid } = useValidators();

const isAgree = ref<boolean>(false);
const isSubscribed = ref<boolean>(false);
const firstName = ref<string>('');
const lastName = ref<string>('');
const phoneNumber = ref<string>('');
const email = ref<string>('');
const password = ref<string>('');
const confirmPassword = ref<string>('');

const referrer = useRouteQuery('referrer', '');

const redirectTo = (to) => {
  if (uiConfig.value.isAuthModals) {
    appStore.setActiveAuthState(to);
  } else {
    navigateTo(localePath(`/auth/${to}`));
  }
};

const compareStrings = (v: string) => {
  if (v === password.value) return true;
  return t('errors.compare');
};

const isFormValid = computed(() => {
  return (
    required(firstName.value) === true &&
    required(lastName.value) === true &&
    required(phoneNumber.value) === true &&
    isEmail(email.value) === true &&
    isPasswordValid(password.value) === true &&
    compareStrings(confirmPassword.value) === true &&
    isAgree.value === true
  );
});

const { register, loading } = useRegister();

async function handleRegister() {
  await register({
    firstName: firstName.value,
    lastName: lastName.value,
    phoneNumber: phoneNumber.value,
    email: email.value,
    password: password.value,
    confirmPassword: confirmPassword.value,
    referrer: referrer.value,
    isSubscribed: isSubscribed.value
  });
}
</script>

<style lang="scss" scoped>
.form {
  width: 450px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;

  &__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  &__title {
    color: #111827;
    font-family: "Playfair Display", sans-serif;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.5px;
  }

  &__subtitle {
    text-align: center;
    color: #4b5563;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.5px;
  }

  &__main {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;

    &-block {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    &-box {
      display: flex;
      align-items: flex-start;
      gap: 15px;
    }
  }

  &__link {
    transition: 0.2s;
    color: #111827;

    @include hover {
      color: #2b3752;
    }
  }

  &__login {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;

    & p {
      text-align: center;
      color: #4b5563;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: -0.5px;
    }
  }
}
</style>