From 8b03454d6f28614228e3a0f2752c50b875455b72 Mon Sep 17 00:00:00 2001 From: mStar Date: Mon, 28 Oct 2024 16:33:17 +0100 Subject: [PATCH] More work on post registration form --- frontend-reactive/README.md | 4 +- frontend-reactive/app/components/auth.hbs | 18 +++++++ frontend-reactive/app/components/auth.ts | 14 ++++-- .../app/components/auth/login.hbs | 2 +- .../app/components/auth/login.ts | 18 +++---- .../auth/post-registration-form.hbs | 13 ++--- .../components/auth/post-registration-form.ts | 47 +++++++++++-------- .../app/components/util/mail-entry.hbs | 11 +++++ .../app/components/util/mail-entry.ts | 27 +++++++++++ .../app/components/util/one-of-array.hbs | 2 +- frontend-reactive/app/helpers/equals.ts | 9 ++-- .../app/helpers/is-valid-mail.ts | 14 ++++++ frontend-reactive/app/router.ts | 2 + frontend-reactive/app/routes/auth.ts | 4 ++ frontend-reactive/app/routes/testing.ts | 3 ++ frontend-reactive/app/services/auth.ts | 21 +++++++++ frontend-reactive/app/styles/app.css | 9 +++- .../app/styles/auth/registerForm.css | 3 ++ .../app/styles/util/mailEntry.css | 6 +++ .../app/styles/{ => util}/stringArray.css | 0 frontend-reactive/app/templates/auth.hbs | 2 + .../app/templates/registerform.hbs | 2 +- frontend-reactive/app/templates/testing.hbs | 2 + .../components/util/mail-entry-test.ts | 26 ++++++++++ .../integration/helpers/is-valid-mail-test.ts | 17 +++++++ .../tests/unit/routes/auth-test.ts | 11 +++++ .../tests/unit/routes/testing-test.ts | 11 +++++ 27 files changed, 247 insertions(+), 51 deletions(-) create mode 100644 frontend-reactive/app/components/util/mail-entry.hbs create mode 100644 frontend-reactive/app/components/util/mail-entry.ts create mode 100644 frontend-reactive/app/helpers/is-valid-mail.ts create mode 100644 frontend-reactive/app/routes/auth.ts create mode 100644 frontend-reactive/app/routes/testing.ts create mode 100644 frontend-reactive/app/styles/auth/registerForm.css create mode 100644 frontend-reactive/app/styles/util/mailEntry.css rename frontend-reactive/app/styles/{ => util}/stringArray.css (100%) create mode 100644 frontend-reactive/app/templates/auth.hbs create mode 100644 frontend-reactive/app/templates/testing.hbs create mode 100644 frontend-reactive/tests/integration/components/util/mail-entry-test.ts create mode 100644 frontend-reactive/tests/integration/helpers/is-valid-mail-test.ts create mode 100644 frontend-reactive/tests/unit/routes/auth-test.ts create mode 100644 frontend-reactive/tests/unit/routes/testing-test.ts diff --git a/frontend-reactive/README.md b/frontend-reactive/README.md index 3fb090c..179b560 100644 --- a/frontend-reactive/README.md +++ b/frontend-reactive/README.md @@ -45,7 +45,9 @@ Make use of the many generators for code, try `ember help generate` for more det ### Deploying -Specify what it takes to deploy your app. +1. Build it (see point above) +2. Build the Go server +3. Now you have a binary with everything needed embedded into it ready to use ## Further Reading / Useful Links diff --git a/frontend-reactive/app/components/auth.hbs b/frontend-reactive/app/components/auth.hbs index e69de29..4dcecac 100644 --- a/frontend-reactive/app/components/auth.hbs +++ b/frontend-reactive/app/components/auth.hbs @@ -0,0 +1,18 @@ +
+
+ +
+ +
+ Register +
+
\ No newline at end of file diff --git a/frontend-reactive/app/components/auth.ts b/frontend-reactive/app/components/auth.ts index 65145c3..addaaaa 100644 --- a/frontend-reactive/app/components/auth.ts +++ b/frontend-reactive/app/components/auth.ts @@ -9,7 +9,7 @@ import { } from '@simplewebauthn/browser'; import type AuthService from 'frontend-reactive/services/auth'; -export interface PasskeySignature { +export interface AuthSignature { // The arguments accepted by the component Args: {}; // Any blocks yielded by the component @@ -20,14 +20,15 @@ export interface PasskeySignature { Element: null; } -export default class Auth extends Component { +export default class Auth extends Component { @tracked username: string = ''; @tracked error: string | undefined; - @tracked isLogin = true; + //@tracked isLogin = true; @service declare auth: AuthService; @action async startLogin() { try { + // TODO: Check if account exists and is alowed to login this.auth.startLogin(this.username); } catch (error: any) { this.error = 'Error: ' + error.message; @@ -36,7 +37,12 @@ export default class Auth extends Component { @action async startRegistration() { try { - this.auth.startRegistration(this.username); + // TODO: Check if handle is already taken + await this.auth.startRegistration(this.username); + // After registration, log in immediately to obtain a valid session token + // for the "post" registration data, such as email + await this.auth.startLogin(this.username); + // And after login, } catch (error: any) { this.error = 'Error: ' + error.message; } diff --git a/frontend-reactive/app/components/auth/login.hbs b/frontend-reactive/app/components/auth/login.hbs index 452cb2b..98ad8d6 100644 --- a/frontend-reactive/app/components/auth/login.hbs +++ b/frontend-reactive/app/components/auth/login.hbs @@ -3,7 +3,7 @@ +
- {{!--
--}} - {{!-- --}} - {{!--
--}}
+

Add your preferred pronouns

-

{{this.extracted}}

+

Select the type of being you are. Multiselect is possible

+

Select the default mode for your posts

{{! TODO: Icon, Background, Banner }} - + \ No newline at end of file diff --git a/frontend-reactive/app/components/auth/post-registration-form.ts b/frontend-reactive/app/components/auth/post-registration-form.ts index 500c1dc..9ef5a58 100644 --- a/frontend-reactive/app/components/auth/post-registration-form.ts +++ b/frontend-reactive/app/components/auth/post-registration-form.ts @@ -1,27 +1,29 @@ -import Component from '@glimmer/component'; -import { tracked } from '@glimmer/tracking'; +import { action } from '@ember/object' +import Component from '@glimmer/component' +import { tracked } from '@glimmer/tracking' +import isValidMail from 'frontend-reactive/helpers/is-valid-mail' export interface AuthPostRegistrationFormSignature { // The arguments accepted by the component Args: { - username: string; - }; + username: string + } // Any blocks yielded by the component Blocks: { - default: []; - }; + default: [] + } // The element to which `...attributes` is applied in the component template - Element: null; + Element: null } export default class AuthPostRegistrationForm extends Component { - @tracked displayname: string = this.args.username; - @tracked description: string = ''; - @tracked gender: Array<{ value: string }> = []; + @tracked displayname: string = this.args.username + @tracked description: string = '' + @tracked gender: Array<{ value: string }> = [] @tracked beingTypes: Array<{ - name: string; - checked: boolean; - description: string; + name: string + checked: boolean + description: string }> = [ { name: 'Human', @@ -53,17 +55,22 @@ export default class AuthPostRegistrationForm extends Component = []; - @tracked indexable: boolean = true; + @tracked customProperties: Array<{ key: string; value: string }> = [] + @tracked indexable: boolean = true + @tracked mail = { mail: '', valid: false } genderAddedHandler(newIndex: number) { - console.log('gender added'); + console.log('gender added') } genderRemovedHandler(removedIndex: number) { - console.log('gender removed'); + console.log('gender removed') + } + + @action test() { + console.log(this.mail) } } diff --git a/frontend-reactive/app/components/util/mail-entry.hbs b/frontend-reactive/app/components/util/mail-entry.hbs new file mode 100644 index 0000000..db61b3c --- /dev/null +++ b/frontend-reactive/app/components/util/mail-entry.hbs @@ -0,0 +1,11 @@ +
+ + {{#if this.mailOk}} +

O

+ {{else}} +

X

+ {{/if}} +
\ No newline at end of file diff --git a/frontend-reactive/app/components/util/mail-entry.ts b/frontend-reactive/app/components/util/mail-entry.ts new file mode 100644 index 0000000..7e27b5d --- /dev/null +++ b/frontend-reactive/app/components/util/mail-entry.ts @@ -0,0 +1,27 @@ +import { action } from '@ember/object' +import { map } from '@ember/object/computed' +import Component from '@glimmer/component' +import { tracked } from '@glimmer/tracking' + +const re = /.+@\S+\.\S+/ + +export interface UtilMailEntrySignature { + // The arguments accepted by the component + Args: { + data: { mail: string; valid: boolean } + } + // Any blocks yielded by the component + Blocks: { + default: [] + } + // The element to which `...attributes` is applied in the component template + Element: null +} + +export default class UtilMailEntry extends Component { + @tracked mailOk = this.args.data.valid + @action checkMail() { + this.args.data.valid = re.test(this.args.data.mail) + this.mailOk = this.args.data.valid + } +} diff --git a/frontend-reactive/app/components/util/one-of-array.hbs b/frontend-reactive/app/components/util/one-of-array.hbs index 73ebbf8..4944145 100644 --- a/frontend-reactive/app/components/util/one-of-array.hbs +++ b/frontend-reactive/app/components/util/one-of-array.hbs @@ -1,5 +1,5 @@
- {{#each @elements as |element|}} + {{#each @elements as |element index|}} { + // TODO: Make API call to check if username/handle is already in use + return true; + } + + // Check if a given username is allowed to log in. + // This includes a check for the existence of the username in the first place + // A username may not log in for various reasons, two of which are the account not being approved yet + // or the account being barred login from an admin + // Note: The server enforces this check itself during login. However, it also provides an API endpoint + // for performing this check to allow frontends to have a better UX + async canUsernameLogin(username: string): Promise { + // Can't login into a non-existing account + if (!(await this.doesUsernameExist(username))) return false; + // TODO: Make API call to check if username is allowed to login + return true; + } } // Don't remove this declaration: this is what enables TypeScript to resolve diff --git a/frontend-reactive/app/styles/app.css b/frontend-reactive/app/styles/app.css index a9dbedd..6c4b147 100644 --- a/frontend-reactive/app/styles/app.css +++ b/frontend-reactive/app/styles/app.css @@ -1,11 +1,16 @@ /* Ember supports plain CSS out of the box. More info: https://cli.emberjs.com/release/advanced-use/stylesheets/ */ +/* Note: CSS is fucking stupid. It applies styles not in the order classes are set on an element, +* but in the order they appear in the css files */ + /* @import url("debug.css"); */ @import url("fonts.css"); @import url("colors.css"); -@import url("notes.css"); @import url("util.css"); +@import url("util/stringArray.css"); +@import url("util/mailEntry.css"); @import url("svgs.css"); +@import url("notes.css"); @import url("timeline.css"); @import url("auth.css"); -@import url("stringArray.css"); +@import url("auth/registerForm.css"); diff --git a/frontend-reactive/app/styles/auth/registerForm.css b/frontend-reactive/app/styles/auth/registerForm.css new file mode 100644 index 0000000..f4b736a --- /dev/null +++ b/frontend-reactive/app/styles/auth/registerForm.css @@ -0,0 +1,3 @@ +.registration-form { + background: var(--accent); +} diff --git a/frontend-reactive/app/styles/util/mailEntry.css b/frontend-reactive/app/styles/util/mailEntry.css new file mode 100644 index 0000000..002f1f6 --- /dev/null +++ b/frontend-reactive/app/styles/util/mailEntry.css @@ -0,0 +1,6 @@ +.mail-entry { +} +.mail-ok { +} +.mail-ok { +} diff --git a/frontend-reactive/app/styles/stringArray.css b/frontend-reactive/app/styles/util/stringArray.css similarity index 100% rename from frontend-reactive/app/styles/stringArray.css rename to frontend-reactive/app/styles/util/stringArray.css diff --git a/frontend-reactive/app/templates/auth.hbs b/frontend-reactive/app/templates/auth.hbs new file mode 100644 index 0000000..3238cf1 --- /dev/null +++ b/frontend-reactive/app/templates/auth.hbs @@ -0,0 +1,2 @@ +{{page-title "Auth"}} +{{outlet}} \ No newline at end of file diff --git a/frontend-reactive/app/templates/registerform.hbs b/frontend-reactive/app/templates/registerform.hbs index a052435..d4a0f15 100644 --- a/frontend-reactive/app/templates/registerform.hbs +++ b/frontend-reactive/app/templates/registerform.hbs @@ -1,4 +1,4 @@ {{page-title "RegisterForm"}}
- \ No newline at end of file +{{!----}} \ No newline at end of file diff --git a/frontend-reactive/app/templates/testing.hbs b/frontend-reactive/app/templates/testing.hbs new file mode 100644 index 0000000..f88256b --- /dev/null +++ b/frontend-reactive/app/templates/testing.hbs @@ -0,0 +1,2 @@ +{{page-title "Testing"}} + \ No newline at end of file diff --git a/frontend-reactive/tests/integration/components/util/mail-entry-test.ts b/frontend-reactive/tests/integration/components/util/mail-entry-test.ts new file mode 100644 index 0000000..392ac76 --- /dev/null +++ b/frontend-reactive/tests/integration/components/util/mail-entry-test.ts @@ -0,0 +1,26 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'frontend-reactive/tests/helpers'; +import { render } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +module('Integration | Component | util/mail-entry', function (hooks) { + setupRenderingTest(hooks); + + test('it renders', async function (assert) { + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.set('myAction', function(val) { ... }); + + await render(hbs``); + + assert.dom().hasText(''); + + // Template block usage: + await render(hbs` + + template block text + + `); + + assert.dom().hasText('template block text'); + }); +}); diff --git a/frontend-reactive/tests/integration/helpers/is-valid-mail-test.ts b/frontend-reactive/tests/integration/helpers/is-valid-mail-test.ts new file mode 100644 index 0000000..4252764 --- /dev/null +++ b/frontend-reactive/tests/integration/helpers/is-valid-mail-test.ts @@ -0,0 +1,17 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'frontend-reactive/tests/helpers'; +import { render } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +module('Integration | Helper | isValidMail', function (hooks) { + setupRenderingTest(hooks); + + // TODO: Replace this with your real tests. + test('it renders', async function (assert) { + this.set('inputValue', '1234'); + + await render(hbs`{{is-valid-mail this.inputValue}}`); + + assert.dom().hasText('1234'); + }); +}); diff --git a/frontend-reactive/tests/unit/routes/auth-test.ts b/frontend-reactive/tests/unit/routes/auth-test.ts new file mode 100644 index 0000000..3bf25c5 --- /dev/null +++ b/frontend-reactive/tests/unit/routes/auth-test.ts @@ -0,0 +1,11 @@ +import { module, test } from 'qunit'; +import { setupTest } from 'frontend-reactive/tests/helpers'; + +module('Unit | Route | auth', function (hooks) { + setupTest(hooks); + + test('it exists', function (assert) { + const route = this.owner.lookup('route:auth'); + assert.ok(route); + }); +}); diff --git a/frontend-reactive/tests/unit/routes/testing-test.ts b/frontend-reactive/tests/unit/routes/testing-test.ts new file mode 100644 index 0000000..ce93282 --- /dev/null +++ b/frontend-reactive/tests/unit/routes/testing-test.ts @@ -0,0 +1,11 @@ +import { module, test } from 'qunit'; +import { setupTest } from 'frontend-reactive/tests/helpers'; + +module('Unit | Route | testing', function (hooks) { + setupTest(hooks); + + test('it exists', function (assert) { + const route = this.owner.lookup('route:testing'); + assert.ok(route); + }); +});