Add Vite config, Footer, update alerts, Add Cardbox

userfrosting · May 25, 2024 · 2afdb01 · 2afdb01
1 parent 5f03908
commit 2afdb01
Show file tree

Hide file tree

Showing 11 changed files with 2,111 additions and 624 deletions.
diff --git a/.gitignore b/.gitignore
@@ -32,6 +32,7 @@ node_modules/
 
 # Ignore compiled assets
 public/assets/
+public/.vite
 
 # Ignore Vagrant & Homestead VM
 vagrant/Homestead/

diff --git a/app/assets/App.vue b/app/assets/App.vue
@@ -20,4 +20,11 @@ const auth = useAuthStore()
     <UFMainContent>
         <RouterView />
     </UFMainContent>
+    <UFFooterContent>
+        Copyright 2024 - <a href="https://www.userfrosting.com">Created by UserFrosting</a> | Built
+        with
+        <a href="http://getuikit.com" title="Visit UIkit 3 site" target="_blank" data-uk-tooltip
+            ><span data-uk-icon="uikit"></span
+        ></a>
+    </UFFooterContent>
 </template>
diff --git a/app/assets/components/AlertContainer.vue b/app/assets/components/AlertContainer.vue
diff --git a/app/assets/components/Auth/AuthCheck.vue b/app/assets/components/Auth/AuthCheck.vue
@@ -5,26 +5,27 @@ auth.check()
 </script>
 
 <template>
-    <h2>Auth Check</h2>
-    <div class="uk-container uk-text-center">
-        <p style="font-size: 100px">
-            <font-awesome-icon
-                class="uk-text-success"
-                v-if="auth.auth"
-                :icon="['fas', 'circle-check']" />
-            <font-awesome-icon class="uk-text-danger" v-else :icon="['fas', 'circle-xmark']" />
-        </p>
-        <p v-if="auth.auth">
-            <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="auth.check()"
-                :disabled="auth.loading">
-                Check Authentication
-            </button>
-        </p>
-    </div>
+    <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.auth"
+                    :icon="['fas', 'circle-check']" />
+                <font-awesome-icon class="uk-text-danger" v-else :icon="['fas', 'circle-xmark']" />
+            </p>
+            <p v-if="auth.auth">
+                <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="auth.check()"
+                    :disabled="auth.loading">
+                    Check Authentication
+                </button>
+            </p>
+        </div>
+    </UFCardBox>
 </template>
diff --git a/app/assets/components/Auth/AuthLogin.vue b/app/assets/components/Auth/AuthLogin.vue
@@ -1,6 +1,5 @@
 <script setup>
 import { useAuthStore } from '../../stores/auth.js'
-import Alert from '../AlertContainer.vue'
 
 const auth = useAuthStore()
 
@@ -12,36 +11,37 @@ let form = {
 </script>
 
 <template>
-    <h2>Login</h2>
-    <form class="uk-form-horizontal" uk-margin>
-        <Alert :alert="auth.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" />
+    <UFCardBox title="Login">
+        <form class="uk-form-horizontal" uk-margin>
+            <UFAlertContainer v-if="auth.error" :alert="auth.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>
-        <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>
+                <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>
-        <div class="uk-text-center">
-            <button
-                class="uk-button uk-button-primary"
-                @click="auth.login(form)"
-                :disabled="auth.loading">
-                Login
-            </button>
-        </div>
-    </form>
+            <div class="uk-text-center">
+                <button
+                    class="uk-button uk-button-primary"
+                    @click="auth.login(form)"
+                    :disabled="auth.loading">
+                    Login
+                </button>
+            </div>
+        </form>
+    </UFCardBox>
 </template>
diff --git a/app/assets/main.js b/app/assets/main.js
@@ -11,7 +11,7 @@ pinia.use(piniaPluginPersistedstate)
 app.use(pinia)
 
 /** Setup Theme */
-import '@userfrosting/theme-pink-cupcake/style.less'
+import '@userfrosting/theme-pink-cupcake/less/main.less'
 import PinkCupcake from '@userfrosting/theme-pink-cupcake'
 app.use(PinkCupcake)
 

diff --git a/app/assets/stores/auth.js b/app/assets/stores/auth.js
@@ -1,6 +1,12 @@
 // store.js
 import { defineStore } from 'pinia'
 import axios from 'axios'
+import { AlertStyle } from '@userfrosting/theme-pink-cupcake/types'
+
+// TODO : Alert shouldn't be in the store, as it will be displayed on refresh
+// TODO : Only user should be in the Pinia store. The API should be in Composable
+// TODO : Alert doesn't display HTML
+// TODO : Change to Typescript, add AlertInterface
 
 export const useAuthStore = defineStore('auth', {
     persist: true,
@@ -25,7 +31,10 @@ export const useAuthStore = defineStore('auth', {
                     this.check() // Check to make sure it worked
                 })
                 .catch((error) => {
-                    this.error = error.response.data
+                    this.error = {
+                        ...error.response.data,
+                        ...{style: AlertStyle.Danger, closeBtn: true}
+                    }
                 })
                 .finally(() => {
                     this.loading = false

diff --git a/app/templates/pages/index.html.twig b/app/templates/pages/index.html.twig
@@ -7,12 +7,16 @@
     {{ encore_entry_link_tags('app') }}
     <!-- <link rel="icon" href="favicon.ico"> -->
     <title>{{ site.title }}</title>
+    {# <link rel="stylesheet" href="./assets/main-CNEYaoRK.css"> #}
+    {# <script type="module" src="http://[::1]:3000/@vite/client"></script> #}
   </head>
   <body>
     <noscript>
       <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
     {{ encore_entry_script_tags('app') }}
+    {# <script type="module" src="http://[::1]:3000/main.js"></script> #}
+    {# <script type="module" src="./assets/main-CNFAaDZc.js"></script> #}
   </body>
 </html>