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

<template>
  <meta-head title="Восстановить пароль">
    <meta name="description" content="Восстановить пароль">
  </meta-head>

  <!-- <header-auth /> -->
  <!-- min-h-[calc(100vh-64px)] -->
  <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-3xl mx-auto ">
      <div class="md:grid grid-cols-12 ">
        <div class="col-span-12 bg-indigo-200">
          <div class="py-12 lg:py-20 px-10">
            <inertia-link
              :href="route('login')"
              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="mt-5 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-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 class="text-center">
                  <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>
                </div>
              </form>
            </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,
        })

        const submit = () => {
            form.post(route('password.email'), {
                onSuccess: () => form.reset('email'),
            })
        }


        return {
            form,
            submit,
        }
    },

}
</script>