kamilniemczycki/toby
1
0
Fork 0
Code Issues Pull Requests 2 Projects Releases Activity

#2 - authentication via google (#16)

Browse Source 
* #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>
This commit is contained in:
Adrian Hopek
2022-01-13 14:19:11 +01:00
committed by GitHub
parent e015f02892
commit 0869395aab
31 changed files with 534 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
resources/js/Pages/Dashboard.vue
View File

@@ -18,7 +18,7 @@
<div class="flex-shrink-0">
<img
class="mx-auto h-20 w-20 rounded-full"
:src="user.imageUrl"
:src="user.avatar"
alt=""
>
</div>
@@ -255,7 +255,6 @@ import {
} from '@heroicons/vue/outline';
import {computed} from 'vue';
import {usePage} from '@inertiajs/inertia-vue3';
export default {
name: 'Dashboard',
setup() {
@@ -362,7 +361,6 @@ export default {
'Tenetur libero voluptatem rerum occaecati qui est molestiae exercitationem. Voluptate quisquam iure assumenda consequatur ex et recusandae. Alias consectetur voluptatibus. Accusamus a ab dicta et. Consequatur quis dignissimos voluptatem nisi.',
},
];
return {
user,
stats,

85
resources/js/Pages/Login.vue Normal file
View File

@@ -0,0 +1,85 @@
<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>

19
resources/js/Shared/Layout/AppLayout.vue Normal file
View File

@@ -0,0 +1,19 @@
<template>
<div class="min-h-full">
<MainMenu />
<main class="-mt-24 pb-8">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8">
<slot />
</div>
</main>
</div>
</template>
<script>
import MainMenu from '@/Shared/MainMenu';
export default {
name: 'AppLayout',
components: {MainMenu},
};
</script>

12
resources/js/Shared/Layout/GuestLayout.vue Normal file
View File

@@ -0,0 +1,12 @@
<template>
<div class="min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8 bg-blumilk-25">
<slot />
</div>
</template>
<script>
export default {
name: 'GuestLayout',
};
</script>

14
resources/js/Shared/MainMenu.vue
View File

@@ -11,7 +11,7 @@
<InertiaLink href="/">
<img
class="h-8 w-auto"
src="/img/logo.png"
src="/img/logo-white.png"
alt="Workflow"
>
</InertiaLink>
@@ -42,7 +42,7 @@
<span class="sr-only">Open user menu</span>
<img
class="h-8 w-8 rounded-full"
:src="user.imageUrl"
:src="user.avatar"
alt=""
>
</MenuButton>
@@ -62,7 +62,9 @@
>
<InertiaLink
:href="item.href"
:class="[active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700']"
:method="item.method"
:as="item.as"
:class="[active ? 'bg-gray-100' : '', 'block w-full text-left px-4 py-2 text-sm text-gray-700']"
>
{{ item.name }}
</InertiaLink>
@@ -209,8 +211,10 @@
<InertiaLink
v-for="item in userNavigation"
:key="item.name"
:method="item.method"
:as="item.as"
:href="item.href"
class="block rounded-md px-3 py-2 text-base text-gray-900 font-medium hover:bg-gray-100 hover:text-gray-800"
class="block w-full text-left rounded-md px-3 py-2 text-base text-gray-900 font-medium hover:bg-gray-100 hover:text-gray-800"
>
{{ item.name }}
</InertiaLink>
@@ -270,7 +274,7 @@ export default {
const userNavigation = [
{name: 'Your Profile', href: '#'},
{name: 'Settings', href: '#'},
{name: 'Sign out', href: '#'},
{name: 'Sign out', href: '/logout', method: 'post', as: 'button'},
];
return {

4
resources/js/app.js
View File

@@ -1,13 +1,13 @@
import {createApp, h} from 'vue';
import {createInertiaApp, Head, Link} from '@inertiajs/inertia-vue3';
import {InertiaProgress} from '@inertiajs/progress';
import Layout from '@/Shared/Layout';
import AppLayout from '@/Shared/Layout/AppLayout';
createInertiaApp({
resolve: name => {
const page = require(`./Pages/${name}`).default;
page.layout = page.layout || Layout;
page.layout = page.layout || AppLayout;
return page;
},