126 lines
6.5 KiB
Vue
126 lines
6.5 KiB
Vue
<template>
|
|
<meta-head title="Авторизация">
|
|
<meta name="description" content="Авторизация">
|
|
</meta-head>
|
|
|
|
<div class="header-simple flex items-center justify-center p-2 bg-orange">
|
|
<img class="block h-12" src="/image/logotype.svg" alt="">
|
|
</div>
|
|
|
|
<div class="min-h-[calc(100vh-64px)] place-items-center grid md:pt-3"
|
|
style="background-image: url('/image/auth-bg.jpg');">
|
|
|
|
<div class="w-full md:w-auto 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">
|
|
<h1 class="font-medium text-xl md:text-2xl lg:text-4xl text-white text-center">Войти</h1>
|
|
|
|
<div class="auth-form mt-7">
|
|
<form @submit.prevent="submit" class="space-y-6">
|
|
<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="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 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">Присоединяйся к 4Teaser
|
|
прямо сейчас!</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>
|
|
</template>
|
|
|
|
<script>
|
|
import { Inertia } from "@inertiajs/inertia";
|
|
import LoadingButton from "@/Shared/Form/LoadingButton";
|
|
import MetaHead from '@/Shared/MetaHead'
|
|
|
|
export default {
|
|
components: {
|
|
MetaHead,
|
|
LoadingButton,
|
|
},
|
|
|
|
setup() {
|
|
const form = Inertia.form({
|
|
email: null,
|
|
password: null,
|
|
remember: false,
|
|
});
|
|
|
|
const submit = () => {
|
|
form.post(route("login.store"));
|
|
};
|
|
|
|
return {
|
|
form,
|
|
submit,
|
|
};
|
|
},
|
|
|
|
}
|
|
</script>
|