add login page

blumilksoftware · Aug 5, 2024 · 991fdfb · 991fdfb
1 parent e36dc65
commit 991fdfb
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 5 deletions.
diff --git a/app/Http/Controllers/GithubController.php b/app/Http/Controllers/GithubController.php
@@ -10,6 +10,8 @@
 use Illuminate\Http\JsonResponse;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Bus;
+use Inertia\Inertia;
+use Inertia\Response;
 use Laravel\Socialite\Facades\Socialite;
 use Symfony\Component\HttpFoundation\RedirectResponse;
 
@@ -73,4 +75,9 @@ public function status(string $batchId): JsonResponse
             "finished" => $batch->finished(),
         ]);
     }
+
+    public function login(): Response
+    {
+        return Inertia::render("Login");
+    }
 }
diff --git a/resources/assets/images/blumilk.png b/resources/assets/images/blumilk.png
diff --git a/resources/css/app.css b/resources/css/app.css
@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+#app {
+    height: 100%;
+}
diff --git a/resources/js/Layouts/GuestLayout.vue b/resources/js/Layouts/GuestLayout.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="flex h-5/6 justify-center items-center px-2 sm:px-0">
+    <main class="w-full max-w-96 h-80 bg-white rounded-xl p-4 shadow flex">
+      <div class="flex-1 w-full p-6">
+        <slot />
+      </div>
+    </main>
+  </div>
+  <div class="container mx-auto">
+    <div class="block uppercase text-white font-semibold text-xs tracking-widest" />
+  </div>
+  <footer>
+    <div class="w-full flex items-center justify-center text-white">
+      <span class="font-semibold text-xs tracking-widest">developed by</span>
+      <a href="https://blumilk.pl/" target="_blank">
+        <img class="w-32" src="../../assets/images/blumilk.png" alt="Blumilk">
+      </a>
+    </div>
+  </footer>
+</template>
diff --git a/resources/js/Pages/Login.vue b/resources/js/Pages/Login.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import GuestLayout from '@/Layouts/GuestLayout.vue'
+import { Head } from '@inertiajs/vue3'
+</script>
+
+<template>
+  <Head title="Login" />
+  <div class="flex flex-col justify-between h-full items-center">
+    <h2 class="text-2xl text-center">Welcome in Github Analyzer</h2>
+    <p class="text-center my-auto">Login with Github to analyze your GitHub Actions and monitor usage minutes!</p>
+    <a class="bg-gray-800 rounded-md block text-center text-white w-5/6 py-3 hover:bg-gray-700" href="/auth/redirect">Login via Github</a>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  layout: GuestLayout,
+}
+</script>
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
@@ -1,12 +1,14 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="h-full">
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
     @vite('resources/js/app.ts')
     @inertiaHead
 </head>
-<body>
-@inertia
+<body class="h-full bg-gradient-to-r from-white to-blue-400">
+    <div class="h-full container py-4 mx-auto">
+        @inertia
+    </div>
 </body>
-</html>
+</html>
diff --git a/routes/web.php b/routes/web.php
@@ -7,8 +7,9 @@
 use Inertia\Response;
 
 Route::get("/", fn(): Response => inertia("Welcome"));
+Route::get("/auth/login", [GithubController::class, "login"])->name("login");
 
 Route::get("/auth/redirect", [GithubController::class, "redirect"]);
 Route::get("/auth/callback", [GithubController::class, "callback"]);
 
-Route::get("/{organizationId}/fetch", [GithubController::class, "fetchData"]);
+Route::get("/{organizationId}/fetch", [GithubController::class, "fetchData"])->middleware("auth");