Add Sprinkle-Account

app/assets/components/Auth/AuthCheck.vue

@@ -0,0 +1,35 @@
+<script setup>
+import { useAuthStore } from '@userfrosting/sprinkle-account/stores'
+import { useCheckApi } from '@userfrosting/sprinkle-account/api'
+
+const auth = useAuthStore()
+
+// Login API variables
+const { loading, check } = useCheckApi(auth)
+check()
+</script>
+
+<template>
+    <UFCardBox title="Auth Check">
+        <div class="uk-container uk-text-center">
+            <p style="font-size: 100px">
+                <font-awesome-icon
+                    class="uk-text-success"
+                    v-if="auth.isAuthenticated"
+                    :icon="['fas', 'circle-check']" />
+                <font-awesome-icon class="uk-text-danger" v-else :icon="['fas', 'circle-xmark']" />
+            </p>
+            <p v-if="auth.isAuthenticated">
+                <img :src="auth.user.avatar" class="uk-margin-right" width="50" height="50" />
+                <span class="uk-text-middle">
+                    <strong>Username:</strong> {{ auth.user.user_name }}
+                </span>
+            </p>
+            <p>
+                <button class="uk-button uk-button-primary" @click="check()" :disabled="loading">
+                    Check Authentication
+                </button>
+            </p>
+        </div>
+    </UFCardBox>
+</template>

app/assets/components/Auth/AuthLogin.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { useLoginApi } from '@userfrosting/sprinkle-account/api'
+import { useAuthStore } from '@userfrosting/sprinkle-account/stores'
+import type { LoginForm } from '@userfrosting/sprinkle-account/types'
+
+// Form variables
+let form: LoginForm = {
+    user_name: '',
+    password: ''
+}
+
+// Login API variables
+const auth = useAuthStore()
+const { loading, error, login } = useLoginApi(auth)
+</script>
+
+<template>
+    <UFCardBox title="Login">
+        <form class="uk-form-horizontal" uk-margin>
+            <UFAlertContainer v-if="error" :alert="error" />
+            <div>
+                <label class="uk-form-label" for="form-horizontal-username">Username</label>
+                <div class="uk-form-controls">
+                    <input
+                        class="uk-input"
+                        id="form-horizontal-username"
+                        type="text"
+                        v-model="form.user_name" />
+                </div>
+            </div>
+            <div>
+                <label class="uk-form-label" for="form-horizontal-password">Password</label>
+                <div class="uk-form-controls">
+                    <input
+                        class="uk-input"
+                        id="form-horizontal-password"
+                        type="password"
+                        v-model="form.password" />
+                </div>
+            </div>
+            <div class="uk-text-center">
+                <font-awesome-icon icon="fa-solid fa-spinner" spin v-if="loading" />
+                <button
+                    class="uk-button uk-button-primary"
+                    @click="login(form)"
+                    :disabled="loading">
+                    Login
+                </button>
+            </div>
+        </form>
+    </UFCardBox>
+</template>

app/assets/components/Auth/AuthLogout.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { useLogoutApi } from '@userfrosting/sprinkle-account/api'
+import { useAuthStore } from '@userfrosting/sprinkle-account/stores'
+
+// Logout API variables
+const auth = useAuthStore()
+const { loading, logout } = useLogoutApi(auth)
+</script>
+
+<template>
+    <div class="uk-margin uk-text-center">
+        <button class="uk-button uk-button-default" @click="logout()" :disabled="loading">
+            Logout
+        </button>
+    </div>
+</template>

app/assets/components/NavBar.vue

@@ -2,5 +2,6 @@
     <UFNavBar title="Userfrosting">
         <UFNavBarItem :to="{ name: 'home' }" label="Home" />
         <UFNavBarItem :to="{ name: 'about' }" label="About" />
+        <UFNavBarItem :to="{ name: 'auth' }" label="Auth" />
     </UFNavBar>
 </template>

app/assets/router/index.js

@@ -17,6 +17,11 @@ const router = createRouter({
                     path: '/about',
                     name: 'about',
                     component: () => import('../views/AboutView.vue')
+                },
+                {
+                    path: '/auth',
+                    name: 'auth',
+                    component: () => import('../views/AuthView.vue')
                 }
             ]
         }

app/assets/views/AuthView.vue

@@ -0,0 +1,22 @@
+<script setup>
+import AuthCheck from '../components/Auth/AuthCheck.vue'
+import Login from '../components/Auth/AuthLogin.vue'
+import Logout from '../components/Auth/AuthLogout.vue'
+import { useAuthStore } from '@userfrosting/sprinkle-account/stores'
+const auth = useAuthStore()
+</script>
+
+<template>
+    <h1 class="uk-heading-divider">Authentication Test</h1>
+    <div class="uk-grid-divider uk-child-width-expand@s" uk-grid>
+        <div v-if="auth.isAuthenticated">
+            <Logout />
+        </div>
+        <div v-else>
+            <Login />
+        </div>
+        <div>
+            <AuthCheck />
+        </div>
+    </div>
+</template>

app/config/default.php

@@ -0,0 +1,17 @@
+<?php
+
+declare(strict_types=1);
+
+/*
+ * UserFrosting (http://www.userfrosting.com)
+ *
+ * @link      https://github.com/userfrosting/UserFrosting
+ * @copyright Copyright (c) 2013-2024 Alexander Weissman & Louis Charette
+ * @license   https://github.com/userfrosting/UserFrosting/blob/master/LICENSE.md (MIT License)
+ */
+
+return [
+    'csrf' => [
+        'enabled' => false,
+    ],
+];

app/src/MyApp.php

@@ -11,6 +11,7 @@
 namespace UserFrosting\App;
 
 use UserFrosting\App\Bakery\HelloCommand;
+use UserFrosting\Sprinkle\Account\Account;
 // use UserFrosting\Sprinkle\Account\Account;
 // use UserFrosting\Sprinkle\Admin\Admin;
 use UserFrosting\Sprinkle\BakeryRecipe;
@@ -66,7 +67,7 @@ public function getSprinkles(): array
     {
         return [
             Core::class,
-            // Account::class,
+            Account::class,
             // Admin::class,
             // AdminLTE::class,
         ];

composer.json

@@ -24,7 +24,8 @@
         "php": "^8.1",
         "ext-gd": "*",
         "userfrosting/framework": "~6.0.0@dev",
-        "userfrosting/sprinkle-core": "~6.0.0@dev"
+        "userfrosting/sprinkle-core": "~6.0.0@dev",
+        "userfrosting/sprinkle-account": "~6.0.0@dev"
     },
     "require-dev": {
         "friendsofphp/php-cs-fixer": "^3.0",