220 lines
9.6 KiB
Vue
Executable File
220 lines
9.6 KiB
Vue
Executable File
<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 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="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7"
|
||
r="4"
|
||
></circle></svg>
|
||
</div>
|
||
<input
|
||
v-model="form.first_name"
|
||
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="text" placeholder="Имя"
|
||
>
|
||
</div>
|
||
<div v-if="form.errors.email" class="form-error text-sm text-red">
|
||
{{ form.errors.first_name }}
|
||
</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"
|
||
>
|
||
<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">
|
||
<input id="check" v-model="form.check"
|
||
type="checkbox" class="mt-1 h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent"
|
||
>
|
||
<label for="check" class="select-none ml-3 text-gray"> Нажимая на кнопку я даю согласие на
|
||
<a class="underline" href="/docs/personal_data.pdf"
|
||
target="_blank" rel="noopener noreferrer nofollow"
|
||
>обработку персональных данных</a> и соглашаюсь
|
||
<a class="underline" href="/docs/privacy_policy.pdf"
|
||
target="_blank" rel="noopener noreferrer nofollow"
|
||
>с условиями политики конфеденциальности</a>.</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 flex flex-col h-full justify-center">
|
||
<div class="font-medium text-xl md:text-2xl lg:text-4xl !leading-relaxed text-white text-center">
|
||
Уже есть учетная запись?
|
||
</div>
|
||
|
||
<div class="text-center mt-4 md:mt-10">
|
||
<inertia-link
|
||
:href="route('login')"
|
||
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({
|
||
first_name: null,
|
||
email: null,
|
||
password: null,
|
||
check: false,
|
||
})
|
||
|
||
const submit = () => {
|
||
if(form.check){
|
||
form.post(route('register.store'))
|
||
}
|
||
// else{
|
||
// alert('Нужно дать согласие на обработку персональных данных')
|
||
// }
|
||
}
|
||
|
||
return {
|
||
form,
|
||
submit,
|
||
}
|
||
},
|
||
|
||
}
|
||
</script>
|