Show currencies on register page

Author: range-of-motion

app/Http/Controllers/Api/CurrencyController.php

@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller;
+use App\Http\Resources\CurrencyResource;
+use App\Models\Currency;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\AnonymousResourceCollection;
+
+class CurrencyController extends Controller
+{
+    public function __invoke(): AnonymousResourceCollection
+    {
+        return CurrencyResource::collection(Currency::all());
+    }
+}

app/Http/Resources/CurrencyResource.php

@@ -0,0 +1,18 @@
+<?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,
+        ];
+    }
+}

app/Providers/AppServiceProvider.php

@@ -4,6 +4,7 @@
 
 use App\Helper;
 use App\Models\Space;
+use Illuminate\Http\Resources\Json\JsonResource;
 use Illuminate\Support\ServiceProvider;
 use Auth;
 
@@ -26,6 +27,8 @@ public function boot()
                 'versionNumber' => $versionNumber
             ]);
         });
+
+        JsonResource::withoutWrapping();
     }
 
     public function register()

resources/assets/js/prototype/screens/Register.vue

@@ -1,5 +1,18 @@
 <script setup>
-//
+import axios from 'axios';
+import { onMounted, ref } from 'vue';
+
+const currencies = ref([]);
+
+const fetchCurrencies = () => {
+    axios
+        .get('http://localhost:8000/api/currencies')
+        .then(response => currencies.value = response.data);
+};
+
+onMounted(() => {
+    fetchCurrencies();
+});
 </script>
 
 <template>
@@ -23,7 +36,11 @@
             </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" />
+                <select class="w-full px-3 py-2 text-sm border rounded-md appearance-none">
+                    <option v-for="currency in currencies">
+                        <span v-html="currency.name + ' (' + currency.symbol + ')'"></span>
+                    </option>
+                </select>
             </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>

routes/api.php

@@ -2,4 +2,4 @@
 
 use Illuminate\Http\Request;
 
-//
+Route::get('/currencies', \App\Http\Controllers\Api\CurrencyController::class);