From e1719277a89fb413a56d33a282e359d7b3f3f856 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dani=C3=ABl=20van=20Drunen?= <daniel@pixely.me>
Date: Sun, 6 Aug 2023 23:05:07 +0200
Subject: [PATCH] Use Vue Router to get started on different screens

---
 package-lock.json                             |  8 ++++-
 package.json                                  |  3 +-
 resources/assets/js/prototype/app.js          | 30 ++++++++++++++--
 .../assets/js/prototype/components/App.vue    |  6 ++--
 .../assets/js/prototype/screens/Login.vue     | 22 ++++++++++++
 .../assets/js/prototype/screens/Register.vue  | 34 +++++++++++++++++++
 resources/views/prototype.blade.php           |  3 ++
 routes/web.php                                |  8 +++--
 8 files changed, 103 insertions(+), 11 deletions(-)
 create mode 100644 resources/assets/js/prototype/screens/Login.vue
 create mode 100644 resources/assets/js/prototype/screens/Register.vue

diff --git a/package-lock.json b/package-lock.json
index 2116d4b5..1bef21c3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,7 +6,8 @@
         "": {
             "dependencies": {
                 "axios": "^0.26.0",
-                "vue-color": "^2.7.0"
+                "vue-color": "^2.7.0",
+                "vue-router": "3"
             },
             "devDependencies": {
                 "@vitejs/plugin-vue2": "^2.2.0",
@@ -2458,6 +2459,11 @@
                 }
             }
         },
+        "node_modules/vue-router": {
+            "version": "3.6.5",
+            "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.6.5.tgz",
+            "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ=="
+        },
         "node_modules/watchpack": {
             "version": "2.4.0",
             "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
diff --git a/package.json b/package.json
index 5bfe63e2..5b313438 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     },
     "dependencies": {
         "axios": "^0.26.0",
-        "vue-color": "^2.7.0"
+        "vue-color": "^2.7.0",
+        "vue-router": "3"
     }
 }
diff --git a/resources/assets/js/prototype/app.js b/resources/assets/js/prototype/app.js
index 86872e70..68babdc9 100644
--- a/resources/assets/js/prototype/app.js
+++ b/resources/assets/js/prototype/app.js
@@ -1,8 +1,32 @@
 import Vue from 'vue';
+import VueRouter from 'vue-router';
 
 import App from './components/App.vue';
 
-const app = new Vue({
+import Login from './screens/Login.vue';
+import Register from './screens/Register.vue';
+
+Vue.use(VueRouter);
+
+const routes = [
+    {
+        path: '/prototype/login',
+        name: 'login',
+        component: Login,
+    }, {
+        path: '/prototype/register',
+        name: 'register',
+        component: Register,
+    },
+];
+
+const router = new VueRouter({
+    mode: 'history',
+    routes,
+});
+
+new Vue({
     el: '#app',
-    render: h => h(App)
-})
+    router,
+    render: h => h(App),
+});
diff --git a/resources/assets/js/prototype/components/App.vue b/resources/assets/js/prototype/components/App.vue
index 0e4c33c9..9beff603 100644
--- a/resources/assets/js/prototype/components/App.vue
+++ b/resources/assets/js/prototype/components/App.vue
@@ -1,9 +1,7 @@
 <script setup>
-//
+
 </script>
 
 <template>
-    <div>
-        <div>Hello world</div>
-    </div>
+    <router-view></router-view>
 </template>
diff --git a/resources/assets/js/prototype/screens/Login.vue b/resources/assets/js/prototype/screens/Login.vue
new file mode 100644
index 00000000..0e5370d5
--- /dev/null
+++ b/resources/assets/js/prototype/screens/Login.vue
@@ -0,0 +1,22 @@
+<script setup>
+//
+</script>
+
+<template>
+    <div class="max-w-sm mx-auto my-12">
+        <div class="p-5 bg-white border rounded-md space-y-5">
+            <div>
+                <label class="block mb-1 text-sm text-gray-700">E-mail</label>
+                <input class="w-full px-3 py-2 text-sm border rounded-md" type="email" />
+            </div>
+            <div>
+                <label class="block mb-1 text-sm text-gray-700">Password</label>
+                <input class="w-full px-3 py-2 text-sm border rounded-md" type="password" />
+            </div>
+            <button class="w-full py-2.5 hover:bg-blue-600 transition text-sm bg-blue-500 text-white rounded-md">Log in</button>
+        </div>
+        <div class="mt-4 text-center">
+            <router-link class="text-sm" :to="{ name: 'register' }">First time here? Register.</router-link>
+        </div>
+    </div>
+</template>
diff --git a/resources/assets/js/prototype/screens/Register.vue b/resources/assets/js/prototype/screens/Register.vue
new file mode 100644
index 00000000..97d89f4f
--- /dev/null
+++ b/resources/assets/js/prototype/screens/Register.vue
@@ -0,0 +1,34 @@
+<script setup>
+//
+</script>
+
+<template>
+    <div class="max-w-sm mx-auto my-12">
+        <div class="p-5 bg-white border rounded-md space-y-5">
+            <div>
+                <label class="block mb-1 text-sm text-gray-700">Name</label>
+                <input class="w-full px-3 py-2 text-sm border rounded-md" type="text" />
+            </div>
+            <div>
+                <label class="block mb-1 text-sm text-gray-700">E-mail</label>
+                <input class="w-full px-3 py-2 text-sm border rounded-md" type="email" />
+            </div>
+            <div>
+                <label class="block mb-1 text-sm text-gray-700">Password</label>
+                <input class="w-full px-3 py-2 text-sm border rounded-md" type="password" />
+            </div>
+            <div>
+                <label class="block mb-1 text-sm text-gray-700">Verify password</label>
+                <input class="w-full px-3 py-2 text-sm border rounded-md" type="password" />
+            </div>
+            <div>
+                <label class="block mb-1 text-sm text-gray-700">Currency</label>
+                <input class="w-full px-3 py-2 text-sm border rounded-md" type="text" />
+            </div>
+            <button class="w-full py-2.5 hover:bg-blue-600 transition text-sm bg-blue-500 text-white rounded-md">Register</button>
+        </div>
+        <div class="mt-4 text-center">
+            <router-link class="text-sm" :to="{ name: 'login' }">Already using Budget? Log in.</router-link>
+        </div>
+    </div>
+</template>
diff --git a/resources/views/prototype.blade.php b/resources/views/prototype.blade.php
index eda37edf..684e2f3e 100644
--- a/resources/views/prototype.blade.php
+++ b/resources/views/prototype.blade.php
@@ -1,5 +1,8 @@
 <!DOCTYPE html>
 <html>
+    <head>
+        <script src="https://cdn.tailwindcss.com"></script>
+    </head>
     <body>
         <div id="app"></div>
         @vite('resources/assets/js/prototype/app.js')
diff --git a/routes/web.php b/routes/web.php
index 64b8a0e7..1c1893cc 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -27,8 +27,6 @@
 
 Route::get('/', [IndexController::class, 'index'])->name('index');
 
-Route::get('/prototype', \App\Http\Controllers\PrototypeController::class);
-
 Route::group(['middleware' => ['guest']], function () {
     Route::get('/login', [LoginController::class, 'index'])->name('login');
     Route::post('/login', [LoginController::class, 'store']);
@@ -133,3 +131,9 @@
 });
 
 Route::get('/logout', [LogoutController::class, 'index'])->name('logout');
+
+Route::prefix('prototype')
+    ->group(function () {
+        Route::get('/', fn () => 'Hello world');
+        Route::get('/{any}', \App\Http\Controllers\PrototypeController::class);
+    });