From 5a83254bdc17349aebdc9f7b2194acb47712c62a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dani=C3=ABl=20van=20Drunen?= <daniel@pixely.me>
Date: Sat, 7 Sep 2024 22:45:51 +0200
Subject: [PATCH] Support registering through SPA prototype

---
 .../Controllers/Api/CurrencyController.php    | 16 ++++
 .../Controllers/Api/RegisterController.php    | 50 ++++++++++
 app/Http/Resources/CurrencyResource.php       | 19 ++++
 resources/assets/js/prototype/app.js          |  5 +
 .../assets/js/prototype/screens/Login.vue     |  4 +-
 .../assets/js/prototype/screens/Register.vue  | 96 +++++++++++++++++++
 .../assets/js/prototype/translations/en.json  |  4 +
 routes/api.php                                |  5 +
 8 files changed, 198 insertions(+), 1 deletion(-)
 create mode 100644 app/Http/Controllers/Api/CurrencyController.php
 create mode 100644 app/Http/Controllers/Api/RegisterController.php
 create mode 100644 app/Http/Resources/CurrencyResource.php
 create mode 100644 resources/assets/js/prototype/screens/Register.vue

diff --git a/app/Http/Controllers/Api/CurrencyController.php b/app/Http/Controllers/Api/CurrencyController.php
new file mode 100644
index 00000000..4976db78
--- /dev/null
+++ b/app/Http/Controllers/Api/CurrencyController.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller;
+use App\Http\Resources\CurrencyResource;
+use App\Models\Currency;
+use Illuminate\Http\Request;
+
+class CurrencyController extends Controller
+{
+    public function index()
+    {
+        return CurrencyResource::collection(Currency::all());
+    }
+}
diff --git a/app/Http/Controllers/Api/RegisterController.php b/app/Http/Controllers/Api/RegisterController.php
new file mode 100644
index 00000000..6e08ec69
--- /dev/null
+++ b/app/Http/Controllers/Api/RegisterController.php
@@ -0,0 +1,50 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Actions\SendVerificationMailAction;
+use App\Http\Controllers\Controller;
+use App\Models\Space;
+use App\Models\User;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Support\Str;
+
+class RegisterController extends Controller
+{
+    public function __invoke(Request $request)
+    {
+        if (config('app.disable_registration')) {
+            abort(404);
+        }
+
+        $request->validate([
+            'name' => ['required'],
+            'email' => ['required', 'email', 'unique:users'],
+            'password' => ['required', 'confirmed'],
+            'currency' => ['required', 'exists:currencies,id'],
+        ]);
+
+        $user = User::query()
+            ->create([
+                'name' => $request->input('name'),
+                'email' => $request->input('email'),
+                'password' => Hash::make($request->input('password')),
+                'verification_token' => Str::random(100),
+            ]);
+
+        $space = Space::query()
+            ->create([
+                'currency_id' => $request->input('currency'),
+                'name' => $user->name . '\'s Space',
+            ]);
+
+        $user->spaces()->attach($space->id, ['role' => 'admin']);
+
+        (new SendVerificationMailAction())->execute($user->id);
+
+        return [
+            'success' => true,
+        ];
+    }
+}
diff --git a/app/Http/Resources/CurrencyResource.php b/app/Http/Resources/CurrencyResource.php
new file mode 100644
index 00000000..ca800ebc
--- /dev/null
+++ b/app/Http/Resources/CurrencyResource.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class CurrencyResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => $this->id,
+            'name' => $this->name,
+            'symbol' => $this->symbol,
+            'iso' => $this->iso,
+        ];
+    }
+}
diff --git a/resources/assets/js/prototype/app.js b/resources/assets/js/prototype/app.js
index c336c189..4405fdba 100644
--- a/resources/assets/js/prototype/app.js
+++ b/resources/assets/js/prototype/app.js
@@ -8,6 +8,7 @@ import translations from './translations';
 import App from './components/App.vue';
 
 import Login from './screens/Login.vue';
+import Register from './screens/Register.vue';
 import Dashboard from './screens/Dashboard.vue';
 import TransactionsIndex from './screens/Transactions/Index.vue';
 import TransactionsCreate from './screens/Transactions/Create.vue';
@@ -27,6 +28,10 @@ const routes = [
         path: '/prototype/login',
         name: 'login',
         component: Login,
+    }, {
+        path: '/prototype/register',
+        name: 'register',
+        component: Register,
     }, {
         path: '/prototype/dashboard',
         name: 'dashboard',
diff --git a/resources/assets/js/prototype/screens/Login.vue b/resources/assets/js/prototype/screens/Login.vue
index 45bf9a50..80986a5c 100644
--- a/resources/assets/js/prototype/screens/Login.vue
+++ b/resources/assets/js/prototype/screens/Login.vue
@@ -69,7 +69,9 @@ watch(showError, value => {
                     </div>
                 </button>
             </div>
-            <div class="mt-5 text-sm text-center dark:text-white">{{ versionNumber }}</div>
+            <div class="mt-4 text-sm text-center">
+                <router-link class="text-gray-500 dark:text-white" :to="{ name: 'register' }">First time here? Register.</router-link>
+            </div>
         </div>
         <div v-if="showError" class="absolute top-0 left-0 right-0 flex">
             <div class="mt-10 mx-auto py-3 px-5 flex bg-white border border-gray-200 rounded-lg shadow-sm">
diff --git a/resources/assets/js/prototype/screens/Register.vue b/resources/assets/js/prototype/screens/Register.vue
new file mode 100644
index 00000000..6e0eca41
--- /dev/null
+++ b/resources/assets/js/prototype/screens/Register.vue
@@ -0,0 +1,96 @@
+<script setup>
+import axios from 'axios';
+import { Loader2 } from 'lucide-vue';
+import { getCurrentInstance, ref } from 'vue';
+
+const router = getCurrentInstance().proxy.$router;
+
+const isBusy = ref(false);
+const errors = ref({});
+const name = ref('');
+const email = ref('');
+const password = ref('');
+const repeatedPassword = ref('');
+const currencies = ref([]);
+const currency = ref(1);
+
+const fetchCurrencies = () => {
+    axios
+        .get('/api/currencies')
+        .then(response => {
+            currencies.value = response.data;
+        });
+};
+
+const register = () => {
+    isBusy.value = true;
+
+    axios
+        .post('/api/register', { name: name.value, email: email.value, password: password.value, password_confirmation: repeatedPassword.value, currency: currency.value })
+        .then(response => {
+            const json = response.data;
+
+            if (json.success) {
+                router.push({ name: 'login' });
+            }
+        })
+        .catch(error => {
+            isBusy.value = false;
+            password.value = '';
+            repeatedPassword.value = '';
+
+            if (error.response && error.response.data) {
+                const json = error.response.data;
+
+                if (json.errors) {
+                    errors.value = json.errors;
+                }
+            }
+        });
+};
+
+fetchCurrencies();
+</script>
+
+<template>
+    <div class="flex items-center justify-center min-h-screen">
+        <div class="flex-1 max-w-sm">
+            <div class="p-5 space-y-5 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
+                <div>
+                    <label class="block mb-2 text-sm dark:text-white">{{ $t('name') }}</label>
+                    <input class="w-full px-3.5 py-2.5 text-sm dark:text-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg" type="text" v-model="name" @keyup.enter="register" />
+                    <div v-if="errors.name" class="mt-1.5 text-sm text-red-500">{{ errors.name[0] }}</div>
+                </div>
+                <div>
+                    <label class="block mb-2 text-sm dark:text-white">{{ $t('email') }}</label>
+                    <input class="w-full px-3.5 py-2.5 text-sm dark:text-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg" type="email" v-model="email" @keyup.enter="register" />
+                    <div v-if="errors.email" class="mt-1.5 text-sm text-red-500">{{ errors.email[0] }}</div>
+                </div>
+                <div>
+                    <label class="block mb-2 text-sm dark:text-white">{{ $t('password') }}</label>
+                    <input class="w-full px-3.5 py-2.5 text-sm dark:text-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg" type="password" v-model="password" @keyup.enter="register" />
+                    <div v-if="errors.password" class="mt-1.5 text-sm text-red-500">{{ errors.password[0] }}</div>
+                </div>
+                <div>
+                    <label class="block mb-2 text-sm dark:text-white">{{ $t('repeatPassword') }}</label>
+                    <input class="w-full px-3.5 py-2.5 text-sm dark:text-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg" type="password" v-model="repeatedPassword" @keyup.enter="register" />
+                </div>
+                <div>
+                    <label class="block mb-2 text-sm dark:text-white">{{ $t('currency') }}</label>
+                    <select class="w-full px-3.5 py-2.5 text-sm dark:text-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg appearance-none" v-model="currency">
+                        <option v-for="currency in currencies" :value="currency.id">{{ currency.name }} (<span v-html="currency.symbol"></span>)</option>
+                    </select>
+                </div>
+                <button class="w-full py-3 text-sm text-white bg-gray-900 dark:bg-gray-950 rounded-lg" @click="register">
+                    <span v-if="!isBusy">{{ $t('register') }}</span>
+                    <div v-if="isBusy" class="flex justify-center h-5">
+                        <Loader2 class="animate-spin" :size="18" :strokeWidth="2.4" />
+                    </div>
+                </button>
+            </div>
+            <div class="mt-4 text-sm text-center">
+                <router-link class="text-gray-500 dark:text-white" :to="{ name: 'login' }">Already using Budget? Log in.</router-link>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/resources/assets/js/prototype/translations/en.json b/resources/assets/js/prototype/translations/en.json
index 472d9d74..0e4a4a17 100644
--- a/resources/assets/js/prototype/translations/en.json
+++ b/resources/assets/js/prototype/translations/en.json
@@ -1,6 +1,7 @@
 {
     "amount": "Amount",
     "create": "Create",
+    "currency": "Currency",
     "dailyBalanceGraphDescription": "Here is your balance throughout the month",
     "dashboard": "Dashboard",
     "date": "Date",
@@ -13,8 +14,11 @@
     "goodMorning": "Good morning",
     "language": "Language",
     "logIn": "Log in",
+    "name": "Name",
     "password": "Password",
     "recurringDescription": "This is a recurring transaction—create it for me in the future",
+    "register": "Register",
+    "repeatPassword": "Repeat password",
     "spending": "Spending",
     "spendingDescriptionPlaceholder": "Birthday present for Angela",
     "tag": "Tag",
diff --git a/routes/api.php b/routes/api.php
index 337fefbc..ab199e7d 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -1,15 +1,20 @@
 <?php
 
 use App\Http\Controllers\Api\ActivitiesController;
+use App\Http\Controllers\Api\CurrencyController;
 use App\Http\Controllers\Api\DashboardController;
 use App\Http\Controllers\Api\LogInController;
 use App\Http\Controllers\Api\RecurringController;
+use App\Http\Controllers\Api\RegisterController;
 use App\Http\Controllers\Api\SettingsController;
 use App\Http\Controllers\Api\TagController;
 use App\Http\Controllers\Api\TransactionController;
 use Illuminate\Support\Facades\Route;
 
+Route::get('/currencies', [CurrencyController::class, 'index']);
+
 Route::post('/log-in', LogInController::class);
+Route::post('/register', RegisterController::class);
 
 Route::middleware('resolve-api-key')
     ->group(function () {