- added working typescript support to vue

- added bouncer support
- added UserPolicies
- added first user index call

resources/js/Layouts/LoginLayout.vue

@@ -5,3 +5,6 @@
         </div>
     </main>
 </template>
+
+<script setup lang="ts">
+</script>

resources/js/components/FlashMessages.vue

@@ -1,8 +1,8 @@
 <template>
 </template>
-<script setup>
+<script setup lang="ts">
     import { useMessage } from 'naive-ui'
-    import { watch, defineProps, onUpdated, onMounted } from 'vue'
+    import { onUpdated, onMounted } from 'vue'
 
     const message = useMessage()
     const props = defineProps(['messages'])
@@ -15,16 +15,13 @@
         displayNewMessages(props.messages)
     })
 
-    function displayNewMessages(messages) {
+    function displayNewMessages(messages: any) {
 
-        console.log(messages)
-        let output = []
+        let output: Array<Object> = []
 
         output = flattenObject(removeValidationErrors(messages))
 
-        console.log(output)
-
-        output?.forEach((item) => {
+        output?.forEach((item: any) => {
             for (let key in item) {
                 switch (key){
                     case 'error':
@@ -55,33 +52,32 @@
         })
     }   
 
-    function removeValidationErrors(input) {
-        if(input === null || !Object.hasOwn(input, "errors")) return input
+    function removeValidationErrors(input: any) {
+
+        if(input === null || !input.hasOwnProperty("errors")) return input
     
-        const { errors: _, ...output } = input
+        const { errors: _, ...output } = (input as any)
         return output
     }
 
-    function flattenObject(input) {
+    function flattenObject(input: Object) {
         if (input === null) return input
 
-        return Object.values(input).map((value) => Object.entries(value)).flat().reduce((acc, [key, value]) => {
+        return Object.values(input).map((value) => Object.entries(value)).flat().reduce((acc: Array<Object>, [key, value]) => {
             acc.push({[key]: value});
             return acc;
         }, []);
     }
 
-    function translateError(errorMsg) {
+    function translateError(errorMsg: string) {
         switch(errorMsg.split(":")[0]) {
             case 'E_INVALID_AUTH_PASSWORD':
                 return "Falsches Passwort eingegeben."
             case 'E_INVALID_AUTH_UID':
                 return "Benutzername nicht gefunden"
+            case 'E_AUTHORIZATION_FAILURE':
+                return 'Rechte unzureichend um diese Aktion auszuführen.'
         }
         return errorMsg
     }
-
-    function isEmpty(obj) {
-        return Object.keys(obj).length === 0;
-    }
 </script>

resources/js/pages/Events/Index.vue

@@ -1,15 +1,25 @@
 <template>
+    <n-message-provider>
+        <FlashMessages 
+            :messages="props.flashMessages"
+        />
+    </n-message-provider>
     <div>
         Bin in Events
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import BELayout from '@/layouts/BELayout.vue'
+import FlashMessages from '@/components/FlashMessages.vue'
 
 defineOptions({
     layout: BELayout
 })
 
+const props = defineProps({
+    flashMessages: Object
+})
+
 </script>
 

resources/js/pages/Home.vue

@@ -1,13 +1,26 @@
 <template>
+    <n-message-provider>
+        <FlashMessages 
+            :messages="props.flashMessages"
+        />
+    </n-message-provider>
     <div>
         Willkommen auf der Hauptseite
     </div>
+    <div>
+        {{ helloWorld }}
+    </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import { ref } from 'vue'
+import FlashMessages from '@/components/FlashMessages.vue'
 
-defineProps({
+const props = defineProps({
     test: String,
+    flashMessages: Object
 })
 
+const helloWorld = ref<String>("helloWorld")
+
 </script>

resources/js/pages/Login.vue

@@ -46,11 +46,12 @@
     </n-form>
 </template>
 
-<script setup>
-    import { ref, reactive, watch } from 'vue'
+<script setup lang="ts">
+    import { ref } from 'vue'
     import { router } from '@inertiajs/vue3'
+    import type { FormInst } from 'naive-ui'
     import LoginLayout from '@/layouts/LoginLayout.vue'
-    import FlashMessages from '@/components/FlashMessages'
+    import FlashMessages from '@/components/FlashMessages.vue'
 
     defineOptions({ layout: LoginLayout })
     const props = defineProps(['flashMessages'])
@@ -60,7 +61,7 @@
         password: '',
     })
 
-    const formRef = ref(null)
+    const formRef = ref<FormInst | null>(null)
 
     const rules = ref({
         username: {
@@ -75,15 +76,6 @@
         }
     })
 
-    function translateLoginError(errorMsg) {
-        switch(errorMsg.split(":")[0]) {
-            case 'E_INVALID_AUTH_PASSWORD':
-                return "Falsches Passwort eingegeben."
-            case 'E_INVALID_AUTH_UID':
-                return "Benutzername nicht gefunden"
-        }
-    }
-
     function onClickLogin(){
         formRef.value?.validate((errors) => {
             if(!errors) router.post('login', form.value)

resources/js/pages/Users/Index.vue

@@ -1,14 +1,27 @@
 <template>
+   <n-message-provider>
+        <FlashMessages 
+            :messages="props.flashMessages"
+        />
+    </n-message-provider>
  <div>
     Bin in Users
  </div>
+ <div>
+   {{ users }}
+ </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 
 import BELayout from '@/layouts/BELayout.vue'
-import MainNav from '@/components/MainNav.vue'
+import FlashMessages from '@/components/FlashMessages.vue'
 
 defineOptions({ layout: BELayout })
 
+const props = defineProps({
+   users: Object,
+   flashMessages: Object
+})
+
 </script>

resources/js/vue-shim.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+    import type { DefineComponent } from "vue"
+    const component: DefineComponent<{}, {}, any>
+    export default component
+}