#2 - wip
This commit is contained in:
Adrian Hopek
parent
2abd83526d
commit
197e7da9cc
@ -44,3 +44,7 @@ MAIL_FROM_ADDRESS=null
|
||||
MAIL_FROM_NAME="${APP_NAME}"
|
||||
|
||||
DOCKER_INSTALL_XDEBUG=false
|
||||
|
||||
GOOGLE_CLIENT_ID=
|
||||
GOOGLE_CLIENT_SECRET=
|
||||
GOOGLE_REDIRECT=
|
||||
|
||||
43
app/Http/Controllers/GoogleController.php
Normal file
43
app/Http/Controllers/GoogleController.php
Normal file
@ -0,0 +1,43 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace Toby\Http\Controllers;
|
||||
|
||||
use Illuminate\Contracts\Auth\Factory as AuthFactory;
|
||||
use Illuminate\Database\Eloquent\ModelNotFoundException;
|
||||
use Toby\Models\User;
|
||||
use Laravel\Socialite\SocialiteManager;
|
||||
use Symfony\Component\HttpFoundation\RedirectResponse;
|
||||
|
||||
class GoogleController extends Controller
|
||||
{
|
||||
public function redirect(SocialiteManager $socialiteManager): RedirectResponse
|
||||
{
|
||||
return $socialiteManager->driver("google")->redirect();
|
||||
}
|
||||
|
||||
public function callback(AuthFactory $auth, SocialiteManager $socialiteManager): RedirectResponse
|
||||
{
|
||||
$socialUser = $socialiteManager->driver("google")->user();
|
||||
|
||||
try {
|
||||
/** @var User $user */
|
||||
$user = User::query()
|
||||
->where("email", $socialUser->getEmail())
|
||||
->firstOrFail();
|
||||
|
||||
$auth->guard()->login($user, true);
|
||||
|
||||
$user->syncGoogleData($socialUser);
|
||||
|
||||
return redirect()->route("dashboard");
|
||||
} catch (ModelNotFoundException) {
|
||||
return redirect()
|
||||
->route("login")
|
||||
->withErrors([
|
||||
"oauth" => __("User does not exist."),
|
||||
]);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -8,10 +8,8 @@ use Illuminate\Auth\Middleware\Authenticate as Middleware;
|
||||
|
||||
class Authenticate extends Middleware
|
||||
{
|
||||
protected function redirectTo($request)
|
||||
protected function redirectTo($request): ?string
|
||||
{
|
||||
if (!$request->expectsJson()) {
|
||||
return route("login");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,7 +11,17 @@ class HandleInertiaRequests extends Middleware
|
||||
{
|
||||
public function share(Request $request): array
|
||||
{
|
||||
$user = $request->user();
|
||||
|
||||
return array_merge(parent::share($request), [
|
||||
"auth" => fn() => [
|
||||
"user" => $user ? [
|
||||
"name" => $user->name,
|
||||
"email" => $user->email,
|
||||
"role" => "Human Resources Manager",
|
||||
"imageUrl" => $user->avatar,
|
||||
] : null,
|
||||
],
|
||||
"flash" => fn() => [
|
||||
"success" => $request->session()->get("success"),
|
||||
"error" => $request->session()->get("error"),
|
||||
|
||||
@ -8,7 +8,6 @@ use Closure;
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Support\Facades\Auth;
|
||||
use Symfony\Component\HttpFoundation\Response;
|
||||
use Toby\Providers\RouteServiceProvider;
|
||||
|
||||
class RedirectIfAuthenticated
|
||||
{
|
||||
@ -18,7 +17,7 @@ class RedirectIfAuthenticated
|
||||
|
||||
foreach ($guards as $guard) {
|
||||
if (Auth::guard($guard)->check()) {
|
||||
return redirect(RouteServiceProvider::HOME);
|
||||
return redirect()->route("login");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -7,7 +7,15 @@ namespace Toby\Models;
|
||||
use Illuminate\Database\Eloquent\Factories\HasFactory;
|
||||
use Illuminate\Foundation\Auth\User as Authenticatable;
|
||||
use Illuminate\Notifications\Notifiable;
|
||||
use Laravel\Socialite\Two\User as SocialUser;
|
||||
|
||||
/**
|
||||
* @property int $id
|
||||
* @property string $name
|
||||
* @property string $email
|
||||
* @property string $avatar
|
||||
* @property string $google_id
|
||||
*/
|
||||
class User extends Authenticatable
|
||||
{
|
||||
use HasFactory;
|
||||
@ -16,15 +24,22 @@ class User extends Authenticatable
|
||||
protected $fillable = [
|
||||
"name",
|
||||
"email",
|
||||
"password",
|
||||
];
|
||||
|
||||
protected $hidden = [
|
||||
"password",
|
||||
"remember_token",
|
||||
];
|
||||
|
||||
protected $casts = [
|
||||
"email_verified_at" => "datetime",
|
||||
];
|
||||
|
||||
public function syncGoogleData(SocialUser $user): void
|
||||
{
|
||||
$this->name = $user->getName();
|
||||
$this->avatar = $user->getAvatar();
|
||||
$this->google_id = $user->getId();
|
||||
|
||||
$this->save();
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,8 +12,6 @@ use Illuminate\Support\Facades\Route;
|
||||
|
||||
class RouteServiceProvider extends ServiceProvider
|
||||
{
|
||||
public const HOME = "/home";
|
||||
|
||||
public function boot(): void
|
||||
{
|
||||
$this->configureRateLimiting();
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
"guzzlehttp/guzzle": "^7.0.1",
|
||||
"inertiajs/inertia-laravel": "^0.5.1",
|
||||
"laravel/framework": "^8.75",
|
||||
"laravel/socialite": "^5.2",
|
||||
"laravel/telescope": "^4.6",
|
||||
"laravel/tinker": "^2.5"
|
||||
},
|
||||
|
||||
1411
composer.lock
generated
1411
composer.lock
generated
File diff suppressed because it is too large
Load Diff
@ -2,4 +2,10 @@
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
return [];
|
||||
return [
|
||||
"google" => [
|
||||
"client_id" => env("GOOGLE_CLIENT_ID"),
|
||||
"client_secret" => env("GOOGLE_CLIENT_SECRET"),
|
||||
"redirect" => env("GOOGLE_REDIRECT"),
|
||||
],
|
||||
];
|
||||
|
||||
@ -5,7 +5,6 @@ declare(strict_types=1);
|
||||
namespace Database\Factories;
|
||||
|
||||
use Illuminate\Database\Eloquent\Factories\Factory;
|
||||
use Illuminate\Support\Facades\Hash;
|
||||
use Illuminate\Support\Str;
|
||||
|
||||
class UserFactory extends Factory
|
||||
@ -15,8 +14,6 @@ class UserFactory extends Factory
|
||||
return [
|
||||
"name" => $this->faker->name(),
|
||||
"email" => $this->faker->unique()->safeEmail(),
|
||||
"email_verified_at" => now(),
|
||||
"password" => Hash::make("secret123"),
|
||||
"remember_token" => Str::random(10),
|
||||
];
|
||||
}
|
||||
|
||||
@ -12,9 +12,9 @@ return new class() extends Migration {
|
||||
Schema::create("users", function (Blueprint $table): void {
|
||||
$table->id();
|
||||
$table->string("name");
|
||||
$table->string("avatar")->nullable();
|
||||
$table->string("email")->unique();
|
||||
$table->timestamp("email_verified_at")->nullable();
|
||||
$table->string("password");
|
||||
$table->string("google_id")->nullable();
|
||||
$table->rememberToken();
|
||||
$table->timestamps();
|
||||
});
|
||||
|
||||
BIN
public/img/logo-white.png
Normal file
BIN
public/img/logo-white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
@ -1,262 +1,5 @@
|
||||
<template>
|
||||
<div class="min-h-full">
|
||||
<Popover
|
||||
v-slot="{ open }"
|
||||
as="header"
|
||||
class="pb-24 bg-gradient-to-r from-sky-800 to-cyan-600"
|
||||
>
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8">
|
||||
<div class="relative flex flex-wrap items-center justify-center lg:justify-between">
|
||||
<!-- Logo -->
|
||||
<div class="absolute left-0 py-5 flex-shrink-0 lg:static">
|
||||
<a href="#">
|
||||
<span class="sr-only">Workflow</span>
|
||||
<img
|
||||
class="h-8 w-auto"
|
||||
src="https://tailwindui.com/img/logos/workflow-mark-cyan-200.svg"
|
||||
alt="Workflow"
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Right section on desktop -->
|
||||
<div class="hidden lg:ml-4 lg:flex lg:items-center lg:py-5 lg:pr-0.5">
|
||||
<button
|
||||
type="button"
|
||||
class="flex-shrink-0 p-1 text-cyan-200 rounded-full hover:text-white hover:bg-white hover:bg-opacity-10 focus:outline-none focus:ring-2 focus:ring-white"
|
||||
>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<BellIcon
|
||||
class="h-6 w-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<Menu
|
||||
as="div"
|
||||
class="ml-4 relative flex-shrink-0"
|
||||
>
|
||||
<div>
|
||||
<MenuButton
|
||||
class="bg-white rounded-full flex text-sm ring-2 ring-white ring-opacity-20 focus:outline-none focus:ring-opacity-100"
|
||||
>
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<img
|
||||
class="h-8 w-8 rounded-full"
|
||||
:src="user.imageUrl"
|
||||
alt=""
|
||||
>
|
||||
</MenuButton>
|
||||
</div>
|
||||
<transition
|
||||
leave-active-class="transition ease-in duration-75"
|
||||
leave-from-class="transform opacity-100 scale-100"
|
||||
leave-to-class="transform opacity-0 scale-95"
|
||||
>
|
||||
<MenuItems
|
||||
class="origin-top-right z-40 absolute -right-2 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
>
|
||||
<MenuItem
|
||||
v-for="item in userNavigation"
|
||||
:key="item.name"
|
||||
v-slot="{ active }"
|
||||
>
|
||||
<a
|
||||
:href="item.href"
|
||||
:class="[active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700']"
|
||||
>
|
||||
{{ item.name }}
|
||||
</a>
|
||||
</MenuItem>
|
||||
</MenuItems>
|
||||
</transition>
|
||||
</Menu>
|
||||
</div>
|
||||
|
||||
<div class="w-full py-5 lg:border-t lg:border-white lg:border-opacity-20">
|
||||
<div class="lg:grid lg:grid-cols-3 lg:gap-8 lg:items-center">
|
||||
<!-- Left nav -->
|
||||
<div class="hidden lg:block lg:col-span-2">
|
||||
<nav class="flex space-x-4">
|
||||
<a
|
||||
v-for="item in navigation"
|
||||
:key="item.name"
|
||||
:href="item.href"
|
||||
:class="[item.current ? 'text-white' : 'text-cyan-100', 'text-sm font-medium rounded-md bg-white bg-opacity-0 px-3 py-2 hover:bg-opacity-10']"
|
||||
:aria-current="item.current ? 'page' : undefined"
|
||||
>
|
||||
{{ item.name }}
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="px-12 lg:px-0">
|
||||
<!-- Search -->
|
||||
<div class="max-w-xs mx-auto w-full lg:max-w-md">
|
||||
<label
|
||||
for="search"
|
||||
class="sr-only"
|
||||
>Search</label>
|
||||
<div class="relative text-white focus-within:text-gray-600">
|
||||
<div
|
||||
class="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center"
|
||||
>
|
||||
<SearchIcon
|
||||
class="h-5 w-5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
id="search"
|
||||
class="block w-full text-white bg-white bg-opacity-20 py-2 pl-10 pr-3 border border-transparent rounded-md leading-5 focus:text-gray-900 placeholder-white focus:outline-none focus:bg-opacity-100 focus:border-transparent focus:placeholder-gray-500 focus:ring-0 sm:text-sm"
|
||||
placeholder="Search"
|
||||
type="search"
|
||||
name="search"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Menu button -->
|
||||
<div class="absolute right-0 flex-shrink-0 lg:hidden">
|
||||
<!-- Mobile menu button -->
|
||||
<PopoverButton
|
||||
class="bg-transparent p-2 rounded-md inline-flex items-center justify-center text-cyan-200 hover:text-white hover:bg-white hover:bg-opacity-10 focus:outline-none focus:ring-2 focus:ring-white"
|
||||
>
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<MenuIcon
|
||||
v-if="!open"
|
||||
class="block h-6 w-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<XIcon
|
||||
v-else
|
||||
class="block h-6 w-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</PopoverButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TransitionRoot
|
||||
as="template"
|
||||
:show="open"
|
||||
>
|
||||
<div class="lg:hidden">
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="duration-150 ease-out"
|
||||
enter-from="opacity-0"
|
||||
enter-to="opacity-100"
|
||||
leave="duration-150 ease-in"
|
||||
leave-from="opacity-100"
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<PopoverOverlay class="z-20 fixed inset-0 bg-black bg-opacity-25" />
|
||||
</TransitionChild>
|
||||
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="duration-150 ease-out"
|
||||
enter-from="opacity-0 scale-95"
|
||||
enter-to="opacity-100 scale-100"
|
||||
leave="duration-150 ease-in"
|
||||
leave-from="opacity-100 scale-100"
|
||||
leave-to="opacity-0 scale-95"
|
||||
>
|
||||
<PopoverPanel
|
||||
focus
|
||||
class="z-30 absolute top-0 inset-x-0 max-w-3xl mx-auto w-full p-2 transition transform origin-top"
|
||||
>
|
||||
<div
|
||||
class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-white divide-y divide-gray-200"
|
||||
>
|
||||
<div class="pt-3 pb-2">
|
||||
<div class="flex items-center justify-between px-4">
|
||||
<div>
|
||||
<img
|
||||
class="h-8 w-auto"
|
||||
src="https://tailwindui.com/img/logos/workflow-mark-cyan-600.svg"
|
||||
alt="Workflow"
|
||||
>
|
||||
</div>
|
||||
<div class="-mr-2">
|
||||
<PopoverButton
|
||||
class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-cyan-500"
|
||||
>
|
||||
<span class="sr-only">Close menu</span>
|
||||
<XIcon
|
||||
class="h-6 w-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</PopoverButton>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 px-2 space-y-1">
|
||||
<a
|
||||
v-for="item in navigation"
|
||||
:key="item.name"
|
||||
: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"
|
||||
>
|
||||
{{ item.name }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-4 pb-2">
|
||||
<div class="flex items-center px-5">
|
||||
<div class="flex-shrink-0">
|
||||
<img
|
||||
class="h-10 w-10 rounded-full"
|
||||
:src="user.imageUrl"
|
||||
alt=""
|
||||
>
|
||||
</div>
|
||||
<div class="ml-3 min-w-0 flex-1">
|
||||
<div class="text-base font-medium text-gray-800 truncate">
|
||||
{{ user.name }}
|
||||
</div>
|
||||
<div class="text-sm font-medium text-gray-500 truncate">
|
||||
{{ user.email }}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="ml-auto flex-shrink-0 bg-white p-1 text-gray-400 rounded-full hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500"
|
||||
>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<BellIcon
|
||||
class="h-6 w-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-3 px-2 space-y-1">
|
||||
<a
|
||||
v-for="item in userNavigation"
|
||||
:key="item.name"
|
||||
: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"
|
||||
>
|
||||
{{ item.name }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PopoverPanel>
|
||||
</TransitionChild>
|
||||
</div>
|
||||
</TransitionRoot>
|
||||
</Popover>
|
||||
<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">
|
||||
<h1 class="sr-only">
|
||||
Profile
|
||||
</h1>
|
||||
<!-- Main 3 column grid -->
|
||||
<InertiaHead title="Strona główna" />
|
||||
<div class="grid grid-cols-1 gap-4 items-start lg:grid-cols-3 lg:gap-8">
|
||||
<!-- Left column -->
|
||||
<div class="grid grid-cols-1 gap-4 lg:col-span-2">
|
||||
@ -292,12 +35,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 flex justify-center sm:mt-0">
|
||||
<a
|
||||
<InertiaLink
|
||||
href="#"
|
||||
class="flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
View profile
|
||||
</a>
|
||||
</InertiaLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -346,7 +89,7 @@
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<h3 class="text-lg font-medium">
|
||||
<a
|
||||
<InertiaLink
|
||||
:href="action.href"
|
||||
class="focus:outline-none"
|
||||
>
|
||||
@ -356,7 +99,7 @@
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ action.name }}
|
||||
</a>
|
||||
</InertiaLink>
|
||||
</h3>
|
||||
<p class="mt-2 text-sm text-gray-500">
|
||||
Doloribus dolores nostrum quia qui natus officia quod et dolorem. Sit
|
||||
@ -373,7 +116,9 @@
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M20 4h1a1 1 0 00-1-1v1zm-1 12a1 1 0 102 0h-2zM8 3a1 1 0 000 2V3zM3.293 19.293a1 1 0 101.414 1.414l-1.414-1.414zM19 4v12h2V4h-2zm1-1H8v2h12V3zm-.707.293l-16 16 1.414 1.414 16-16-1.414-1.414z" />
|
||||
<path
|
||||
d="M20 4h1a1 1 0 00-1-1v1zm-1 12a1 1 0 102 0h-2zM8 3a1 1 0 000 2V3zM3.293 19.293a1 1 0 101.414 1.414l-1.414-1.414zM19 4v12h2V4h-2zm1-1H8v2h12V3zm-.707.293l-16 16 1.414 1.414 16-16-1.414-1.414z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
@ -405,7 +150,7 @@
|
||||
>
|
||||
<div class="relative focus-within:ring-2 focus-within:ring-cyan-500">
|
||||
<h3 class="text-sm font-semibold text-gray-800">
|
||||
<a
|
||||
<InertiaLink
|
||||
:href="announcement.href"
|
||||
class="hover:underline focus:outline-none"
|
||||
>
|
||||
@ -415,7 +160,7 @@
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ announcement.title }}
|
||||
</a>
|
||||
</InertiaLink>
|
||||
</h3>
|
||||
<p class="mt-1 text-sm text-gray-600 line-clamp-2">
|
||||
{{ announcement.preview }}
|
||||
@ -425,12 +170,12 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<a
|
||||
<InertiaLink
|
||||
href="#"
|
||||
class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
View all
|
||||
</a>
|
||||
</InertiaLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -473,95 +218,53 @@
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
<InertiaLink
|
||||
:href="person.href"
|
||||
class="inline-flex items-center shadow-sm px-2.5 py-0.5 border border-gray-300 text-sm leading-5 font-medium rounded-full text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
View
|
||||
</a>
|
||||
</InertiaLink>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<a
|
||||
<InertiaLink
|
||||
href="#"
|
||||
class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
View all
|
||||
</a>
|
||||
</InertiaLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 lg:max-w-7xl">
|
||||
<div class="border-t border-gray-200 py-8 text-sm text-gray-500 text-center sm:text-left">
|
||||
<span
|
||||
class="block sm:inline"
|
||||
>© 2021 Tailwind Labs Inc.</span> <span class="block sm:inline">All rights reserved.</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuItems,
|
||||
Popover,
|
||||
PopoverButton,
|
||||
PopoverOverlay,
|
||||
PopoverPanel,
|
||||
TransitionChild,
|
||||
TransitionRoot,
|
||||
} from '@headlessui/vue';
|
||||
import {
|
||||
AcademicCapIcon,
|
||||
BadgeCheckIcon,
|
||||
BellIcon,
|
||||
CashIcon,
|
||||
ClockIcon,
|
||||
MenuIcon,
|
||||
ReceiptRefundIcon,
|
||||
UsersIcon,
|
||||
XIcon,
|
||||
} from '@heroicons/vue/outline';
|
||||
import {SearchIcon} from '@heroicons/vue/solid';
|
||||
|
||||
const user = {
|
||||
name: 'Chelsea Hagon',
|
||||
email: 'chelseahagon@example.com',
|
||||
role: 'Human Resources Manager',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
||||
};
|
||||
const navigation = [
|
||||
{name: 'Home', href: '#', current: true},
|
||||
{name: 'Profile', href: '#', current: false},
|
||||
{name: 'Resources', href: '#', current: false},
|
||||
{name: 'Company Directory', href: '#', current: false},
|
||||
{name: 'Openings', href: '#', current: false},
|
||||
];
|
||||
const userNavigation = [
|
||||
{name: 'Your Profile', href: '#'},
|
||||
{name: 'Settings', href: '#'},
|
||||
{name: 'Sign out', href: '#'},
|
||||
];
|
||||
const stats = [
|
||||
import {computed} from 'vue';
|
||||
import {usePage} from '@inertiajs/inertia-vue3';
|
||||
export default {
|
||||
name: 'Dashboard',
|
||||
setup() {
|
||||
const user = computed(() => usePage().props.value.auth.user);
|
||||
const stats = [
|
||||
{label: 'Vacation days left', value: 12},
|
||||
{label: 'Sick days left', value: 4},
|
||||
{label: 'Personal days left', value: 2},
|
||||
];
|
||||
const actions = [
|
||||
];
|
||||
const actions = [
|
||||
{
|
||||
icon: ClockIcon,
|
||||
name: 'Request time off',
|
||||
@ -583,7 +286,13 @@ const actions = [
|
||||
iconForeground: 'text-sky-700',
|
||||
iconBackground: 'bg-sky-50',
|
||||
},
|
||||
{icon: CashIcon, name: 'Payroll', href: '#', iconForeground: 'text-yellow-700', iconBackground: 'bg-yellow-50'},
|
||||
{
|
||||
icon: CashIcon,
|
||||
name: 'Payroll',
|
||||
href: '#',
|
||||
iconForeground: 'text-yellow-700',
|
||||
iconBackground: 'bg-yellow-50'
|
||||
},
|
||||
{
|
||||
icon: ReceiptRefundIcon,
|
||||
name: 'Submit an expense',
|
||||
@ -598,8 +307,8 @@ const actions = [
|
||||
iconForeground: 'text-indigo-700',
|
||||
iconBackground: 'bg-indigo-50',
|
||||
},
|
||||
];
|
||||
const recentHires = [
|
||||
];
|
||||
const recentHires = [
|
||||
{
|
||||
name: 'Leonard Krasner',
|
||||
handle: 'leonardkrasner',
|
||||
@ -628,8 +337,8 @@ const recentHires = [
|
||||
'https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
||||
href: '#',
|
||||
},
|
||||
];
|
||||
const announcements = [
|
||||
];
|
||||
const announcements = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Office closed on July 2nd',
|
||||
@ -651,31 +360,9 @@ const announcements = [
|
||||
preview:
|
||||
'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.',
|
||||
},
|
||||
];
|
||||
|
||||
export default {
|
||||
name: 'Dashboard',
|
||||
components: {
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuItems,
|
||||
Popover,
|
||||
PopoverButton,
|
||||
PopoverOverlay,
|
||||
PopoverPanel,
|
||||
TransitionChild,
|
||||
TransitionRoot,
|
||||
BellIcon,
|
||||
MenuIcon,
|
||||
SearchIcon,
|
||||
XIcon,
|
||||
},
|
||||
setup() {
|
||||
];
|
||||
return {
|
||||
user,
|
||||
navigation,
|
||||
userNavigation,
|
||||
stats,
|
||||
actions,
|
||||
recentHires,
|
||||
|
||||
61
resources/js/Pages/Login.vue
Normal file
61
resources/js/Pages/Login.vue
Normal file
@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<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-12 w-auto"
|
||||
src="img/logo.png"
|
||||
alt="Blumilk"
|
||||
>
|
||||
<a
|
||||
href="/login/google/start"
|
||||
class="inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
|
||||
>
|
||||
Zaloguj się poprzez konto 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
|
||||
v-if="errors.oauth"
|
||||
class="w-full rounded-md bg-red-100 border border-red-400 p-4"
|
||||
>
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<XCircleIcon class="h-5 w-5 text-red-400" />
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-800">
|
||||
{{ errors.oauth }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {XCircleIcon} from '@heroicons/vue/solid';
|
||||
import GuestLayout from '@/Shared/Layout/GuestLayout';
|
||||
|
||||
export default {
|
||||
name: 'Login',
|
||||
components: {
|
||||
XCircleIcon,
|
||||
},
|
||||
layout: GuestLayout,
|
||||
props: {
|
||||
errors: {
|
||||
type: Object,
|
||||
default: () => ({oauth: null}),
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
19
resources/js/Shared/Layout/AppLayout.vue
Normal file
19
resources/js/Shared/Layout/AppLayout.vue
Normal 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>
|
||||
11
resources/js/Shared/Layout/GuestLayout.vue
Normal file
11
resources/js/Shared/Layout/GuestLayout.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div class="min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'GuestLayout',
|
||||
};
|
||||
</script>
|
||||
285
resources/js/Shared/MainMenu.vue
Normal file
285
resources/js/Shared/MainMenu.vue
Normal file
@ -0,0 +1,285 @@
|
||||
<template>
|
||||
<Popover
|
||||
v-slot="{ open }"
|
||||
as="header"
|
||||
class="pb-24 bg-gradient-to-r from-blumilk-500 to-blumilk-600"
|
||||
>
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8">
|
||||
<div class="relative flex flex-wrap items-center justify-center lg:justify-between">
|
||||
<!-- Logo -->
|
||||
<div class="absolute left-0 py-5 flex-shrink-0 lg:static">
|
||||
<InertiaLink href="/">
|
||||
<img
|
||||
class="h-8 w-auto"
|
||||
src="/img/logo-white.png"
|
||||
alt="Workflow"
|
||||
>
|
||||
</InertiaLink>
|
||||
</div>
|
||||
|
||||
<!-- Right section on desktop -->
|
||||
<div class="hidden lg:ml-4 lg:flex lg:items-center lg:py-5 lg:pr-0.5">
|
||||
<button
|
||||
type="button"
|
||||
class="flex-shrink-0 p-1 text-cyan-200 rounded-full hover:text-white hover:bg-white hover:bg-opacity-10 focus:outline-none focus:ring-2 focus:ring-white"
|
||||
>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<BellIcon
|
||||
class="h-6 w-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<Menu
|
||||
as="div"
|
||||
class="ml-4 relative flex-shrink-0"
|
||||
>
|
||||
<div>
|
||||
<MenuButton
|
||||
class="bg-white rounded-full flex text-sm ring-2 ring-white ring-opacity-20 focus:outline-none focus:ring-opacity-100"
|
||||
>
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<img
|
||||
class="h-8 w-8 rounded-full"
|
||||
:src="user.imageUrl"
|
||||
alt=""
|
||||
>
|
||||
</MenuButton>
|
||||
</div>
|
||||
<transition
|
||||
leave-active-class="transition ease-in duration-75"
|
||||
leave-from-class="transform opacity-100 scale-100"
|
||||
leave-to-class="transform opacity-0 scale-95"
|
||||
>
|
||||
<MenuItems
|
||||
class="origin-top-right z-40 absolute -right-2 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
>
|
||||
<MenuItem
|
||||
v-for="item in userNavigation"
|
||||
:key="item.name"
|
||||
v-slot="{ active }"
|
||||
>
|
||||
<InertiaLink
|
||||
:href="item.href"
|
||||
:class="[active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700']"
|
||||
>
|
||||
{{ item.name }}
|
||||
</InertiaLink>
|
||||
</MenuItem>
|
||||
</MenuItems>
|
||||
</transition>
|
||||
</Menu>
|
||||
</div>
|
||||
|
||||
<div class="w-full py-5 lg:border-t lg:border-white lg:border-opacity-20">
|
||||
<div class="lg:items-center">
|
||||
<div class="hidden lg:block">
|
||||
<nav class="flex space-x-4">
|
||||
<InertiaLink
|
||||
v-for="item in navigation"
|
||||
:key="item.name"
|
||||
:href="item.href"
|
||||
:class="[item.current ? 'text-white' : 'text-cyan-100', 'text-sm font-medium rounded-md bg-white bg-opacity-0 px-3 py-2 hover:bg-opacity-10']"
|
||||
:aria-current="item.current ? 'page' : undefined"
|
||||
>
|
||||
{{ item.name }}
|
||||
</InertiaLink>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Menu button -->
|
||||
<div class="absolute right-0 flex-shrink-0 lg:hidden">
|
||||
<!-- Mobile menu button -->
|
||||
<PopoverButton
|
||||
class="bg-transparent p-2 rounded-md inline-flex items-center justify-center text-cyan-200 hover:text-white hover:bg-white hover:bg-opacity-10 focus:outline-none focus:ring-2 focus:ring-white"
|
||||
>
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<MenuIcon
|
||||
v-if="!open"
|
||||
class="block h-6 w-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<XIcon
|
||||
v-else
|
||||
class="block h-6 w-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</PopoverButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TransitionRoot
|
||||
as="template"
|
||||
:show="open"
|
||||
>
|
||||
<div class="lg:hidden">
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="duration-150 ease-out"
|
||||
enter-from="opacity-0"
|
||||
enter-to="opacity-100"
|
||||
leave="duration-150 ease-in"
|
||||
leave-from="opacity-100"
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<PopoverOverlay class="z-20 fixed inset-0 bg-black bg-opacity-25" />
|
||||
</TransitionChild>
|
||||
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="duration-150 ease-out"
|
||||
enter-from="opacity-0 scale-95"
|
||||
enter-to="opacity-100 scale-100"
|
||||
leave="duration-150 ease-in"
|
||||
leave-from="opacity-100 scale-100"
|
||||
leave-to="opacity-0 scale-95"
|
||||
>
|
||||
<PopoverPanel
|
||||
focus
|
||||
class="z-30 absolute top-0 inset-x-0 max-w-3xl mx-auto w-full p-2 transition transform origin-top"
|
||||
>
|
||||
<div
|
||||
class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-white divide-y divide-gray-200"
|
||||
>
|
||||
<div class="pt-3 pb-2">
|
||||
<div class="flex items-center justify-between px-4">
|
||||
<div>
|
||||
<img
|
||||
class="h-8 w-auto"
|
||||
src="https://tailwindui.com/img/logos/workflow-mark-cyan-600.svg"
|
||||
alt="Workflow"
|
||||
>
|
||||
</div>
|
||||
<div class="-mr-2">
|
||||
<PopoverButton
|
||||
class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-cyan-500"
|
||||
>
|
||||
<span class="sr-only">Close menu</span>
|
||||
<XIcon
|
||||
class="h-6 w-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</PopoverButton>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 px-2 space-y-1">
|
||||
<InertiaLink
|
||||
v-for="item in navigation"
|
||||
:key="item.name"
|
||||
: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"
|
||||
>
|
||||
{{ item.name }}
|
||||
</InertiaLink>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-4 pb-2">
|
||||
<div class="flex items-center px-5">
|
||||
<div class="flex-shrink-0">
|
||||
<img
|
||||
class="h-10 w-10 rounded-full"
|
||||
:src="user.imageUrl"
|
||||
alt=""
|
||||
>
|
||||
</div>
|
||||
<div class="ml-3 min-w-0 flex-1">
|
||||
<div class="text-base font-medium text-gray-800 truncate">
|
||||
{{ user.name }}
|
||||
</div>
|
||||
<div class="text-sm font-medium text-gray-500 truncate">
|
||||
{{ user.email }}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="ml-auto flex-shrink-0 bg-white p-1 text-gray-400 rounded-full hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500"
|
||||
>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<BellIcon
|
||||
class="h-6 w-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-3 px-2 space-y-1">
|
||||
<InertiaLink
|
||||
v-for="item in userNavigation"
|
||||
:key="item.name"
|
||||
: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"
|
||||
>
|
||||
{{ item.name }}
|
||||
</InertiaLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PopoverPanel>
|
||||
</TransitionChild>
|
||||
</div>
|
||||
</TransitionRoot>
|
||||
</Popover>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuItems,
|
||||
Popover,
|
||||
PopoverButton,
|
||||
PopoverOverlay,
|
||||
PopoverPanel,
|
||||
TransitionChild,
|
||||
TransitionRoot
|
||||
} from '@headlessui/vue';
|
||||
import {BellIcon, MenuIcon, XIcon} from '@heroicons/vue/outline';
|
||||
import {computed} from 'vue';
|
||||
import {usePage} from '@inertiajs/inertia-vue3';
|
||||
|
||||
export default {
|
||||
name: 'MainMenu',
|
||||
components: {
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuItems,
|
||||
Popover,
|
||||
PopoverButton,
|
||||
PopoverOverlay,
|
||||
PopoverPanel,
|
||||
TransitionChild,
|
||||
TransitionRoot,
|
||||
BellIcon,
|
||||
MenuIcon,
|
||||
XIcon,
|
||||
},
|
||||
setup() {
|
||||
const user = computed(() => usePage().props.value.auth.user);
|
||||
const navigation = [
|
||||
{name: 'Home', href: '/', current: true},
|
||||
{name: 'Profile', href: '#', current: false},
|
||||
{name: 'Resources', href: '#', current: false},
|
||||
{name: 'Company Directory', href: '#', current: false},
|
||||
{name: 'Openings', href: '#', current: false},
|
||||
];
|
||||
const userNavigation = [
|
||||
{name: 'Your Profile', href: '#'},
|
||||
{name: 'Settings', href: '#'},
|
||||
{name: 'Sign out', href: '#'},
|
||||
];
|
||||
|
||||
return {
|
||||
user,
|
||||
navigation,
|
||||
userNavigation,
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
@ -1,14 +1,24 @@
|
||||
import {createApp, h} from 'vue';
|
||||
import {createInertiaApp} from '@inertiajs/inertia-vue3';
|
||||
import {createInertiaApp, Head, Link} from '@inertiajs/inertia-vue3';
|
||||
import {InertiaProgress} from '@inertiajs/progress';
|
||||
import AppLayout from '@/Shared/Layout/AppLayout';
|
||||
|
||||
createInertiaApp({
|
||||
resolve: name => require(`./Pages/${name}`),
|
||||
resolve: name => {
|
||||
const page = require(`./Pages/${name}`).default;
|
||||
|
||||
page.layout = page.layout || AppLayout;
|
||||
|
||||
return page;
|
||||
},
|
||||
setup({el, App, props, plugin}) {
|
||||
createApp({render: () => h(App, props)})
|
||||
.use(plugin)
|
||||
.component('InertiaLink', Link)
|
||||
.component('InertiaHead', Head)
|
||||
.mount(el);
|
||||
},
|
||||
title: title => `${title} - Toby`,
|
||||
});
|
||||
|
||||
InertiaProgress.init();
|
||||
|
||||
3
resources/lang/pl.json
Normal file
3
resources/lang/pl.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"User does not exist.": "Użytkownik nie istnieje."
|
||||
}
|
||||
@ -2,6 +2,29 @@
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Support\Facades\Auth;
|
||||
use Illuminate\Support\Facades\Route;
|
||||
use Toby\Http\Controllers\GoogleController;
|
||||
|
||||
Route::get("/", fn() => inertia("Dashboard"));
|
||||
Route::middleware("auth")->group(function (): void {
|
||||
Route::get("/", fn() => inertia("Dashboard"))->name("dashboard");
|
||||
Route::get("/logout", function (Request $request) {
|
||||
Auth::logout();
|
||||
|
||||
$request->session()->invalidate();
|
||||
|
||||
$request->session()->regenerateToken();
|
||||
|
||||
|
||||
return redirect()->route("login");
|
||||
});
|
||||
});
|
||||
|
||||
Route::middleware("guest")->group(function(): void {
|
||||
Route::get("login", fn() => inertia("Login"))->name("login");
|
||||
Route::get("login/google/start", [GoogleController::class, "redirect"])
|
||||
->name("login.google.start");
|
||||
Route::get("login/google/end", [GoogleController::class, "callback"])
|
||||
->name("login.google.end");
|
||||
});
|
||||
@ -9,6 +9,20 @@ module.exports = {
|
||||
fontFamily: {
|
||||
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
|
||||
},
|
||||
colors: {
|
||||
'blumilk': {
|
||||
'50': '#D5DFEE',
|
||||
'100': '#C7D4E9',
|
||||
'200': '#AABDDD',
|
||||
'300': '#8CA7D1',
|
||||
'400': '#6F90C6',
|
||||
'500': '#527ABA',
|
||||
'600': '#3C5F97',
|
||||
'700': '#2C466F',
|
||||
'800': '#1C2D47',
|
||||
'900': '#0C141F'
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user