Modernize

mekanix · mekanix · commit 73eb6edce184 · 2025-01-25T14:38:18.000+01:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@freenit-framework/core",
-  "version": "0.0.49",
+  "version": "0.0.50",
   "private": false,
   "author": "Goran Mekić <meka@tilda.center>",
   "license": "BSD-2-Clause",
diff --git a/src/lib/Login.svelte b/src/lib/Login.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
   import { goto } from '$app/navigation'
   import { error } from '$lib/notification'
-  import BaseStore from '$lib/base-store'
 
   let email = $state('')
   let password = $state('')
   let { store } = $props()
 
-  const submit = async () => {
+  const submit = async (event: Event) => {
+    event.preventDefault()
     const response = await store.auth.login(email, password)
     if (!response.ok) {
       error(response.statusText)
diff --git a/src/lib/MenuItems.svelte b/src/lib/MenuItems.svelte
@@ -21,7 +21,7 @@
     <MenuItem href="/themes" {toggle} icon={mdiCookieEditOutline}>Themes</MenuItem>
   {/if}
   <MenuItem href="/profile" {toggle} icon={mdiFaceManProfile}>Profile</MenuItem>
-  <MenuItem href="/logout" toggle={logout} icon={mdiLogoutVariant}>Logout</MenuItem>
+  <MenuItem href="/" toggle={logout} icon={mdiLogoutVariant}>Logout</MenuItem>
 {:else}
   <MenuItem href="/register" {toggle} icon={mdiArrowDownBoldCircleOutline}>Register</MenuItem>
   <MenuItem href="/verify" {toggle} icon={mdiStamper}>Verify</MenuItem>
diff --git a/src/lib/Modal.svelte b/src/lib/Modal.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-  export let open = false
+  let { children, open } = $props()
 </script>
 
 {#if open}
   <div class="modal_background">
     <div class="modal">
-      <slot />
+      {@render children?.()}
     </div>
   </div>
 {/if}
diff --git a/src/lib/Profile.svelte b/src/lib/Profile.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+
+  let { store } = $props()
+
+  onMount(async () => {
+    store.user.fetchProfile()
+  })
+</script>
+
+<div class="root">
+  <div>ID: {store.user.profile.id || store.user.profile.dn}</div>
+  <div>Email: {store.user.profile.email}</div>
+  <div>Active: {store.user.profile.active || store.user.profile.userClass == 'enabled' ? 'yes' : 'no'}</div>
+  <div>Admin: {store.user.profile.admin ? 'yes' : 'no'}</div>
+</div>
+
+<style>
+  .root {
+    height: 100vh;
+  }
+</style>
diff --git a/src/lib/Role.svelte b/src/lib/Role.svelte
@@ -8,7 +8,10 @@
 
   onMount(async () => {
     loading = true
-    const [roleResponse, userResponse] = await Promise.all([store.role.fetch(pk), store.user.fetchAll()])
+    const [roleResponse, userResponse] = await Promise.all([
+      store.role.fetch(pk),
+      store.user.fetchAll(),
+    ])
     if (!roleResponse.ok) {
       error(roleResponse.statusText)
     }
@@ -35,9 +38,15 @@
   const toggleMembership = (user: any) => async (event: any) => {
     let response
     if (event.target.checked) {
-      response = await store.role.assign(store.role.detail.id || store.role.detail.dn, user.id || user.dn)
+      response = await store.role.assign(
+        store.role.detail.id || store.role.detail.dn,
+        user.id || user.dn,
+      )
     } else {
-      response = await store.role.deassign(store.role.detail.id || store.role.detail.dn, user.id || user.dn)
+      response = await store.role.deassign(
+        store.role.detail.id || store.role.detail.dn,
+        user.id || user.dn,
+      )
     }
     if (!response.ok) {
       error(response.statusText)
@@ -94,10 +103,14 @@
     </div>
   </div>
   <div class="actions">
-    <button class="button" disabled={store.user.list.page === 1} onclick={fetchPrevious}>&lt;</button>
+    <button class="button" disabled={store.user.list.page === 1} onclick={fetchPrevious}
+      >&lt;</button
+    >
     {store.user.list.page}
-    <button class="button" disabled={store.user.list.page === store.user.list.pages} onclick={fetchNext}
-      >&gt;</button
+    <button
+      class="button"
+      disabled={store.user.list.total === 0 || store.user.list.page === store.user.list.pages}
+      onclick={fetchNext}>&gt;</button
     >
   </div>
 {/if}
@@ -139,4 +152,3 @@
     margin-right: 10px;
   }
 </style>
-
diff --git a/src/lib/Spinner.svelte b/src/lib/Spinner.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  export let size = 50
+  let { size = 50 } = $props()
 </script>
 
 <div class="root">
diff --git a/src/lib/User.svelte b/src/lib/User.svelte
@@ -8,7 +8,10 @@
 
   onMount(async () => {
     loading = true
-    const [userResponse, roleResponse] = await Promise.all([store.user.fetch(pk), store.role.fetchAll()])
+    const [userResponse, roleResponse] = await Promise.all([
+      store.user.fetch(pk),
+      store.role.fetchAll(),
+    ])
     if (!userResponse.ok) {
       error(userResponse.statusText)
     }
@@ -26,9 +29,15 @@
   const toggleMembership = (role: any) => async (event: any) => {
     let response
     if (event.target.checked) {
-      response = await store.role.assign(role.id || role.dn, store.user.detail.id || store.user.detail.dn)
+      response = await store.role.assign(
+        role.id || role.dn,
+        store.user.detail.id || store.user.detail.dn,
+      )
     } else {
-      response = await store.role.deassign(role.id || role.dn, store.user.detail.id || store.user.detail.dn)
+      response = await store.role.deassign(
+        role.id || role.dn,
+        store.user.detail.id || store.user.detail.dn,
+      )
     }
     if (!response.ok) {
       error(response.statusText)
@@ -71,10 +80,14 @@
     </div>
   </div>
   <div class="actions">
-    <button class="button" disabled={store.role.list.page === 1} onclick={fetchPrevious}>&lt;</button>
+    <button class="button" disabled={store.role.list.page === 1} onclick={fetchPrevious}
+      >&lt;</button
+    >
     {store.role.list.page}
-    <button class="button" disabled={store.role.list.page === store.role.list.pages} onclick={fetchNext}
-      >&gt;</button
+    <button
+      class="button"
+      disabled={store.role.list.total === 0 || store.role.list.page === store.role.list.pages}
+      onclick={fetchNext}>&gt;</button
     >
   </div>
 {/if}
@@ -116,4 +129,3 @@
     margin-right: 10px;
   }
 </style>
-
diff --git a/src/lib/index.ts b/src/lib/index.ts
@@ -1,9 +1,10 @@
 export { default as LeftPane } from './LeftPane.svelte'
+export { default as Login } from './Login.svelte'
 export { default as MenuBar } from './MenuBar.svelte'
 export { default as MenuItem } from './MenuItem.svelte'
 export { default as MenuItems } from './MenuItems.svelte'
-export { default as Login } from './Login.svelte'
 export { default as Modal } from './Modal.svelte'
+export { default as Profile } from './Profile.svelte'
 export { default as Register } from './Register.svelte'
 export { default as Role } from './Role.svelte'
 export { default as Roles } from './Roles.svelte'
diff --git a/src/routes/logout/+page.svelte b/src/routes/logout/+page.svelte
diff --git a/src/routes/profile/+page.svelte b/src/routes/profile/+page.svelte
@@ -1,19 +1,6 @@
 <script lang="ts">
-  import { onMount } from 'svelte'
-  import { error } from '$lib/notification'
+  import Profile from '$lib/Profile.svelte'
   import store from '$lib/store'
-
-  onMount(async () => {
-    const response = await store.user.fetchProfile()
-    if (!response.ok) {
-      error(response.statusText)
-    }
-  })
 </script>
 
-<div>
-  <div>ID: {store.user.profile.id || store.user.profile.dn}</div>
-  <div>Email: {store.user.profile.email}</div>
-  <div>Active: {store.user.profile.active || store.user.profile.userClass == 'enabled' ? 'yes' : 'no'}</div>
-  <div>Admin: {store.user.profile.admin ? 'yes' : 'no'}</div>
-</div>
+<Profile store={store} />
diff --git a/src/routes/roles/[pk]/+page.svelte b/src/routes/roles/[pk]/+page.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
   import Role from '$lib/Role.svelte'
-  import { page } from '$app/stores'
   import store from '$lib/store'
+
+  let { data: props } = $props()
 </script>
 
-<Role pk={$page.params.id} store={store} />
+<Role pk={props.pk} store={store} />
diff --git a/src/routes/roles/[pk]/+page.ts b/src/routes/roles/[pk]/+page.ts
@@ -0,0 +1,5 @@
+export const load = ({ params }) => {
+  return {
+    pk: params.pk
+  }
+}
diff --git a/src/routes/themes/[name]/+page.svelte b/src/routes/themes/[name]/+page.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
   import Theme from '$lib/Theme.svelte'
-  import { page } from '$app/stores'
   import store from '$lib/store'
+
+  let { data: props } = $props()
 </script>
 
-<Theme name={$page.params.name} store={store} />
+<Theme name={props.name} store={store} />
diff --git a/src/routes/themes/[name]/+page.ts b/src/routes/themes/[name]/+page.ts
@@ -0,0 +1,5 @@
+export const load = ({ params }) => {
+  return {
+    name: params.name
+  }
+}
diff --git a/src/routes/users/[pk]/+page.svelte b/src/routes/users/[pk]/+page.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
   import User from '$lib/User.svelte'
-  import { page } from '$app/stores'
   import store from '$lib/store'
+
+  let { data: props } = $props()
 </script>
 
-<User pk={$page.params.id} store={store} />
+<User pk={props.pk} store={store} />
diff --git a/src/routes/users/[pk]/+page.ts b/src/routes/users/[pk]/+page.ts
@@ -0,0 +1,5 @@
+export const load = ({ params }) => {
+  return {
+    pk: params.pk
+  }
+}
diff --git a/src/routes/verify/[token]/+page.svelte b/src/routes/verify/[token]/+page.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
   import { onMount } from 'svelte'
-  import { page } from '$app/stores'
   import { goto } from '$app/navigation'
   import store from '$lib/store'
 
+  let { data: props } = $props()
+
   onMount(async () => {
-    const response = await store.auth.verify($page.params.token)
+    const response = await store.auth.verify(props.token)
     if (response.ok) {
       goto('/login')
     }
diff --git a/src/routes/verify/[token]/+page.ts b/src/routes/verify/[token]/+page.ts
@@ -0,0 +1,5 @@
+export const load = ({ params }) => {
+  return {
+    token: params.token
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@freenit-framework/core",`
`3`		`- "version": "0.0.49",`
	`3`	`+ "version": "0.0.50",`
`4`	`4`	`"private": false,`
`5`	`5`	`"author": "Goran Mekić <meka@tilda.center>",`
`6`	`6`	`"license": "BSD-2-Clause",`