diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..4fd0219 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +engine-strict=true \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 60c194a..fb6773a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,8 @@ "dependencies": { "clipboard-copy": "^4.0.1", "qrcode-svg": "^1.1.0", - "webnative": "0.34.1" + "uint8arrays": "^3.1.0", + "webnative": "^0.34.1" }, "devDependencies": { "@sveltejs/adapter-static": "1.0.0-next.36", @@ -37,6 +38,9 @@ "tslib": "^2.0.0", "typescript": "^4.4.4", "vite": "^3.0.0" + }, + "engines": { + "node": ">=16.9" } }, "node_modules/@babel/code-frame": { @@ -47,6 +51,100 @@ "@babel/highlight": "^7.10.4" } }, + "node_modules/@babel/helper-validator-identifier": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz", + "integrity": "sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==", + "dev": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/highlight": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz", + "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==", + "dev": true, + "dependencies": { + "@babel/helper-validator-identifier": "^7.18.6", + "chalk": "^2.0.0", + "js-tokens": "^4.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/highlight/node_modules/ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, + "dependencies": { + "color-convert": "^1.9.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/@babel/highlight/node_modules/chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "dependencies": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/@babel/highlight/node_modules/color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dev": true, + "dependencies": { + "color-name": "1.1.3" + } + }, + "node_modules/@babel/highlight/node_modules/color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", + "dev": true + }, + "node_modules/@babel/highlight/node_modules/escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", + "dev": true, + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/@babel/highlight/node_modules/has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/@babel/highlight/node_modules/supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "dependencies": { + "has-flag": "^3.0.0" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/@cspotcode/source-map-support": { "version": "0.8.1", "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==", @@ -3235,6 +3333,12 @@ "node": ">= 0.8" } }, + "node_modules/js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "dev": true + }, "node_modules/js-yaml": { "version": "3.14.1", "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==", @@ -5712,6 +5816,81 @@ "@babel/highlight": "^7.10.4" } }, + "@babel/helper-validator-identifier": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz", + "integrity": "sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==", + "dev": true + }, + "@babel/highlight": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz", + "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.18.6", + "chalk": "^2.0.0", + "js-tokens": "^4.0.0" + }, + "dependencies": { + "ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, + "requires": { + "color-convert": "^1.9.0" + } + }, + "chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + }, + "color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dev": true, + "requires": { + "color-name": "1.1.3" + } + }, + "color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", + "dev": true + }, + "escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", + "dev": true + }, + "has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", + "dev": true + }, + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + } + } + }, "@cspotcode/source-map-support": { "version": "0.8.1", "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==", @@ -7996,6 +8175,12 @@ "integrity": "sha512-Smw4xcfIQ5LVjAOuJCvN/zIodzA/BBSsluuoSykP+lUvScIi4U6RJLfwHet5cxFnCswUjISV8oAXaqaJDY3chg==", "dev": true }, + "js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "dev": true + }, "js-yaml": { "version": "3.14.1", "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==", diff --git a/package.json b/package.json index 082dc73..a60c38c 100644 --- a/package.json +++ b/package.json @@ -53,6 +53,10 @@ "dependencies": { "clipboard-copy": "^4.0.1", "qrcode-svg": "^1.1.0", - "webnative": "0.34.1" + "uint8arrays": "^3.1.0", + "webnative": "^0.34.1" + }, + "engines": { + "node": ">=16.9" } } diff --git a/src/components/Header.svelte b/src/components/Header.svelte index 67c6365..5744bc6 100644 --- a/src/components/Header.svelte +++ b/src/components/Header.svelte @@ -1,16 +1,16 @@ @@ -18,7 +18,7 @@
goto('/')}> - {appName} +
{#if !$sessionStore.loading && !$sessionStore.authed} @@ -40,7 +40,7 @@ {/if} - {#if $theme === 'light'} + {#if $themeStore === 'light'} setTheme('dark')}> diff --git a/src/components/auth/backup/AreYouSure.svelte b/src/components/auth/backup/AreYouSure.svelte index ff5fb79..15dac28 100644 --- a/src/components/auth/backup/AreYouSure.svelte +++ b/src/components/auth/backup/AreYouSure.svelte @@ -1,16 +1,8 @@ + + +
+
+
+

Connect a backup device

+ {@html qrcode} +

+ Scan this code on the new device, or share the connection link. +

+ + {#if !backupCreated} + + {/if} +
+
+
diff --git a/src/components/auth/delegate-account/DelegateAccount.svelte b/src/components/auth/delegate-account/DelegateAccount.svelte new file mode 100644 index 0000000..2edad97 --- /dev/null +++ b/src/components/auth/delegate-account/DelegateAccount.svelte @@ -0,0 +1,64 @@ + + + +
+
+
+

+ A new device would like to connect to your account +

+
+ + +
+
+ + +
+
+
+
diff --git a/src/components/auth/link-device/LinkDevice.svelte b/src/components/auth/link-device/LinkDevice.svelte new file mode 100644 index 0000000..2c94a11 --- /dev/null +++ b/src/components/auth/link-device/LinkDevice.svelte @@ -0,0 +1,48 @@ + + + +
+
+
+

Connection Requested

+
+ {#if pin} + + {pin} + + {/if} + Enter this code on your connected device. +
+ + Waiting for a response... +
+
+
+ +
+
+
+
diff --git a/src/components/auth/link/DelegateAccount.svelte b/src/components/auth/link/DelegateAccount.svelte deleted file mode 100644 index 6b45686..0000000 --- a/src/components/auth/link/DelegateAccount.svelte +++ /dev/null @@ -1,196 +0,0 @@ - - -{#if view === 'backup-device'} - -
-
-
-

Connect a backup device

- {@html qrcode} -

- Scan this code on the new device, or share the connection link. -

- - {#if !backupCreated} - - {/if} -
-
-
-{:else if view === 'delegate-account'} - -
-
-
-

- A new device would like to connect to your account -

-
- - -
-
- - -
-
-
-
-{/if} diff --git a/src/components/auth/link/LinkDevice.svelte b/src/components/auth/link/LinkDevice.svelte deleted file mode 100644 index 1b436dc..0000000 --- a/src/components/auth/link/LinkDevice.svelte +++ /dev/null @@ -1,106 +0,0 @@ - - - -{#if loadingFilesystem} -
-
-

- - Loading file system... -

-
-
-{:else} -
-
-
-

Connection Requested

-
- {#if displayPin} - - {displayPin} - - {/if} - Enter this code on your connected device. -
- - Waiting for a response... -
-
-
- -
-
-
-
-{/if} diff --git a/src/components/auth/register/Register.svelte b/src/components/auth/register/Register.svelte index fb19368..fce149f 100644 --- a/src/components/auth/register/Register.svelte +++ b/src/components/auth/register/Register.svelte @@ -4,9 +4,10 @@ isUsernameValid, isUsernameAvailable, register - } from '$lib/common/webnative' + } from '$lib/auth/account' import CheckIcon from '$components/icons/CheckIcon.svelte' import XIcon from '$components/icons/XIcon.svelte' + import FilesystemActivity from '$components/common/FilesystemActivity.svelte' let username: string = '' let usernameValid = true @@ -14,6 +15,8 @@ let registrationSuccess = true let checkingUsername = false + let initializingFilesystem = false + const checkUsername = async (event: Event) => { const { value } = event.target as HTMLInputElement @@ -28,30 +31,17 @@ checkingUsername = false } - let authInProcess = false const registerUser = async () => { - authInProcess = true + initializingFilesystem = true registrationSuccess = await register(username) - if (!registrationSuccess) authInProcess = false + if (!registrationSuccess) initializingFilesystem = false } -{#if authInProcess} - -
-
-

- - Initializing file system... -

-
-
+{#if initializingFilesystem} + {:else}
diff --git a/src/components/auth/register/Welcome.svelte b/src/components/auth/register/Welcome.svelte index 1ff1e3f..141c944 100644 --- a/src/components/auth/register/Welcome.svelte +++ b/src/components/auth/register/Welcome.svelte @@ -1,7 +1,7 @@ diff --git a/src/components/common/FilesystemActivity.svelte b/src/components/common/FilesystemActivity.svelte new file mode 100644 index 0000000..ca125b0 --- /dev/null +++ b/src/components/common/FilesystemActivity.svelte @@ -0,0 +1,17 @@ + + + +
+
+

+ + {activity} file system... +

+
+
diff --git a/src/components/gallery/imageGallery/ImageGallery.svelte b/src/components/gallery/imageGallery/ImageGallery.svelte index 33b258e..980903c 100644 --- a/src/components/gallery/imageGallery/ImageGallery.svelte +++ b/src/components/gallery/imageGallery/ImageGallery.svelte @@ -1,5 +1,6 @@ diff --git a/src/components/notifications/Notifications.svelte b/src/components/notifications/Notifications.svelte index c559505..501509e 100644 --- a/src/components/notifications/Notifications.svelte +++ b/src/components/notifications/Notifications.svelte @@ -1,7 +1,8 @@ {#if $notificationStore.length} diff --git a/src/components/notifications/Toast.svelte b/src/components/notifications/Toast.svelte deleted file mode 100644 index 8711ed3..0000000 --- a/src/components/notifications/Toast.svelte +++ /dev/null @@ -1,37 +0,0 @@ - - -
-
-
- {#if kind === 'success'} - - {:else if kind === 'error'} - - {/if} - {message} -
-
-
diff --git a/src/lib/app-info.ts b/src/lib/app-info.ts index bbc6726..126facd 100644 --- a/src/lib/app-info.ts +++ b/src/lib/app-info.ts @@ -1,3 +1,4 @@ export const appName = 'Awesome Webnative App' export const appDescription = 'This is another awesome Webnative app.' export const appURL = 'https://webnative.netlify.app' +export const appImageURL = `${appURL}/preview.png` diff --git a/src/lib/common/webnative.ts b/src/lib/auth/account.ts similarity index 53% rename from src/lib/common/webnative.ts rename to src/lib/auth/account.ts index 3c403c7..7e82ad3 100644 --- a/src/lib/common/webnative.ts +++ b/src/lib/auth/account.ts @@ -1,75 +1,10 @@ import * as webnative from 'webnative' -import { setup } from 'webnative' +import type FileSystem from 'webnative/fs/index' -import { asyncDebounce } from '$lib/common/utils' +import { asyncDebounce } from '$lib/utils' import { filesystemStore, sessionStore } from '../../stores' +import { getBackupStatus } from '$lib/auth/backup' import { AREAS, GALLERY_DIRS } from '$lib/gallery' -import { getBackupStatus, type BackupStatus } from '$lib/auth/backup' - -// runfission.net = staging -setup.endpoints({ - api: 'https://runfission.net', - lobby: 'https://auth.runfission.net', - user: 'fissionuser.net' -}) - -let state: webnative.AppState - -// TODO: Add a flag or script to turn debugging on/off -setup.debug({ enabled: false }) - -export const initialize = async (): Promise => { - try { - let backupStatus: BackupStatus = null - - state = await webnative.app({ useWnfs: true }) - - switch (state.scenario) { - case webnative.AppScenario.NotAuthed: - sessionStore.set({ - username: '', - authed: false, - loading: false, - backupCreated: null - }) - break - - case webnative.AppScenario.Authed: - backupStatus = await getBackupStatus(state.fs) - - sessionStore.set({ - username: state.username, - authed: state.authenticated, - loading: false, - backupCreated: backupStatus.created - }) - - filesystemStore.set(state.fs) - break - - default: - break - } - } catch (error) { - switch (error) { - case webnative.InitialisationError.InsecureContext: - sessionStore.update(session => ({ - ...session, - loading: false, - error: 'Insecure Context' - })) - break - - case webnative.InitialisationError.UnsupportedBrowser: - sessionStore.update(session => ({ - ...session, - loading: false, - error: 'Unsupported Browser' - })) - break - } - } -} export const isUsernameValid = async (username: string): Promise => { return webnative.account.isUsernameValid(username) @@ -94,9 +29,8 @@ export const register = async (username: string): Promise => { const fs = await webnative.bootstrapRootFileSystem() filesystemStore.set(fs) - // Create public and private directories for the gallery - await fs.mkdir(webnative.path.directory(...GALLERY_DIRS[AREAS.PUBLIC])) - await fs.mkdir(webnative.path.directory(...GALLERY_DIRS[AREAS.PRIVATE])) + // TODO Remove if only public and private directories are needed + await initializeFilesystem(fs) sessionStore.update(session => ({ ...session, @@ -107,6 +41,16 @@ export const register = async (username: string): Promise => { return success } +/** + * Create additional directories and files needed by the app + * + * @param fs FileSystem + */ +const initializeFilesystem = async (fs: FileSystem): Promise => { + await fs.mkdir(webnative.path.directory(...GALLERY_DIRS[AREAS.PUBLIC])) + await fs.mkdir(webnative.path.directory(...GALLERY_DIRS[AREAS.PRIVATE])) +} + export const loadAccount = async (username: string): Promise => { await checkDataRoot(username) diff --git a/src/lib/common/example.test.ts b/src/lib/common/example.test.ts deleted file mode 100644 index 7ae0a69..0000000 --- a/src/lib/common/example.test.ts +++ /dev/null @@ -1,5 +0,0 @@ -import test from 'ava' - -test('my passing test', t => { - t.pass() -}) diff --git a/src/lib/common/utils.ts b/src/lib/common/utils.ts deleted file mode 100644 index 6034b1d..0000000 --- a/src/lib/common/utils.ts +++ /dev/null @@ -1,52 +0,0 @@ -export function asyncDebounce( - fn: (...args: A) => Promise, - wait: number -): (...args: A) => Promise { - let lastTimeoutId: ReturnType | undefined = undefined - - return (...args: A): Promise => { - clearTimeout(lastTimeoutId) - - return new Promise((resolve, reject) => { - const currentTimeoutId = setTimeout(async () => { - try { - if (currentTimeoutId === lastTimeoutId) { - const result = await fn(...args) - resolve(result) - } - } catch (err) { - reject(err) - } - }, wait) - - lastTimeoutId = currentTimeoutId - }) - } -} - -/** - * Util to convert a Uint8Array to a string - * @param u8array - * @returns string - */ -export const convertUint8ToString: (u8array: Uint8Array) => string = u8array => { - const CHUNK_SZ = 0x8000 - const c = [] - for (let i = 0; i < u8array.length; i += CHUNK_SZ) { - c.push(String.fromCharCode.apply(null, u8array.subarray(i, i + CHUNK_SZ))) - } - return c.join('') -} - -/** - * Generate a new uuid - * @returns uuid - */ -export const uuid: () => string = () => - // @ts-expect-error disable number[] + number warning - ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c: number) => - ( - c ^ - (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4))) - ).toString(16) - ) diff --git a/src/lib/device.ts b/src/lib/device.ts deleted file mode 100644 index 9eb8590..0000000 --- a/src/lib/device.ts +++ /dev/null @@ -1,3 +0,0 @@ -export type Device = { - isMobile: boolean -} \ No newline at end of file diff --git a/src/lib/gallery.ts b/src/lib/gallery.ts index 68e0cec..3b043b3 100644 --- a/src/lib/gallery.ts +++ b/src/lib/gallery.ts @@ -1,8 +1,9 @@ +import * as uint8arrays from 'uint8arrays' import { get as getStore } from 'svelte/store' + import * as wn from 'webnative' -import { filesystemStore, galleryStore } from '../stores' -import { convertUint8ToString } from '$lib/common/utils' import { addNotification } from '$lib/notifications' +import { filesystemStore, galleryStore } from '../stores' export enum AREAS { PUBLIC = 'Public', @@ -60,9 +61,7 @@ export const getImagesFromWNFS: () => Promise = async () => { const cid = isPrivate ? file.header.content.toString() : file.cid.toString() // Create a base64 string to use as the image `src` - const src = `data:image/jpeg;base64, ${btoa( - convertUint8ToString(file.content as Uint8Array) - )}` + const src = `data:image/jpeg;base64, ${uint8arrays.toString(file.content, 'base64')}` return { cid, @@ -90,7 +89,6 @@ export const getImagesFromWNFS: () => Promise = async () => { loading: false, })) } catch (error) { - console.error(error) galleryStore.update(store => ({ ...store, loading: false, @@ -132,12 +130,10 @@ export const uploadImageToWNFS: ( // Announce the changes to the server await fs.publish() - console.log(`${image.name} image has been published`) addNotification(`${image.name} image has been published`, 'success') } catch (error) { addNotification(error.message, 'error') - console.log(error) } } @@ -161,7 +157,6 @@ export const deleteImageFromWNFS: (name: string) => Promise = async (name) // Announce the changes to the server await fs.publish() - console.log(`${name} image has been deleted`) addNotification(`${name} image has been deleted`, 'success') // Refetch images and update galleryStore @@ -171,7 +166,6 @@ export const deleteImageFromWNFS: (name: string) => Promise = async (name) } } catch (error) { addNotification(error.message, 'error') - console.error(error) } } diff --git a/src/lib/init.ts b/src/lib/init.ts new file mode 100644 index 0000000..f0c02e0 --- /dev/null +++ b/src/lib/init.ts @@ -0,0 +1,61 @@ +import * as webnative from 'webnative' +import { setup } from 'webnative' + +import { filesystemStore, sessionStore } from '../stores' +import { getBackupStatus, type BackupStatus } from '$lib/auth/backup' + +// TODO: Add a flag or script to turn debugging on/off +setup.debug({ enabled: false }) + +export const initialize = async (): Promise => { + try { + let backupStatus: BackupStatus = null + + const state: webnative.AppState = await webnative.app({ useWnfs: true }) + + switch (state.scenario) { + case webnative.AppScenario.NotAuthed: + sessionStore.set({ + username: '', + authed: false, + loading: false, + backupCreated: null + }) + break + + case webnative.AppScenario.Authed: + backupStatus = await getBackupStatus(state.fs) + + sessionStore.set({ + username: state.username, + authed: state.authenticated, + loading: false, + backupCreated: backupStatus.created + }) + + filesystemStore.set(state.fs) + break + + default: + break + } + } catch (error) { + switch (error) { + case webnative.InitialisationError.InsecureContext: + sessionStore.update(session => ({ + ...session, + loading: false, + error: 'Insecure Context' + })) + break + + case webnative.InitialisationError.UnsupportedBrowser: + sessionStore.update(session => ({ + ...session, + loading: false, + error: 'Unsupported Browser' + })) + break + } + } +} \ No newline at end of file diff --git a/src/lib/notifications.ts b/src/lib/notifications.ts index 6a5c0ee..c8c3653 100644 --- a/src/lib/notifications.ts +++ b/src/lib/notifications.ts @@ -1,5 +1,4 @@ import { notificationStore } from '../stores' -import { uuid } from '$lib/common/utils' export type Notification = { id?: string @@ -22,7 +21,7 @@ export const addNotification: ( timeout?: number ) => void = (msg, type = 'info', timeout = 5000) => { // uuid for each notification - const id = uuid() + const id = crypto.randomUUID() // adding new notifications to the bottom of the list so they stack from bottom to top notificationStore.update(rest => [ diff --git a/src/lib/theme/index.ts b/src/lib/theme.ts similarity index 100% rename from src/lib/theme/index.ts rename to src/lib/theme.ts diff --git a/src/lib/utils.ts b/src/lib/utils.ts new file mode 100644 index 0000000..3cd7c17 --- /dev/null +++ b/src/lib/utils.ts @@ -0,0 +1,35 @@ +export function asyncDebounce( + fn: (...args: A) => Promise, + wait: number +): (...args: A) => Promise { + let lastTimeoutId: ReturnType | undefined = undefined + + return (...args: A): Promise => { + clearTimeout(lastTimeoutId) + + return new Promise((resolve, reject) => { + const currentTimeoutId = setTimeout(async () => { + try { + if (currentTimeoutId === lastTimeoutId) { + const result = await fn(...args) + resolve(result) + } + } catch (err) { + reject(err) + } + }, wait) + + lastTimeoutId = currentTimeoutId + }) + } +} + +export const extractSearchParam = (url: URL, param: string): string | null => { + const val = url.searchParams.get(param) + + // clear the param from the URL + url.searchParams.delete(param) + history.replaceState(null, document.title, url.toString()) + + return val +} \ No newline at end of file diff --git a/src/lib/views.ts b/src/lib/views.ts index 12353af..d176623 100644 --- a/src/lib/views.ts +++ b/src/lib/views.ts @@ -1,3 +1,7 @@ export type BackupView = 'backup' | 'are-you-sure' -export type ConnectView = 'connect' | 'open-connected-device' \ No newline at end of file +export type ConnectView = 'connect' | 'open-connected-device' + +export type DelegateAccountView = 'connect-backup-device' | 'delegate-account' + +export type LinkDeviceView = 'link-device' | 'load-filesystem' \ No newline at end of file diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte index 7fa9e3b..baae8d9 100644 --- a/src/routes/__layout.svelte +++ b/src/routes/__layout.svelte @@ -1,42 +1,24 @@ @@ -51,14 +33,14 @@ - + - - + + - + @@ -68,19 +50,8 @@ - - -
+
- - {#if session.error} - - {/if} -
diff --git a/src/routes/backup.svelte b/src/routes/backup.svelte index 9eadad1..f2a3056 100644 --- a/src/routes/backup.svelte +++ b/src/routes/backup.svelte @@ -1,15 +1,12 @@ diff --git a/src/routes/delegate-account.svelte b/src/routes/delegate-account.svelte index a5001cb..c77fa02 100644 --- a/src/routes/delegate-account.svelte +++ b/src/routes/delegate-account.svelte @@ -1,5 +1,123 @@ - +{#if view === 'connect-backup-device'} + +{:else if view === 'delegate-account'} + +{/if} diff --git a/src/routes/gallery.svelte b/src/routes/gallery.svelte index 65001c0..dae469e 100644 --- a/src/routes/gallery.svelte +++ b/src/routes/gallery.svelte @@ -1,10 +1,11 @@ - + + +{#if view === 'link-device'} + +{:else if view === 'load-filesystem'} + +{/if} diff --git a/src/stores.ts b/src/stores.ts index a00b378..67f293b 100644 --- a/src/stores.ts +++ b/src/stores.ts @@ -3,14 +3,13 @@ import type { Writable } from 'svelte/store' import type FileSystem from 'webnative/fs/index' import { loadTheme } from '$lib/theme' -import type { Device } from '$lib/device' import { AREAS } from '$lib/gallery' import type { Gallery } from '$lib/gallery' import type { Notification } from '$lib/notifications' import type { Session } from '$lib/session' import type { Theme } from '$lib/theme' -export const theme: Writable = writable(loadTheme()) +export const themeStore: Writable = writable(loadTheme()) export const sessionStore: Writable = writable({ username: null, @@ -21,8 +20,6 @@ export const sessionStore: Writable = writable({ export const filesystemStore: Writable = writable(null) -export const deviceStore: Writable = writable({ isMobile: true }) - export const galleryStore: Writable = writable({ loading: true, publicImages: [], diff --git a/static/preview.png b/static/preview.png new file mode 100644 index 0000000..bb29b5f Binary files /dev/null and b/static/preview.png differ diff --git a/tailwind.config.cjs b/tailwind.config.cjs index b2fb69d..4313fe2 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -49,4 +49,9 @@ module.exports = { rtl: false, darkTheme: "dark", }, + purge: { + options: { + safelist: ['alert-success', 'alert-error', 'alert-info', 'alert-warning'] + } + } }; \ No newline at end of file