@aerogel/plugin-solid 0.0.1 → 0.1.0

package/src/components/SolidLogin.vue

@@ -0,0 +1,141 @@
+<template>
+    <Form :form :class="renderedClasses" @submit="submit">
+        <div
+            class="flex w-full flex-col items-center gap-2"
+            :class="{ 'md:flex-row': layout === 'horizontal' && !form.authenticator }"
+        >
+            <Input
+                v-if="showInput"
+                name="url"
+                :aria-label="$td('solid.logIn.label', 'Login url')"
+                :placeholder="$td('solid.logIn.placeholder', 'https://me.solidcommunity.net')"
+                class="w-full md:min-w-96"
+            />
+            <Select
+                v-if="form.authenticator"
+                name="authenticator"
+                class="w-full max-w-full md:min-w-96"
+                label-class="sr-only"
+                options-class="md:w-96 w-full max-w-[calc(100vw-4rem)]"
+                :label="$td('solid.logIn.switchAuthenticatorLabel', 'Authentication method')"
+                :options="authenticatorOptions"
+                :render-option="renderAuthenticator"
+            />
+            <div v-if="showDevLogin && !usingManualUrl" class="flex w-full justify-center gap-2">
+                <Button
+                    variant="secondary"
+                    class="group gap-0"
+                    :title="$td('solid.logIn.manualUrl', 'Enter url')"
+                    @click="usingManualUrl = true"
+                >
+                    <IconLogin class="size-4" />
+                    <span
+                        v-measure.css="() => (measured = true)"
+                        class="overflow-hidden pl-1 whitespace-nowrap"
+                        :class="{
+                            'opacity-0': !measured,
+                            'w-0 transition-[width] md:group-hover:w-(--width)': measured,
+                        }"
+                    >{{ $td('solid.logIn.manualUrl', 'Enter url') }}</span>
+                </Button>
+                <Button
+                    :disabled="noLoading && $solid.loginOngoing"
+                    submit
+                    class="whitespace-nowrap"
+                    @click="form.url = 'dev'"
+                >
+                    {{ $td('solid.logIn.dev', 'Log in to dev server') }}
+                </Button>
+            </div>
+            <Button
+                v-else
+                :disabled="noLoading && $solid.loginOngoing"
+                submit
+                :class="renderedButtonClasses"
+            >
+                {{ $td('solid.logIn.submit', 'Log in') }}
+            </Button>
+        </div>
+        <Link
+            v-if="allowLegacyAuthenticator && showInput && !form.authenticator"
+            class="text-sm font-normal text-gray-700"
+            @click="form.authenticator = 'inrupt'"
+        >
+            {{ $td('solid.logIn.switchAuthenticator', "Can't log in? Try using a different authentication method") }}
+        </Link>
+    </Form>
+</template>
+
+<script setup lang="ts">
+import IconLogin from '~icons/ic/baseline-log-in';
+
+import {
+    App,
+    Button,
+    Form,
+    Input,
+    Link,
+    Select,
+    UI,
+    classes,
+    requiredStringInput,
+    stringInput,
+    translateWithDefault,
+    useForm,
+} from '@aerogel/core';
+import { computed, ref } from 'vue';
+import type { HTMLAttributes } from 'vue';
+
+import Solid from '@aerogel/plugin-solid/services/Solid';
+import type { AuthenticatorName } from '@aerogel/plugin-solid/auth';
+
+const AUTHENTICATOR_LABELS = {
+    inrupt: 'Log in using Inrupt\'s authentication library',
+    legacy: 'Log in using the legacy authentication library',
+} satisfies Partial<Record<AuthenticatorName, string>>;
+
+const {
+    class: rootClasses = '',
+    layout = 'horizontal',
+    buttonClass,
+    noLoading,
+    allowLegacyAuthenticator,
+} = defineProps<{
+    class?: HTMLAttributes['class'];
+    buttonClass?: HTMLAttributes['class'];
+    layout?: 'vertical' | 'horizontal';
+    noLoading?: boolean;
+    allowLegacyAuthenticator?: boolean;
+}>();
+const form = useForm({
+    url: requiredStringInput(),
+    authenticator: stringInput(),
+});
+const authenticatorOptions = Object.keys(AUTHENTICATOR_LABELS) as (keyof typeof AUTHENTICATOR_LABELS)[];
+const measured = ref(false);
+const usingManualUrl = ref(false);
+const showInput = computed(() => !showDevLogin.value || usingManualUrl.value);
+const showDevLogin = computed(
+    () => App.development && (!form.url || form.url === 'dev' || form.url.trim().length === 0),
+);
+const renderedClasses = computed(() => classes('flex flex-col items-center gap-2 w-full md:w-auto', rootClasses));
+const renderedButtonClasses = computed(() =>
+    classes('w-full whitespace-nowrap', { 'md:w-auto': layout === 'horizontal' && !form.authenticator }, buttonClass));
+
+function renderAuthenticator(option: keyof typeof AUTHENTICATOR_LABELS) {
+    return translateWithDefault(
+        `solid.logIn.switchAuthenticator${option.charAt(0).toUpperCase() + option.slice(1)}`,
+        AUTHENTICATOR_LABELS[option],
+    );
+}
+
+async function submit() {
+    if (noLoading) {
+        await Solid.login(form.url, { authenticator: form.authenticator as AuthenticatorName });
+
+        return;
+    }
+
+    await UI.loading(translateWithDefault('solid.loginOngoing', 'Logging in...'), Solid.login(form.url));
+}
+</script>

package/src/components/index.ts

@@ -1,4 +1,3 @@
-import AGSolidStatus from './AGSolidStatus.vue';
-import { IAGSolidStatusLoggedInSlotProps } from './AGSolidStatus';
-
-export { AGSolidStatus, IAGSolidStatusLoggedInSlotProps };
+export { default as SolidAvatar } from './SolidAvatar.vue';
+export { default as SolidImage } from './SolidImage.vue';
+export { default as SolidLogin } from './SolidLogin.vue';

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/index.ts

@@ -1,4 +1,3 @@
-import AuthenticationCancelledError from '@/errors/AuthenticationCancelledError';
-import ContainerAlreadyInUse from '@/errors/ContainerAlreadyInUse';
-
-export { AuthenticationCancelledError, ContainerAlreadyInUse };
+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.css

@@ -0,0 +1 @@
+@source './';

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

@@ -2,23 +2,25 @@ import { defineServiceState } from '@aerogel/core';
 import type { ErrorSource } from '@aerogel/core';
 import type { Fetch, SolidUserProfile } from '@noeldemartin/solid-utils';
 
-import type { AuthSession } from '@/auth/Authenticator';
-import type { AuthenticatorName } from '@/auth';
+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: false,
+        autoReconnect: DEFAULT_STATE.autoReconnect,
         dismissed: false,
         ignorePreviousSessionError: false,
-        loginError: null as ErrorSource | null,
+        loginStartupError: null as ErrorSource | null,
         loginOngoing: false,
         preferredAuthenticator: null as AuthenticatorName | null,
         previousSession: null as {
+            profile?: SolidUserProfile;
             authenticator: AuthenticatorName;
             loginUrl: string;
-            avatarUrl?: string;
             error: ErrorSource | null;
         } | null,
         profiles: {} as Record<string, SolidUserProfile>,
@@ -34,20 +36,14 @@ export default defineServiceState({
         return state;
     },
     computed: {
-        loggedIn: (state) => !!state.session,
-        user: (state) => state.session?.user ?? null,
-        userAvatarUrl: (state) => state.session?.user?.avatarUrl ?? state.previousSession?.avatarUrl ?? null,
-        wasLoggedIn: (state) => !!state.previousSession?.loginUrl,
+        user: (state) => state.session?.user ?? state.previousSession?.profile ?? null,
         authenticator: (state) => state.session?.authenticator ?? null,
-        hasLoggedIn(): boolean {
-            return this.loggedIn || this.wasLoggedIn;
-        },
         fetch(): Fetch {
-            return this.authenticator?.getAuthenticatedFetch() ?? window.fetch.bind(window);
+            return this.authenticator?.getAuthenticatedFetch() ?? globalThis.fetch.bind(globalThis);
         },
-        error(state) {
-            if (state.loginError) {
-                return state.loginError ?? null;
+        error(state): ErrorSource | null {
+            if (state.loginStartupError) {
+                return state.loginStartupError ?? null;
             }
 
             if (state.ignorePreviousSessionError) {