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

<template>
  <form @submit.prevent="handleLogin()" class="form">
    <div class="form__top">
      <h2 class="form__title">{{ t('forms.login.title') }}</h2>
      <p class="form__subtitle">{{ t('forms.login.subtitle') }}</p>
    </div>
    <div class="form__main">
      <ui-input
          :type="'email'"
          :placeholder="t('fields.email')"
          :label="t('fields.email')"
          :rules="[isEmail]"
          v-model="email"
          :inputMode="'email'"
      />
      <ui-input
          :type="'password'"
          :placeholder="t('fields.password')"
          :label="t('fields.password')"
          :rules="[required]"
          v-model="password"
      />
      <div class="form__main-block">
        <ui-checkbox
            v-model="isStayLogin"
        >
          {{ t('checkboxes.remember') }}
        </ui-checkbox>
        <ui-link
            @click="redirectTo('reset-password')"
        >
          {{ t('forms.login.forgot') }}
        </ui-link>
      </div>
      <ui-button
          :type="'submit'"
          class="form__button"
          :isDisabled="!isFormValid"
          :isLoading="loading"
      >
        {{ t('buttons.login') }}
      </ui-button>
      <p class="form__or">{{ t('forms.login.or') }}</p>
      <ui-button
          @click="redirectTo('sign-up')"
          :type="'button'"
          :style="'secondary'"
          class="form__button"
      >
        {{ t('buttons.createAccount') }}
      </ui-button>
    </div>
  </form>
</template>

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

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

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

const email = ref<string>('');
const password = ref<string>('');
const isStayLogin = ref<boolean>(false);

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

const isFormValid = computed(() => {
  return (
    isEmail(email.value) === true &&
    required(password.value) === true
  );
});

const { login, loading } = useLogin();

async function handleLogin() {
  await login(email.value, password.value, isStayLogin.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: $primary;
    font-family: "Playfair Display", sans-serif;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.5px;
  }

  &__subtitle {
    text-align: center;
    color: $text;
    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;
    }
  }

  &__or {
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.5px;
    color: $text;
  }
}
</style>