feat: add init message on main page if no Users in DB

Signed-off-by: Robert Goniszewski <robertgoniszewski@outlook.com>
goniszewski · Jan 13, 2024 · 137af3d · 137af3d
1 parent 35b5dfc
commit 137af3d
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 10 deletions.
diff --git a/src/app.d.ts b/src/app.d.ts
@@ -13,6 +13,7 @@ declare global {
 			tags: import('$lib/types/dto/Tag.dto').TagWithBookmarks[];
 			bookmarksForIndex: import('$lib/types/Bookmark.type').Bookmark[];
 			bookmarksCount: number;
+			noUsersFound: boolean;
 			page: number;
 			limit: number;
 		}

diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
@@ -8,7 +8,7 @@ import { getFileUrl } from '$lib/utils';
 import { searchIndexKeys } from '$lib/utils/search';
 
 import type { TagWithBookmarks } from '$lib/types/dto/Tag.dto';
-import type { Bookmark } from '$lib/types/Bookmark.type';
+
 function tagWithBookmarkIds(bookmarks: BookmarkDto[], tags: Tag[]): TagWithBookmarks[] {
 	return tags.map((tag) => {
 		const tagBookmarks = bookmarks.reduce((acc, bookmark) => {
@@ -26,11 +26,19 @@ function tagWithBookmarkIds(bookmarks: BookmarkDto[], tags: Tag[]): TagWithBookm
 }
 
 export const load = (async ({ locals, url }) => {
+	const noUsersFound = await locals.pb
+		.collection('users')
+		.getList(1, 1, {
+			count: true
+		})
+		.then((res) => res.totalItems === 0);
+
 	if (!locals.user) {
 		return {
 			bookmarks: [] as BookmarkDto[],
 			categories: [] as Category[],
 			tags: [] as TagWithBookmarks[],
+			noUsersFound,
 			status: 401
 		};
 	}

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -2,25 +2,26 @@
 	import AddBookmarkButton from '$lib/components/AddBookmarkButton/AddBookmarkButton.svelte';
 	import BookmarkList from '$lib/components/BookmarksList/BookmarkList.svelte';
 
+	import { applyAction, enhance } from '$app/forms';
 	import { page } from '$app/stores';
+	import Pagination from '$lib/components/Pagination/Pagination.svelte';
+	import { user } from '$lib/pb';
+	import { searchEngine, searchedValue } from '$lib/stores/search.store';
+	import { userSettingsStore } from '$lib/stores/user-settings.store';
 	import type { Bookmark } from '$lib/types/Bookmark.type';
+	import type { UserSettings } from '$lib/types/UserSettings.type';
+	import { initializeSearch } from '$lib/utils/search';
+	import { sortBookmarks } from '$lib/utils/sort-bookmarks';
 	import {
 		IconLayout2,
 		IconListDetails,
 		IconSortAscending,
 		IconSortDescending
 	} from '@tabler/icons-svelte';
+	import _ from 'lodash';
 	import Select from 'svelte-select';
-	import { sortBookmarks } from '$lib/utils/sort-bookmarks';
-	import { user } from '$lib/pb';
-	import { searchEngine, searchedValue } from '$lib/stores/search.store';
-	import { initializeSearch, searchFactory } from '$lib/utils/search';
-	import Pagination from '$lib/components/Pagination/Pagination.svelte';
-	import { userSettingsStore } from '$lib/stores/user-settings.store';
-	import { applyAction, enhance } from '$app/forms';
-	import type { UserSettings } from '$lib/types/UserSettings.type';
 	import { writable } from 'svelte/store';
-	import _ from 'lodash';
+	import { PUBLIC_SIGNUP_DISABLED } from '$env/static/public';
 
 	const sortByOptions = [
 		{ label: 'added (desc)', value: 'created_desc' },
@@ -180,6 +181,31 @@
 		items={$page.data.bookmarksCount}
 		position="right"
 	/>
+{:else if $page.data.noUsersFound}
+	<div class="flex flex-col items-center justify-center h-full">
+		<h1 class="text-2xl">Initialization Wizard 🧙</h1>
+		<div class="max-w-2xl flex flex-col text-center my-4 gap-2">
+			<p class="text-lg">Looks like you're about to start using Grimoire for the first time!</p>
+			{#if PUBLIC_SIGNUP_DISABLED === 'true'}
+				<p class="text-lg">
+					Please enable public signup in your <code>.env</code> file and
+					<strong><a href="/signup" class="link">create your first User</a></strong> to start using Grimoire.
+				</p>
+			{:else}
+				<p class="text-lg">
+					Please <strong><a href="/signup" class="link">create your first User</a></strong> or check
+					out the
+					<strong><a href="/admin/login" class="link">Admin Panel</a></strong> (use the credentials
+					you set in your
+					<code>.env</code> file).
+				</p>
+			{/if}
+			<p class="mt-4">
+				To learn about differences between Admin and User accounts, please check out
+				<a href="https://grimoire.pro/docs/admins-vs-users" class="link">this page</a>.
+			</p>
+		</div>
+	</div>
 {:else}
 	<div class="flex flex-col items-center justify-center h-full">
 		<h1 class="text-2xl">Grimoire welcomes!</h1>