@aerogel/plugin-solid 0.0.1-next.0d1cf82f9dfbe1d3e7ec5644f85f97a43c8c2334

package/src/components/AGSolidStatus.vue

@@ -0,0 +1,68 @@
+<template>
+    <div>
+        <slot v-if="$solid.loginStale" name="login-stale">
+            <AGMarkdown :text="$td('solid.loginStale', 'This is taking too long...')" />
+        </slot>
+
+        <slot v-if="$solid.loginOngoing" name="login-ongoing">
+            <AGMarkdown :text="$td('ui.loading', 'Loading...')" />
+        </slot>
+
+        <slot v-else-if="$solid.isLoggedIn()" name="logged-in" :session="$solid.session">
+            <div class="flex flex-col gap-3">
+                <AGMarkdown
+                    :text="
+                        $td('solid.loggedIn', 'You are logged in as [{userName}]({userWebId})', {
+                            userName: $solid.user.name ?? $solid.user.webId,
+                            userWebId: $solid.user.webId,
+                        })
+                    "
+                />
+                <AGButton @click="$solid.logout()">
+                    {{ $td('solid.logout', 'Logout') }}
+                </AGButton>
+            </div>
+        </slot>
+
+        <slot v-else name="logged-out">
+            <div class="flex flex-col">
+                <AGForm :form="form" class="flex" @submit="$solid.login(form.url)">
+                    <AGInput
+                        name="url"
+                        :aria-label="$td('solid.url', 'Login url')"
+                        :placeholder="$td('solid.placeholder', 'https://...')"
+                    />
+                    <AGButton v-if="showDevLogin" submit @click="form.url = 'dev'">
+                        {{ $td('solid.devLogin', 'Dev login') }}
+                    </AGButton>
+                    <AGButton v-else submit>
+                        {{ $td('solid.login', 'Login') }}
+                    </AGButton>
+                </AGForm>
+                <AGButton v-if="$solid.wasLoggedIn()" class="mt-3" @click="$solid.reconnect({ force: true })">
+                    {{ $td('solid.reconnect', 'Reconnect') }}
+                </AGButton>
+                <p
+                    v-if="$solid.previousSession?.error || $solid.loginStartupError"
+                    class="mt-1 self-center text-sm text-red-800"
+                >
+                    <AGMarkdown :text="$td('solid.previousLoginError', 'Previous login attempt failed')" inline />
+                    <AGLink @click="$errors.inspect($solid.previousSession?.error || $solid.loginStartupError)">
+                        ({{ $td('errors.viewDetails', 'View details') }})
+                    </AGLink>
+                </p>
+            </div>
+        </slot>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { AGButton, AGForm, AGInput, AGLink, AGMarkdown, requiredStringInput, useForm } from '@aerogel/core';
+import { isDevelopment } from '@noeldemartin/utils';
+import { computed } from 'vue';
+
+const form = useForm({ url: requiredStringInput() });
+const showDevLogin = computed(
+    () => isDevelopment() && (!form.url || form.url === 'dev' || form.url.trim().length === 0),
+);
+</script>

package/src/components/AGSolidUserAvatar.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="relative flex items-center justify-center rounded-full bg-gray-200">
+        <AGSolidImage
+            v-if="$solid.user?.avatarUrl"
+            :src="$solid.user?.avatarUrl"
+            alt=""
+            class="absolute inset-0 h-full w-full rounded-full"
+        />
+        <span v-else-if="userInitials" class="text-sm font-semibold tracking-wider text-gray-500" aria-hidden="true">
+            {{ userInitials }}
+        </span>
+        <IconAnonymous v-else class="h-6 w-6 text-gray-500" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import IconAnonymous from '~icons/ooui/user-anonymous';
+
+import { computed } from 'vue';
+
+import Solid from '@aerogel/plugin-solid/services/Solid';
+
+import AGSolidImage from './AGSolidImage.vue';
+
+const userInitials = computed(() => {
+    const name = Solid.user?.name ?? '';
+
+    return name
+        .trim()
+        .split(' ')
+        .map((part) => part[0]?.toUpperCase())
+        .join('')
+        .slice(0, 3);
+});
+</script>

package/src/components/index.ts

@@ -0,0 +1,4 @@
+export { default as AGSolidImage } from './AGSolidImage.vue';
+export { default as AGSolidStatus } from './AGSolidStatus.vue';
+export { default as AGSolidUserAvatar } from './AGSolidUserAvatar.vue';
+export type { IAGSolidStatusLoggedInSlotProps } from './AGSolidStatus';

package/src/errors/AuthenticationCancelledError.ts

@@ -0,0 +1,3 @@
+import { JSError } from '@noeldemartin/utils';
+
+export default class AuthenticationCancelledError extends JSError {}

package/src/errors/AuthenticationFailedError.ts

@@ -0,0 +1,22 @@
+import { JSError } from '@noeldemartin/utils';
+import type { JSErrorOptions } from '@noeldemartin/utils';
+
+function getErrorMessage(message: string, description?: string | null): string {
+    if (!description) {
+        return message;
+    }
+
+    return `${message} (${description})`;
+}
+
+export default class AuthenticationFailedError extends JSError {
+
+    public readonly description?: string | null;
+
+    constructor(message: string, description?: string | null, options?: JSErrorOptions) {
+        super(getErrorMessage(message), options);
+
+        this.description = description;
+    }
+
+}

package/src/errors/ContainerAlreadyInUse.ts

@@ -0,0 +1,11 @@
+import { JSError } from '@noeldemartin/utils';
+import type { JSErrorOptions } from '@noeldemartin/utils';
+import type { SolidContainer } from 'soukai-solid';
+
+export default class ContainerAlreadyInUse extends JSError {
+
+    constructor(container: SolidContainer, options?: JSErrorOptions) {
+        super(`Container at ${container.url} is already in use`, options);
+    }
+
+}

package/src/errors/index.ts

@@ -0,0 +1,3 @@
+export { default as AuthenticationCancelledError } from '@aerogel/plugin-solid/errors/AuthenticationCancelledError';
+export { default as AuthenticationFailedError } from '@aerogel/plugin-solid/errors/AuthenticationFailedError';
+export { default as ContainerAlreadyInUse } from '@aerogel/plugin-solid/errors/ContainerAlreadyInUse';

package/src/forms/validation.ts

@@ -0,0 +1,11 @@
+import { defineFormValidationRule } from '@aerogel/core';
+
+export function defineFormValidationRules(): void {
+    defineFormValidationRule<string>('container_url', (value) => {
+        if (value.endsWith('/')) {
+            return;
+        }
+
+        return 'containerEndingSlashMissing';
+    });
+}

package/src/index.test.ts

@@ -0,0 +1,24 @@
+import { createApp } from 'vue';
+import { describe, expect, it } from 'vitest';
+import { Errors, bootServices } from '@aerogel/core';
+import { Metadata } from 'soukai-solid';
+import { requireBootedModel } from 'soukai';
+
+import solid from './index';
+
+describe('Solid plugin', () => {
+
+    it('Initializes models', async () => {
+        // Arrange
+        const app = createApp({});
+
+        await bootServices(app, { $errors: Errors });
+
+        // Act
+        await solid().install(app, {});
+
+        // Assert
+        expect(requireBootedModel('Metadata')).toEqual(Metadata);
+    });
+
+});

package/src/index.ts

@@ -0,0 +1,65 @@
+import { Events, bootServices, registerErrorHandler } from '@aerogel/core';
+import { bootSolidModels } from 'soukai-solid';
+import type { Plugin } from '@aerogel/core';
+import type { SolidStore, SolidUserProfile } from '@noeldemartin/solid-utils';
+
+import Solid from '@aerogel/plugin-solid/services/Solid';
+import { DEFAULT_STATE } from '@aerogel/plugin-solid/services/Solid.state';
+import { defineFormValidationRules } from '@aerogel/plugin-solid/forms/validation';
+import {
+    authenticators as baseAuthenticators,
+    getAuthenticator,
+    registerAuthenticators,
+    setDefaultAuthenticator,
+} from '@aerogel/plugin-solid/auth';
+import { AuthenticationFailedError } from '@aerogel/plugin-solid/errors';
+import type Authenticator from '@aerogel/plugin-solid/auth/Authenticator';
+import type { AuthenticatorName } from '@aerogel/plugin-solid/auth';
+
+const services = { $solid: Solid };
+
+export * from './auth';
+export * from './components';
+export * from './errors';
+export * from './services/Solid';
+export { Solid };
+
+export interface Options {
+    autoReconnect?: boolean;
+    authenticators?: Record<string, Authenticator>;
+    defaultAuthenticator?: AuthenticatorName;
+    onUserProfileLoaded?(user: SolidUserProfile, store: SolidStore): Promise<unknown> | unknown;
+}
+
+export type SolidServices = typeof services;
+
+export default function solid(options: Options = {}): Plugin {
+    return {
+        async install(app) {
+            bootSolidModels();
+            registerAuthenticators({ ...baseAuthenticators, ...(options.authenticators ?? {}) });
+            defineFormValidationRules();
+            setDefaultAuthenticator(getAuthenticator(options.defaultAuthenticator ?? 'inrupt'));
+            registerErrorHandler((error) => {
+                if (!(error instanceof AuthenticationFailedError)) {
+                    return;
+                }
+                return error.description ? `${error.message} (${error.description})` : error.message;
+            });
+            if (typeof options.autoReconnect === 'boolean') {
+                DEFAULT_STATE.autoReconnect = options.autoReconnect;
+                Solid.hasPersistedState() || (Solid.autoReconnect = options.autoReconnect);
+            }
+            if (options.onUserProfileLoaded) {
+                Events.on('solid:user-profile-loaded', ([user, store]) => {
+                    options.onUserProfileLoaded?.(user, store);
+                });
+            }
+            await bootServices(app, services);
+        },
+    };
+}
+
+declare module '@aerogel/core' {
+    interface Services extends SolidServices {}
+}

package/src/services/Solid.state.ts

@@ -0,0 +1,56 @@
+import { defineServiceState } from '@aerogel/core';
+import type { ErrorSource } from '@aerogel/core';
+import type { Fetch, SolidUserProfile } from '@noeldemartin/solid-utils';
+
+import type { AuthSession } from '@aerogel/plugin-solid/auth/Authenticator';
+import type { AuthenticatorName } from '@aerogel/plugin-solid/auth';
+
+export const DEFAULT_STATE = { autoReconnect: true };
+
+export default defineServiceState({
+    name: 'solid',
+    persist: ['autoReconnect', 'dismissed', 'previousSession', 'profiles', 'staleProfiles'],
+    initialState: {
+        autoReconnect: DEFAULT_STATE.autoReconnect,
+        dismissed: false,
+        ignorePreviousSessionError: false,
+        loginStartupError: null as ErrorSource | null,
+        loginOngoing: false,
+        preferredAuthenticator: null as AuthenticatorName | null,
+        previousSession: null as {
+            profile?: SolidUserProfile;
+            authenticator: AuthenticatorName;
+            loginUrl: string;
+            error: ErrorSource | null;
+        } | null,
+        profiles: {} as Record<string, SolidUserProfile>,
+        session: null as AuthSession | null,
+        loginStale: false,
+        staleProfiles: [] as string[],
+    },
+    serialize(state) {
+        if (state.previousSession?.error instanceof Error) {
+            state.previousSession.error = state.previousSession.error.message;
+        }
+
+        return state;
+    },
+    computed: {
+        user: (state) => state.session?.user ?? state.previousSession?.profile ?? null,
+        authenticator: (state) => state.session?.authenticator ?? null,
+        fetch(): Fetch {
+            return this.authenticator?.getAuthenticatedFetch() ?? globalThis.fetch.bind(globalThis);
+        },
+        error(state): ErrorSource | null {
+            if (state.loginStartupError) {
+                return state.loginStartupError ?? null;
+            }
+
+            if (state.ignorePreviousSessionError) {
+                return null;
+            }
+
+            return state.previousSession?.error ?? null;
+        },
+    },
+});