feat: slicing auth pages (1/2)

.editorconfig

@@ -3,7 +3,7 @@ root = true
 [*]
 charset = utf-8
 end_of_line = lf
-indent_size = 4
+indent_size = 2
 indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true

package.json

@@ -8,6 +8,7 @@
         "autoprefixer": "^10.4.13",
         "axios": "^1.1.2",
         "cypress": "^12.8.0",
+        "flowbite": "^1.6.4",
         "laravel-vite-plugin": "^0.7.2",
         "postcss": "^8.4.21",
         "tailwindcss": "^3.2.7",

resources/js/app.js

@@ -1 +1,2 @@
-import './bootstrap';
+import "./bootstrap";
+import "flowbite";

resources/views/auth/login.blade.php

@@ -0,0 +1,37 @@
+@extends('layout.master')
+
+@section('master')
+  <main class="flex flex-col justify-center items-center min-h-screen bg-[#252525] text-white gap-9">
+    <img src="{{ asset('img/logo.svg') }}" alt="logo" class="w-28 h-24 mt-5">
+    <div class="font-normal text-center text-lg">
+      <h1>Login to</h1>
+      <p>Polinema Room System</p>
+    </div>
+    <form action="" class="flex flex-col gap-6">
+      <div>
+        <label for="username" class="block mb-2 text-sm font-medium dark:text-white">Username</label>
+        <input type="text" id="username" name="username"
+          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block py-2.5 pr-36 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+      </div>
+      <div>
+        <label for="password" class="block mb-2 text-sm font-medium">Password</label>
+        <input type="password" id="password" name="password"
+          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block py-2.5 pr-36 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+          required>
+      </div>
+      <button type="button"
+        class="text-gray-900 bg-gray-100 font-medium rounded-lg py-3 my-5 text-center dark:focus:ring-gray-500 hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100">
+        Login
+      </button>
+    </form>
+    <div class="text-center">
+      <p>Dont have an account?</p>
+      <a href="" class="underline underline-offset-4">Register Now</a>
+    </div>
+    <div class="text-center mb-5 max-w-sm">
+      <p class="break-words">
+        By clicking Register, you accept the terms and conditions of the Polinema Room System.
+      </p>
+    </div>
+  </main>
+@endsection

resources/views/auth/register.blade.php

@@ -0,0 +1,37 @@
+@extends('layout.master')
+
+@section('master')
+  <main class="flex flex-col justify-center items-center min-h-screen bg-[#252525] text-white gap-9">
+    <img src="{{ asset('img/logo.svg') }}" alt="logo" class="w-28 h-24 mt-5">
+    <div class="font-normal text-center text-lg">
+      <h1>Login to</h1>
+      <p>Polinema Room System</p>
+    </div>
+    <form action="" class="flex flex-col gap-6">
+      <div></div>
+      <label for="username" class="block mb-2 text-sm font-medium dark:text-white">Username</label>
+      <input type="text" id="username" name="username"
+        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block py-2.5 pr-36 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+      </div>
+      <div>
+        <label for="password" class="block mb-2 text-sm font-medium">Password</label>
+        <input type="password" id="password" name="password"
+          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block py-2.5 pr-36 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+          required>
+      </div>
+      <button type="button"
+        class="text-gray-900 bg-gray-100 font-medium rounded-lg py-3 my-5 text-center dark:focus:ring-gray-500 hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100">
+        Login
+      </button>
+    </form>
+    <div class="text-center">
+      <p>Dont have an account?</p>
+      <a href="" class="underline underline-offset-4">Register Now</a>
+    </div>
+    <div class="text-center mb-5 max-w-sm">
+      <p class="break-words">
+        By clicking Register, you accept the terms and conditions of the Polinema Room System.
+      </p>
+    </div>
+  </main>
+@endsection

resources/views/layout/master.blade.php

@@ -1,15 +1,28 @@
-<!doctype html>
-<html>
+<!DOCTYPE html>
+<html lang="en">
 
 <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    @vite('resources/css/app.css')
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="icon" type="image/x-icon" href="{{ asset('img/logo.svg') }}">
+  <title>Polarys | Polinema Room System</title>
+
+  {{-- Link Font --}}
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"
+    rel="stylesheet">
+  {{-- Link Css --}}
+  @vite('resources/css/app.css')
 </head>
 
-<body>
-    @include('sweetalert::alert')
-    @yield('master')
+<body class="font-sans">
+  @include('sweetalert::alert')
+  @yield('master')
+  {{-- Link Js --}}
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.4/flowbite.min.js"></script>
 </body>
 
 </html>