site/resources/js/Pages/Auth/Login.vue

<template>
  <meta-head title="Авторизация">
    <meta name="description" content="Авторизация">
  </meta-head>

  <!-- <header-auth /> -->

  <div class="min-h-screen place-items-center grid md:pt-3 bg-center bg-cover"
       style="background-image: url('/image/auth-bg.jpg');"
  >
    <div class="w-full  max-w-7xl mx-auto ">
      <div class="md:grid grid-cols-12 ">
        <div class="col-span-7 bg-indigo-200">
          <div class="p-4 lg:p-28">
            <inertia-link
              :href="route('dashboard')"
              class="inline-flex gap-1 items-center text-gray-light"
            >
              <svg xmlns="http://www.w3.org/2000/svg" width="18"
                   height="18" viewBox="0 0 24 24"
                   fill="none" stroke="currentColor"
                   stroke-width="2" stroke-linecap="round"
                   stroke-linejoin="round" class="flex-shrink-0"
              ><polyline points="9 10 4 15 9 20"></polyline><path d="M20 4v7a4 4 0 0 1-4 4H4"></path></svg> Вернуться
            </inertia-link>
            <h1 class="font-medium text-xl md:text-2xl lg:text-4xl text-white text-center">
              Войти
            </h1>
            <div v-if="$page.props.flash.status">
              <p class="text-lg md:text-xl text-orange text-center mt-3">
                {{ $page.props.flash.status }}
              </p>
            </div>
            <div class="auth-form mt-7">
              <form class="space-y-6" @submit.prevent="submit">
                <div>
                  <div class="relative">
                    <div class="absolute inset-y-0 left-5 text-gray flex items-center">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24"
                           height="24" viewBox="0 0 24 24"
                           fill="none" stroke="currentColor"
                           stroke-width="2" stroke-linecap="round"
                           stroke-linejoin="round" class="flex-shrink-0"
                      >
                        <path
                          d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
                        >
                        </path>
                        <polyline points="22,6 12,13 2,6"></polyline>
                      </svg>
                    </div>
                    <input
                      v-model="form.email"
                      autocapitalize="off"
                      class="w-full pl-14 h-12 md:h-16 focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border-transparent bg-indigo-100 rounded-md placeholder-gray"
                      type="email" placeholder="E-mail"
                    >
                  </div>
                  <div v-if="form.errors.email" class="form-error text-sm text-red">
                    {{ form.errors.email }}
                  </div>
                </div>


                <div>
                  <div class="relative">
                    <div class="absolute inset-y-0 left-5 text-gray flex items-center">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24"
                           height="24" viewBox="0 0 24 24"
                           fill="none" stroke="currentColor"
                           stroke-width="2" stroke-linecap="round"
                           stroke-linejoin="round" class="flex-shrink-0"
                      >
                        <rect x="3" y="11"
                              width="18" height="11"
                              rx="2" ry="2"
                        ></rect>
                        <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                      </svg>
                    </div>
                    <input
                      v-model="form.password"
                      class="w-full pl-14 h-12 md:h-16 focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border-transparent bg-indigo-100 rounded-md placeholder-gray"
                      type="password" placeholder="Пароль"
                    >
                  </div>
                  <div v-if="form.errors.password" class="form-error text-sm text-red">
                    {{ form.errors.password }}
                  </div>
                </div>
                <div class="flex items-center">
                  <input id="remember" v-model="form.remember"
                         type="checkbox" class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent"
                  >
                  <label for="remember" class="select-none ml-3 text-gray">Запомни меня</label>
                </div>

                <div class="flex items-center justify-between gap-1">
                  <loading-button :loading="form.processing" class="mx-3 my-1 px-12 py-3 transition shadow-none hover:shadow-classic2 inline-flex items-center justify-center text-base rounded-full text-white bg-orange focus:outline-none"
                                  type="submit"
                  >
                    Войти
                  </loading-button>

                  <inertia-link :href="route('password.request')" class="hover:underline text-sm text-gray-light">
                    Восстановить пароль
                  </inertia-link>
                </div>
              </form>
            </div>
          </div>
        </div>
        <div class="col-span-5 bg-center bg-cover" style="background-image: url('image/orange-auth.jpg');">
          <div class="py-4 lg:py-28 px-4">
            <div class="font-medium text-xl md:text-2xl lg:text-4xl !leading-relaxed text-white text-center">
              Заработай на своем
              творчестве первый миллион
            </div>
            <div class="font-medium text-xl md:text-2xl lg:text-4xl !leading-relaxed text-white text-center">
              Присоединяйся к teeaseer
              прямо сейчас!
            </div>

            <div class="text-center mt-4 md:mt-10">
              <inertia-link
                :href="route('register')"
                class="mx-3 my-1 px-12 py-3 transition shadow-none hover:shadow-classic2 inline-flex items-center justify-center text-base rounded-full text-white border border-white bg-transparent focus:outline-none"
              >
                Зарегистрироваться
              </inertia-link>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- <div class="bg-indigo-300 mt-auto">
      <div class="container mx-auto p-2 text-sm text-gray-light">
        <div class="-mx-2 -my-2 flex flex-wrap justify-between">
          <div class="mx-2 my-2">
            <a href="/company/about">О компании</a>
          </div>
          <div class="mx-2 my-2">
            <a href="/company/offer">Оферта</a>
          </div>
          <div class="mx-2 my-2">
            <a href="/company/terms-payment">Условия оплаты</a>
          </div>
          <div class="mx-2 my-2">
            <a href="/company/terms-service">Условия предоставления услуг</a>
          </div>
          <div class="mx-2 my-2">
            <a href="/company/cookies">Cookies</a>
          </div>
          <div class="mx-2 my-2">
            <a href="/company/privacy-policy">Privacy Policy</a>
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import { Inertia } from '@inertiajs/inertia'
import LoadingButton from '@/Shared/Form/LoadingButton.vue'
// import HeaderAuth from '@/Shared/LayoutParts/HeaderAuth.vue'
import MetaHead from '@/Shared/MetaHead.vue'

export default {
    components: {
        MetaHead,
        // HeaderAuth,
        LoadingButton,
    },

    setup() {
        const form = Inertia.form({
            email: null,
            password: null,
            remember: false,
        })

        const submit = () => {
            form.post(route('login.store'))
        }

        return {
            form,
            submit,
        }
    },

}
</script>