0869395aab
* #2 - wip * #2 - wip * #2 - ui fixes to login page * #2 - fix * #2 - fix * #2 - add title to login page * Apply suggestions from code review Co-authored-by: Krzysztof Rewak <krzysztof.rewak@blumilk.pl> * #2 - cr fix * #2 - cr fix Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl> Co-authored-by: Krzysztof Rewak <krzysztof.rewak@blumilk.pl>
86 lines
3.2 KiB
Vue
86 lines
3.2 KiB
Vue
<template>
|
|
<InertiaHead title="Zaloguj się" />
|
|
<transition
|
|
enter-active-class="transform ease-out duration-300 transition"
|
|
enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
|
|
enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
|
|
leave-active-class="transition ease-in duration-100"
|
|
leave-from-class="opacity-100"
|
|
leave-to-class="opacity-0"
|
|
>
|
|
<div
|
|
v-if="errors.oauth"
|
|
class="absolute inset-x-2 top-2 sm:mx-auto sm:w-full sm:max-w-md bg-red-500 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden"
|
|
>
|
|
<div class="p-4">
|
|
<div class="flex items-center">
|
|
<div class="w-0 flex-1 flex justify-between">
|
|
<ExclamationIcon class="h-5 w-5 text-white" />
|
|
<p class="w-0 flex-1 text-sm font-medium text-white">
|
|
{{ errors.oauth }}
|
|
</p>
|
|
</div>
|
|
<div class="ml-4 flex-shrink-0 flex">
|
|
<button
|
|
class="bg-red-500 rounded-md inline-flex text-red-100 hover:text-red-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600"
|
|
@click="delete errors.oauth"
|
|
>
|
|
<span class="sr-only">Close</span>
|
|
<XIcon
|
|
class="h-5 w-5"
|
|
aria-hidden="true"
|
|
/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
<div
|
|
class="sm:mx-auto sm:w-full sm:max-w-md text-white space-y-4 flex flex-col items-center rounded-lg px-4 py-8"
|
|
>
|
|
<img
|
|
class="mx-auto h-50 w-auto"
|
|
src="img/logo.png"
|
|
alt="Blumilk"
|
|
>
|
|
<a
|
|
href="/login/google/start"
|
|
class="inline-flex justify-center py-2 px-6 rounded-md shadow-sm bg-blumilk-500 text-md font-medium text-white hover:bg-blumilk-700"
|
|
>
|
|
Zaloguj się za pomocą Google
|
|
<svg
|
|
class="w-5 h-5 ml-2"
|
|
fill="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
d="M6 12C6 15.3137 8.68629 18 12 18C14.6124 18 16.8349 16.3304 17.6586 14H12V10H21.8047V14H21.8C20.8734 18.5645 16.8379 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C15.445 2 18.4831 3.742 20.2815 6.39318L17.0039 8.68815C15.9296 7.06812 14.0895 6 12 6C8.68629 6 6 8.68629 6 12Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import GuestLayout from '@/Shared/Layout/GuestLayout';
|
|
import {XIcon} from '@heroicons/vue/solid';
|
|
import {ExclamationIcon} from '@heroicons/vue/solid';
|
|
|
|
export default {
|
|
name: 'Login',
|
|
components: {
|
|
XIcon,
|
|
ExclamationIcon,
|
|
},
|
|
layout: GuestLayout,
|
|
props: {
|
|
errors: {
|
|
type: Object,
|
|
default: () => ({oauth: null}),
|
|
}
|
|
},
|
|
};
|
|
</script>
|