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

#2 - wip

Browse Source
This commit is contained in:
Adrian Hopek 2022-01-12 15:28:48 +01:00
parent 2abd83526d
commit 197e7da9cc
22 changed files with 994 additions and 1895 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.env.example
View File

@ -44,3 +44,7 @@ MAIL_FROM_ADDRESS=null
MAIL_FROM_NAME="${APP_NAME}" MAIL_FROM_NAME="${APP_NAME}"
DOCKER_INSTALL_XDEBUG=false DOCKER_INSTALL_XDEBUG=false
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
GOOGLE_REDIRECT=

43
app/Http/Controllers/GoogleController.php Normal file
View 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."),
]);
}
}
}

4
app/Http/Middleware/Authenticate.php
View File

@ -8,10 +8,8 @@ use Illuminate\Auth\Middleware\Authenticate as Middleware;
class Authenticate extends Middleware class Authenticate extends Middleware
{ {
protected function redirectTo($request) protected function redirectTo($request): ?string
{ {
if (!$request->expectsJson()) {
return route("login"); return route("login");
} }
}
} }

10
app/Http/Middleware/HandleInertiaRequests.php
View File

@ -11,7 +11,17 @@ class HandleInertiaRequests extends Middleware
{ {
public function share(Request $request): array public function share(Request $request): array
{ {
$user = $request->user();
return array_merge(parent::share($request), [ 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() => [ "flash" => fn() => [
"success" => $request->session()->get("success"), "success" => $request->session()->get("success"),
"error" => $request->session()->get("error"), "error" => $request->session()->get("error"),

3
app/Http/Middleware/RedirectIfAuthenticated.php
View File

@ -8,7 +8,6 @@ use Closure;
use Illuminate\Http\Request; use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth; use Illuminate\Support\Facades\Auth;
use Symfony\Component\HttpFoundation\Response; use Symfony\Component\HttpFoundation\Response;
use Toby\Providers\RouteServiceProvider;
class RedirectIfAuthenticated class RedirectIfAuthenticated
{ {
@ -18,7 +17,7 @@ class RedirectIfAuthenticated
foreach ($guards as $guard) { foreach ($guards as $guard) {
if (Auth::guard($guard)->check()) { if (Auth::guard($guard)->check()) {
return redirect(RouteServiceProvider::HOME); return redirect()->route("login");
} }
} }

19
app/Models/User.php
View File

@ -7,7 +7,15 @@ namespace Toby\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable; use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable; 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 class User extends Authenticatable
{ {
use HasFactory; use HasFactory;
@ -16,15 +24,22 @@ class User extends Authenticatable
protected $fillable = [ protected $fillable = [
"name", "name",
"email", "email",
"password",
]; ];
protected $hidden = [ protected $hidden = [
"password",
"remember_token", "remember_token",
]; ];
protected $casts = [ protected $casts = [
"email_verified_at" => "datetime", "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();
}
} }

2
app/Providers/RouteServiceProvider.php
View File

@ -12,8 +12,6 @@ use Illuminate\Support\Facades\Route;
class RouteServiceProvider extends ServiceProvider class RouteServiceProvider extends ServiceProvider
{ {
public const HOME = "/home";
public function boot(): void public function boot(): void
{ {
$this->configureRateLimiting(); $this->configureRateLimiting();

1
composer.json
View File

@ -11,6 +11,7 @@
"guzzlehttp/guzzle": "^7.0.1", "guzzlehttp/guzzle": "^7.0.1",
"inertiajs/inertia-laravel": "^0.5.1", "inertiajs/inertia-laravel": "^0.5.1",
"laravel/framework": "^8.75", "laravel/framework": "^8.75",
"laravel/socialite": "^5.2",
"laravel/telescope": "^4.6", "laravel/telescope": "^4.6",
"laravel/tinker": "^2.5" "laravel/tinker": "^2.5"
}, },

1411
composer.lock generated
View File

File diff suppressed because it is too large Load Diff

8
config/services.php
View File

@ -2,4 +2,10 @@
declare(strict_types=1); declare(strict_types=1);
return []; return [
"google" => [
"client_id" => env("GOOGLE_CLIENT_ID"),
"client_secret" => env("GOOGLE_CLIENT_SECRET"),
"redirect" => env("GOOGLE_REDIRECT"),
],
];

3
database/factories/UserFactory.php
View File

@ -5,7 +5,6 @@ declare(strict_types=1);
namespace Database\Factories; namespace Database\Factories;
use Illuminate\Database\Eloquent\Factories\Factory; use Illuminate\Database\Eloquent\Factories\Factory;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Str; use Illuminate\Support\Str;
class UserFactory extends Factory class UserFactory extends Factory
@ -15,8 +14,6 @@ class UserFactory extends Factory
return [ return [
"name" => $this->faker->name(), "name" => $this->faker->name(),
"email" => $this->faker->unique()->safeEmail(), "email" => $this->faker->unique()->safeEmail(),
"email_verified_at" => now(),
"password" => Hash::make("secret123"),
"remember_token" => Str::random(10), "remember_token" => Str::random(10),
]; ];
} }

4
database/migrations/2014_10_12_000000_create_users_table.php
View File

@ -12,9 +12,9 @@ return new class() extends Migration {
Schema::create("users", function (Blueprint $table): void { Schema::create("users", function (Blueprint $table): void {
$table->id(); $table->id();
$table->string("name"); $table->string("name");
$table->string("avatar")->nullable();
$table->string("email")->unique(); $table->string("email")->unique();
$table->timestamp("email_verified_at")->nullable(); $table->string("google_id")->nullable();
$table->string("password");
$table->rememberToken(); $table->rememberToken();
$table->timestamps(); $table->timestamps();
}); });

BIN
public/img/logo-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

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

@ -1,262 +1,5 @@
<template> <template>
<div class="min-h-full"> <InertiaHead title="Strona główna" />
<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 -->
<div class="grid grid-cols-1 gap-4 items-start lg:grid-cols-3 lg:gap-8"> <div class="grid grid-cols-1 gap-4 items-start lg:grid-cols-3 lg:gap-8">
<!-- Left column --> <!-- Left column -->
<div class="grid grid-cols-1 gap-4 lg:col-span-2"> <div class="grid grid-cols-1 gap-4 lg:col-span-2">
@ -292,12 +35,12 @@
</div> </div>
</div> </div>
<div class="mt-5 flex justify-center sm:mt-0"> <div class="mt-5 flex justify-center sm:mt-0">
<a <InertiaLink
href="#" 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" 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 View profile
</a> </InertiaLink>
</div> </div>
</div> </div>
</div> </div>
@ -346,7 +89,7 @@
</div> </div>
<div class="mt-8"> <div class="mt-8">
<h3 class="text-lg font-medium"> <h3 class="text-lg font-medium">
<a <InertiaLink
:href="action.href" :href="action.href"
class="focus:outline-none" class="focus:outline-none"
> >
@ -356,7 +99,7 @@
aria-hidden="true" aria-hidden="true"
/> />
{{ action.name }} {{ action.name }}
</a> </InertiaLink>
</h3> </h3>
<p class="mt-2 text-sm text-gray-500"> <p class="mt-2 text-sm text-gray-500">
Doloribus dolores nostrum quia qui natus officia quod et dolorem. Sit Doloribus dolores nostrum quia qui natus officia quod et dolorem. Sit
@ -373,7 +116,9 @@
fill="currentColor" fill="currentColor"
viewBox="0 0 24 24" 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> </svg>
</span> </span>
</div> </div>
@ -405,7 +150,7 @@
> >
<div class="relative focus-within:ring-2 focus-within:ring-cyan-500"> <div class="relative focus-within:ring-2 focus-within:ring-cyan-500">
<h3 class="text-sm font-semibold text-gray-800"> <h3 class="text-sm font-semibold text-gray-800">
<a <InertiaLink
:href="announcement.href" :href="announcement.href"
class="hover:underline focus:outline-none" class="hover:underline focus:outline-none"
> >
@ -415,7 +160,7 @@
aria-hidden="true" aria-hidden="true"
/> />
{{ announcement.title }} {{ announcement.title }}
</a> </InertiaLink>
</h3> </h3>
<p class="mt-1 text-sm text-gray-600 line-clamp-2"> <p class="mt-1 text-sm text-gray-600 line-clamp-2">
{{ announcement.preview }} {{ announcement.preview }}
@ -425,12 +170,12 @@
</ul> </ul>
</div> </div>
<div class="mt-6"> <div class="mt-6">
<a <InertiaLink
href="#" 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" 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 View all
</a> </InertiaLink>
</div> </div>
</div> </div>
</div> </div>
@ -473,95 +218,53 @@
</p> </p>
</div> </div>
<div> <div>
<a <InertiaLink
:href="person.href" :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" 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 View
</a> </InertiaLink>
</div> </div>
</div> </div>
</li> </li>
</ul> </ul>
</div> </div>
<div class="mt-6"> <div class="mt-6">
<a <InertiaLink
href="#" 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" 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 View all
</a> </InertiaLink>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
</div> </div>
</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"
>&copy; 2021 Tailwind Labs Inc.</span> <span class="block sm:inline">All rights reserved.</span>
</div>
</div>
</footer>
</div>
</template> </template>
<script> <script>
import {
Menu,
MenuButton,
MenuItem,
MenuItems,
Popover,
PopoverButton,
PopoverOverlay,
PopoverPanel,
TransitionChild,
TransitionRoot,
} from '@headlessui/vue';
import { import {
AcademicCapIcon, AcademicCapIcon,
BadgeCheckIcon, BadgeCheckIcon,
BellIcon,
CashIcon, CashIcon,
ClockIcon, ClockIcon,
MenuIcon,
ReceiptRefundIcon, ReceiptRefundIcon,
UsersIcon, UsersIcon,
XIcon,
} from '@heroicons/vue/outline'; } from '@heroicons/vue/outline';
import {SearchIcon} from '@heroicons/vue/solid'; import {computed} from 'vue';
import {usePage} from '@inertiajs/inertia-vue3';
const user = { export default {
name: 'Chelsea Hagon', name: 'Dashboard',
email: 'chelseahagon@example.com', setup() {
role: 'Human Resources Manager', const user = computed(() => usePage().props.value.auth.user);
imageUrl: const stats = [
'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 = [
{label: 'Vacation days left', value: 12}, {label: 'Vacation days left', value: 12},
{label: 'Sick days left', value: 4}, {label: 'Sick days left', value: 4},
{label: 'Personal days left', value: 2}, {label: 'Personal days left', value: 2},
]; ];
const actions = [ const actions = [
{ {
icon: ClockIcon, icon: ClockIcon,
name: 'Request time off', name: 'Request time off',
@ -583,7 +286,13 @@ const actions = [
iconForeground: 'text-sky-700', iconForeground: 'text-sky-700',
iconBackground: 'bg-sky-50', 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, icon: ReceiptRefundIcon,
name: 'Submit an expense', name: 'Submit an expense',
@ -598,8 +307,8 @@ const actions = [
iconForeground: 'text-indigo-700', iconForeground: 'text-indigo-700',
iconBackground: 'bg-indigo-50', iconBackground: 'bg-indigo-50',
}, },
]; ];
const recentHires = [ const recentHires = [
{ {
name: 'Leonard Krasner', name: 'Leonard Krasner',
handle: 'leonardkrasner', 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', '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: '#', href: '#',
}, },
]; ];
const announcements = [ const announcements = [
{ {
id: 1, id: 1,
title: 'Office closed on July 2nd', title: 'Office closed on July 2nd',
@ -651,31 +360,9 @@ const announcements = [
preview: 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.', '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 { return {
user, user,
navigation,
userNavigation,
stats, stats,
actions, actions,
recentHires, recentHires,

61
resources/js/Pages/Login.vue Normal file
View 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
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>

11
resources/js/Shared/Layout/GuestLayout.vue Normal file
View 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
View 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>

14
resources/js/app.js
View File

@ -1,14 +1,24 @@
import {createApp, h} from 'vue'; 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 {InertiaProgress} from '@inertiajs/progress';
import AppLayout from '@/Shared/Layout/AppLayout';
createInertiaApp({ 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}) { setup({el, App, props, plugin}) {
createApp({render: () => h(App, props)}) createApp({render: () => h(App, props)})
.use(plugin) .use(plugin)
.component('InertiaLink', Link)
.component('InertiaHead', Head)
.mount(el); .mount(el);
}, },
title: title => `${title} - Toby`,
}); });
InertiaProgress.init(); InertiaProgress.init();

3
resources/lang/pl.json Normal file
View File

@ -0,0 +1,3 @@
{
"User does not exist.": "Użytkownik nie istnieje."
}

25
routes/web.php
View File

@ -2,6 +2,29 @@
declare(strict_types=1); declare(strict_types=1);
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Route; 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");
});

14
tailwind.config.js
View File

@ -9,6 +9,20 @@ module.exports = {
fontFamily: { fontFamily: {
sans: ['Inter var', ...defaultTheme.fontFamily.sans], 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: [ plugins: [