From 99f912486aae46c7d406f764f93852362494b30d Mon Sep 17 00:00:00 2001 From: Jess Martin Date: Tue, 26 Jul 2022 16:00:25 -0400 Subject: [PATCH 1/5] Getting registration working Co-authored-by: Brian Ginsburg --- package-lock.json | 172 ++-------------------------- package.json | 2 +- src/components/auth/Register.svelte | 24 +++- src/global.css | 8 ++ src/lib/common/webnative.ts | 43 ++++--- 5 files changed, 59 insertions(+), 190 deletions(-) diff --git a/package-lock.json b/package-lock.json index 79c8645..e32dc85 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,7 @@ "name": "svelte-elemetary-template", "version": "0.1.0", "dependencies": { - "webnative": "0.33.0-alpha-1" + "webnative": "0.33.0-alpha-2" }, "devDependencies": { "@sveltejs/adapter-static": "1.0.0-next.36", @@ -44,9 +44,6 @@ "@babel/highlight": "^7.10.4" } }, - "node_modules/@babel/highlight": { - "dev": true - }, "node_modules/@cspotcode/source-map-support": { "version": "0.8.1", "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==", @@ -1699,18 +1696,6 @@ "esbuild-windows-arm64": "0.14.49" } }, - "node_modules/esbuild-android-64": { - "dev": true, - "optional": true - }, - "node_modules/esbuild-android-arm64": { - "dev": true, - "optional": true - }, - "node_modules/esbuild-darwin-64": { - "dev": true, - "optional": true - }, "node_modules/esbuild-darwin-arm64": { "version": "0.14.49", "integrity": "sha512-XMaqDxO846srnGlUSJnwbijV29MTKUATmOLyQSfswbK/2X5Uv28M9tTLUJcKKxzoo9lnkYPsx2o8EJcTYwCs/A==", @@ -1726,70 +1711,6 @@ "node": ">=12" } }, - "node_modules/esbuild-freebsd-64": { - "dev": true, - "optional": true - }, - "node_modules/esbuild-freebsd-arm64": { - "dev": true, - "optional": true - }, - "node_modules/esbuild-linux-32": { - "dev": true, - "optional": true - }, - "node_modules/esbuild-linux-64": { - "dev": true, - "optional": true - }, - "node_modules/esbuild-linux-arm": { - "dev": true, - "optional": true - }, - "node_modules/esbuild-linux-arm64": { - "dev": true, - "optional": true - }, - "node_modules/esbuild-linux-mips64le": { - "dev": true, - "optional": true - }, - "node_modules/esbuild-linux-ppc64le": { - "dev": true, - "optional": true - }, - "node_modules/esbuild-linux-riscv64": { - "dev": true, - "optional": true - }, - "node_modules/esbuild-linux-s390x": { - "dev": true, - "optional": true - }, - "node_modules/esbuild-netbsd-64": { - "dev": true, - "optional": true - }, - "node_modules/esbuild-openbsd-64": { - "dev": true, - "optional": true - }, - "node_modules/esbuild-sunos-64": { - "dev": true, - "optional": true - }, - "node_modules/esbuild-windows-32": { - "dev": true, - "optional": true - }, - "node_modules/esbuild-windows-64": { - "dev": true, - "optional": true - }, - "node_modules/esbuild-windows-arm64": { - "dev": true, - "optional": true - }, "node_modules/escalade": { "version": "3.1.1", "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==", @@ -4758,9 +4679,9 @@ } }, "node_modules/webnative": { - "version": "0.33.0-alpha-1", - "resolved": "https://registry.npmjs.org/webnative/-/webnative-0.33.0-alpha-1.tgz", - "integrity": "sha512-g5xg5gkDScTre5IrhcJgWhEgYlI/pri2OTxZxLq832cqgu42gJ9Jzs7B+hgSEDHWB+ROQWCe+RJ9H0dlhTKORw==", + "version": "0.33.0-alpha-2", + "resolved": "https://registry.npmjs.org/webnative/-/webnative-0.33.0-alpha-2.tgz", + "integrity": "sha512-S9UzS9PKTdgaoplBrlgsk5T7IYcpKMbTxXzg1jxkrVPiHJpuBLC5l+t4GkLTMyalaRMBO6JzlL5qaE51j3j2dw==", "dependencies": { "@ipld/dag-cbor": "^7.0.0", "@ipld/dag-pb": "^2.1.15", @@ -4955,9 +4876,6 @@ "@babel/highlight": "^7.10.4" } }, - "@babel/highlight": { - "dev": true - }, "@cspotcode/source-map-support": { "version": "0.8.1", "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==", @@ -6126,88 +6044,12 @@ "esbuild-windows-arm64": "0.14.49" } }, - "esbuild-android-64": { - "dev": true, - "optional": true - }, - "esbuild-android-arm64": { - "dev": true, - "optional": true - }, - "esbuild-darwin-64": { - "dev": true, - "optional": true - }, "esbuild-darwin-arm64": { "version": "0.14.49", "integrity": "sha512-XMaqDxO846srnGlUSJnwbijV29MTKUATmOLyQSfswbK/2X5Uv28M9tTLUJcKKxzoo9lnkYPsx2o8EJcTYwCs/A==", "dev": true, "optional": true }, - "esbuild-freebsd-64": { - "dev": true, - "optional": true - }, - "esbuild-freebsd-arm64": { - "dev": true, - "optional": true - }, - "esbuild-linux-32": { - "dev": true, - "optional": true - }, - "esbuild-linux-64": { - "dev": true, - "optional": true - }, - "esbuild-linux-arm": { - "dev": true, - "optional": true - }, - "esbuild-linux-arm64": { - "dev": true, - "optional": true - }, - "esbuild-linux-mips64le": { - "dev": true, - "optional": true - }, - "esbuild-linux-ppc64le": { - "dev": true, - "optional": true - }, - "esbuild-linux-riscv64": { - "dev": true, - "optional": true - }, - "esbuild-linux-s390x": { - "dev": true, - "optional": true - }, - "esbuild-netbsd-64": { - "dev": true, - "optional": true - }, - "esbuild-openbsd-64": { - "dev": true, - "optional": true - }, - "esbuild-sunos-64": { - "dev": true, - "optional": true - }, - "esbuild-windows-32": { - "dev": true, - "optional": true - }, - "esbuild-windows-64": { - "dev": true, - "optional": true - }, - "esbuild-windows-arm64": { - "dev": true, - "optional": true - }, "escalade": { "version": "3.1.1", "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==", @@ -8227,9 +8069,9 @@ "peer": true }, "webnative": { - "version": "0.33.0-alpha-1", - "resolved": "https://registry.npmjs.org/webnative/-/webnative-0.33.0-alpha-1.tgz", - "integrity": "sha512-g5xg5gkDScTre5IrhcJgWhEgYlI/pri2OTxZxLq832cqgu42gJ9Jzs7B+hgSEDHWB+ROQWCe+RJ9H0dlhTKORw==", + "version": "0.33.0-alpha-2", + "resolved": "https://registry.npmjs.org/webnative/-/webnative-0.33.0-alpha-2.tgz", + "integrity": "sha512-S9UzS9PKTdgaoplBrlgsk5T7IYcpKMbTxXzg1jxkrVPiHJpuBLC5l+t4GkLTMyalaRMBO6JzlL5qaE51j3j2dw==", "requires": { "@ipld/dag-cbor": "^7.0.0", "@ipld/dag-pb": "^2.1.15", diff --git a/package.json b/package.json index 78874fb..18f2a07 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,6 @@ ] }, "dependencies": { - "webnative": "0.33.0-alpha-1" + "webnative": "0.33.0-alpha-2" } } diff --git a/src/components/auth/Register.svelte b/src/components/auth/Register.svelte index 924b2da..6cdaa8b 100644 --- a/src/components/auth/Register.svelte +++ b/src/components/auth/Register.svelte @@ -1,10 +1,15 @@ @@ -54,6 +67,14 @@ {/if} {/if} + {#if registrationSuccess} + + {/if}
Register diff --git a/src/global.css b/src/global.css index 42b90b8..d4ce8d6 100644 --- a/src/global.css +++ b/src/global.css @@ -21,3 +21,11 @@ input[type='checkbox']:checked::before { .modal-box { @apply p-8; } + +.label { + @apply px-0; +} + +.label-text-alt { + @apply text-sm; +} diff --git a/src/lib/common/webnative.ts b/src/lib/common/webnative.ts index e947f62..2a4d488 100644 --- a/src/lib/common/webnative.ts +++ b/src/lib/common/webnative.ts @@ -1,44 +1,28 @@ import * as webnative from 'webnative' -import type FileSystem from 'webnative/fs/index' -import { USE_WNFS_IMPLEMENTATION } from 'webnative/auth/implementation/use-wnfs' +// import type FileSystem from 'webnative/fs/index' import { setup } from 'webnative' import { asyncDebounce } from '$lib/common/utils' // runfission.net = staging setup.endpoints({ api: 'https://runfission.net', user: 'fissionuser.net' }) -setup.setImplementations({ auth: USE_WNFS_IMPLEMENTATION.auth }) - -let state: webnative.State - -const fissionInit = { - permissions: { - app: { - name: 'app-name', - creator: 'creator-name' - }, - // Ask the user permission to additional filesystem paths - fs: { - // private: [webnative.path.directory('Documents', 'Contacts')], - } - } -} +let state: webnative.AppState // TODO: Add a flag or script to turn debugging on/off setup.debug({ enabled: true }) export const initialize = async (): Promise => { try { - const st = await webnative.initialise(fissionInit) + const st = await webnative.app({ useWnfs: true }) state = st switch (state.scenario) { - case webnative.Scenario.NotAuthorised: + case webnative.AppScenario.NotAuthed: console.log('Not logged in') break - case webnative.Scenario.Continuation: + case webnative.AppScenario.Authed: console.log('Logged in') break @@ -62,12 +46,25 @@ export const isUsernameValid = async (username: string): Promise => { return webnative.account.isUsernameValid(username) } -const debouncedIsUsernameAvailable = asyncDebounce(webnative.account.isUsernameAvailable, 300) +const debouncedIsUsernameAvailable = asyncDebounce( + webnative.account.isUsernameAvailable, + 300 +) -export const isUsernameAvailable = async (username: string): Promise => { +export const isUsernameAvailable = async ( + username: string +): Promise => { return debouncedIsUsernameAvailable(username) } +export const register = async (username: string): Promise => { + const { success } = await webnative.account.register({ + username, + email: 'null@null.com' + }) + return success +} + // interface StateFS { // fs?: FileSystem // } From afc887befc6aaee23c3ee6740a51f355dee11b44 Mon Sep 17 00:00:00 2001 From: Jess Martin Date: Wed, 27 Jul 2022 12:06:06 -0400 Subject: [PATCH 2/5] Error messages on "shared computer"; spinner --- src/components/auth/Register.svelte | 42 +++++++++++++++++++++-------- 1 file changed, 31 insertions(+), 11 deletions(-) diff --git a/src/components/auth/Register.svelte b/src/components/auth/Register.svelte index 6cdaa8b..070d626 100644 --- a/src/components/auth/Register.svelte +++ b/src/components/auth/Register.svelte @@ -10,8 +10,10 @@ let usernameValid = true let usernameAvailable = true let registrationSuccess = true + let checkingUsername = false const checkUsername = async (event: Event) => { + checkingUsername = true const { value } = event.target as HTMLInputElement username = value console.log(username) @@ -22,6 +24,7 @@ usernameAvailable = await isUsernameAvailable(username) console.log(username, ' is available: ', usernameAvailable) } + checkingUsername = false } const registerUser = async (event: Event) => { @@ -40,17 +43,25 @@

Choose a username

- +
+ + {#if checkingUsername} + + {/if} +
{#if !(username.length === 0)} + {/if} - {#if registrationSuccess} + {#if !registrationSuccess} + {/if} +
+ +
From a2bed7a6b3f4233f9ee03d3dedf67775262da30b Mon Sep 17 00:00:00 2001 From: Jess Martin Date: Wed, 27 Jul 2022 12:16:54 -0400 Subject: [PATCH 3/5] Remove custom checkbox code; use DaisyUI --- src/components/auth/Register.svelte | 9 +++++---- src/global.css | 16 ---------------- 2 files changed, 5 insertions(+), 20 deletions(-) diff --git a/src/components/auth/Register.svelte b/src/components/auth/Register.svelte index 070d626..304754d 100644 --- a/src/components/auth/Register.svelte +++ b/src/components/auth/Register.svelte @@ -92,19 +92,20 @@
diff --git a/src/global.css b/src/global.css index d4ce8d6..d7dbc06 100644 --- a/src/global.css +++ b/src/global.css @@ -2,22 +2,6 @@ @tailwind components; @tailwind utilities; -input[type='checkbox']::before { - content: ''; - width: 0.65em; - height: 0.65em; - transform: scale(0); - transition: 60ms transform ease-in-out; - box-shadow: inset 1em 1em #fff; - transform-origin: bottom left; - clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); - cursor: pointer; -} - -input[type='checkbox']:checked::before { - transform: scale(1); -} - .modal-box { @apply p-8; } From 1d7ef2d81954abc534976c0ef551fdb588557187 Mon Sep 17 00:00:00 2001 From: Jess Martin Date: Wed, 27 Jul 2022 12:38:08 -0400 Subject: [PATCH 4/5] Add green and red checks for status --- src/components/auth/Register.svelte | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/components/auth/Register.svelte b/src/components/auth/Register.svelte index 304754d..77dc264 100644 --- a/src/components/auth/Register.svelte +++ b/src/components/auth/Register.svelte @@ -12,6 +12,9 @@ let registrationSuccess = true let checkingUsername = false + let checkIcon = ` ` + let xIcon = ` ` + const checkUsername = async (event: Event) => { checkingUsername = true const { value } = event.target as HTMLInputElement @@ -58,6 +61,16 @@ class="rounded-lg border-t-2 border-l-2 border-slate-600 w-4 h-4 block absolute top-4 right-4 animate-spin" /> {/if} + {#if !(username.length === 0) && usernameAvailable && usernameValid && !checkingUsername} + + {@html checkIcon} + + {/if} + {#if !(username.length === 0) && !checkingUsername && !(usernameAvailable && usernameValid)} + + {@html xIcon} + + {/if}
{#if !(username.length === 0)} From f3cafb40be0b56e39fd88d0c6556d0ef1f4a9308 Mon Sep 17 00:00:00 2001 From: Jess Martin Date: Wed, 27 Jul 2022 12:59:22 -0400 Subject: [PATCH 5/5] Redirect to LinkDevice on successful registration --- package-lock.json | 14 +++++++------- package.json | 2 +- src/components/auth/LinkDevice.svelte | 1 + src/components/auth/Register.svelte | 3 +-- src/lib/common/webnative.ts | 7 +++---- src/routes/linkDevice.svelte | 5 +++++ 6 files changed, 18 insertions(+), 14 deletions(-) create mode 100644 src/components/auth/LinkDevice.svelte create mode 100644 src/routes/linkDevice.svelte diff --git a/package-lock.json b/package-lock.json index e32dc85..57cb645 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,7 @@ "name": "svelte-elemetary-template", "version": "0.1.0", "dependencies": { - "webnative": "0.33.0-alpha-2" + "webnative": "0.33.0-alpha-3" }, "devDependencies": { "@sveltejs/adapter-static": "1.0.0-next.36", @@ -4679,9 +4679,9 @@ } }, "node_modules/webnative": { - "version": "0.33.0-alpha-2", - "resolved": "https://registry.npmjs.org/webnative/-/webnative-0.33.0-alpha-2.tgz", - "integrity": "sha512-S9UzS9PKTdgaoplBrlgsk5T7IYcpKMbTxXzg1jxkrVPiHJpuBLC5l+t4GkLTMyalaRMBO6JzlL5qaE51j3j2dw==", + "version": "0.33.0-alpha-3", + "resolved": "https://registry.npmjs.org/webnative/-/webnative-0.33.0-alpha-3.tgz", + "integrity": "sha512-fx7ZNk1eKdt88RHG90fKg99xhBKsPIizOEgggr0HYrbM9G9O4vXGabt48QQF6K9pTuZmrrSW/RyqR/bxCHRc6A==", "dependencies": { "@ipld/dag-cbor": "^7.0.0", "@ipld/dag-pb": "^2.1.15", @@ -8069,9 +8069,9 @@ "peer": true }, "webnative": { - "version": "0.33.0-alpha-2", - "resolved": "https://registry.npmjs.org/webnative/-/webnative-0.33.0-alpha-2.tgz", - "integrity": "sha512-S9UzS9PKTdgaoplBrlgsk5T7IYcpKMbTxXzg1jxkrVPiHJpuBLC5l+t4GkLTMyalaRMBO6JzlL5qaE51j3j2dw==", + "version": "0.33.0-alpha-3", + "resolved": "https://registry.npmjs.org/webnative/-/webnative-0.33.0-alpha-3.tgz", + "integrity": "sha512-fx7ZNk1eKdt88RHG90fKg99xhBKsPIizOEgggr0HYrbM9G9O4vXGabt48QQF6K9pTuZmrrSW/RyqR/bxCHRc6A==", "requires": { "@ipld/dag-cbor": "^7.0.0", "@ipld/dag-pb": "^2.1.15", diff --git a/package.json b/package.json index 18f2a07..c1dc764 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,6 @@ ] }, "dependencies": { - "webnative": "0.33.0-alpha-2" + "webnative": "0.33.0-alpha-3" } } diff --git a/src/components/auth/LinkDevice.svelte b/src/components/auth/LinkDevice.svelte new file mode 100644 index 0000000..868578f --- /dev/null +++ b/src/components/auth/LinkDevice.svelte @@ -0,0 +1 @@ +

Link Device

diff --git a/src/components/auth/Register.svelte b/src/components/auth/Register.svelte index 77dc264..3453f2d 100644 --- a/src/components/auth/Register.svelte +++ b/src/components/auth/Register.svelte @@ -32,9 +32,8 @@ const registerUser = async (event: Event) => { registrationSuccess = await register(username) - console.log('registration success: ', registrationSuccess) if (registrationSuccess) { - // Redirect to device linking? + window.location.href = '/linkDevice' } } diff --git a/src/lib/common/webnative.ts b/src/lib/common/webnative.ts index 2a4d488..87e7339 100644 --- a/src/lib/common/webnative.ts +++ b/src/lib/common/webnative.ts @@ -58,10 +58,9 @@ export const isUsernameAvailable = async ( } export const register = async (username: string): Promise => { - const { success } = await webnative.account.register({ - username, - email: 'null@null.com' - }) + await initialize() + const { success } = await webnative.account.register({ username }) + return success } diff --git a/src/routes/linkDevice.svelte b/src/routes/linkDevice.svelte new file mode 100644 index 0000000..15a2b99 --- /dev/null +++ b/src/routes/linkDevice.svelte @@ -0,0 +1,5 @@ + + +