From 1fb924f59cb49b4545c1ac3f773ad75d2146cbf6 Mon Sep 17 00:00:00 2001
From: mStar <me@mstar.dev>
Date: Tue, 29 Oct 2024 13:23:04 +0100
Subject: [PATCH] Good progress on styling post-registration form

---
 .../auth/post-registration-form.hbs           | 75 ++++++++++++-------
 .../components/auth/post-registration-form.ts | 48 ++++++------
 .../app/components/util/mail-entry.hbs        | 13 +++-
 .../app/components/util/mail-entry.ts         | 26 +++----
 .../app/components/util/multiselect.hbs       |  1 +
 .../app/components/util/string-array.hbs      |  3 +-
 frontend-reactive/app/helpers/equals.ts       | 10 +--
 frontend-reactive/app/routes/index.ts         |  3 +
 frontend-reactive/app/styles/app.css          |  2 +-
 .../app/styles/auth/registerForm.css          | 74 +++++++++++++++++-
 frontend-reactive/app/styles/util.css         |  4 +
 .../app/styles/util/mailEntry.css             | 37 ++++++++-
 .../app/templates/application.hbs             |  4 +-
 frontend-reactive/app/templates/auth.hbs      |  2 +-
 frontend-reactive/app/templates/index.hbs     |  2 +
 .../app/templates/registerform.hbs            |  4 +-
 .../tests/unit/routes/index-test.ts           | 11 +++
 17 files changed, 234 insertions(+), 85 deletions(-)
 create mode 100644 frontend-reactive/app/routes/index.ts
 create mode 100644 frontend-reactive/app/templates/index.hbs
 create mode 100644 frontend-reactive/tests/unit/routes/index-test.ts

diff --git a/frontend-reactive/app/components/auth/post-registration-form.hbs b/frontend-reactive/app/components/auth/post-registration-form.hbs
index 2b5027f..3f67e49 100644
--- a/frontend-reactive/app/components/auth/post-registration-form.hbs
+++ b/frontend-reactive/app/components/auth/post-registration-form.hbs
@@ -1,47 +1,63 @@
 <div class="registration-form">
   <h1 class="registration-form-username">username: {{this.args.username}}</h1>
-  <div class="registration-form-displayname-wrapper">
-    <label>
-      Displayname
-      <Input
-        @type="text"
-        @value={{this.displayname}}
-        placeholder="Displayname"
-      />
-    </label>
+  <div class="registration-form-name-mail-wrapper">
+    <div class="registration-form-displayname-wrapper">
+      <label>
+        Displayname
+        <Input
+          @type="text"
+          @value={{this.displayname}}
+          placeholder="Displayname"
+        />
+      </label>
+    </div>
+    <Util::MailEntry
+      @wrapper-classes="registration-form-mail-wrapper"
+      @input-classes="registration-form-mail-input"
+      @data={{this.mail}}
+    />
   </div>
-  <Util::MailEntry @data={{this.mail}}/>
   <div class="registration-form-description-wrapper">
-    <label>
+    <label for="registration-description">
       Description
-      <Input
-        @type="text"
-        @value={{this.description}}
-        placeholder="Account description"
-      />
     </label>
+    <Textarea
+      id="registration-description"
+      @value={{this.description}}
+      placeholder="Account description"
+    />
   </div>
-  <div class="registration-form-gender-wrapper">
-    <p class="registration-form-gender-info">Add your preferred pronouns</p>
+  <fieldset class="registration-form-gender-wrapper">
+    <legend class="registration-form-gender-info">Add your preferred pronouns</legend>
     <Util::StringArray
       @list={{this.gender}}
       @onNewElement={{this.genderAddedHandler}}
       @onDeleteElement={{this.genderRemovedHandler}}
+      @wrapper-classes=""
+      @element-wrapper-classes=""
+      @element-classes=""
+      @remove-element-classes=""
+      @add-element-classes=""
     />
-  </div>
-  <div class="register-form-being-wrapper">
-    <p class="registration-form-being-info">Select the type of being you are. Multiselect is possible</p>
-    <Util::Multiselect @elements={{this.beingTypes}} />
-  </div>
-  <div class="register-form-default-post-mode-wrapper">
-    <p class="registration-form-default-post-mode-info">Select the default mode for your posts</p>
+  </fieldset>
+  <fieldset class="register-form-being-wrapper">
+    <legend class="registration-form-being-info">Select the type of being you are. Multiselect is possible</legend>
+    <Util::Multiselect
+      @elements={{this.beingTypes}}
+      @wrapper-class=""
+      @label-class=""
+      @input-classes=""
+    />
+  </fieldset>
+  <fieldset class="register-form-default-post-mode-wrapper">
+    <legend class="registration-form-default-post-mode-info">Select the default mode for your posts</legend>
     <Util::OneOfArray
       @elements={{array "Public" "Local" "Followers" "Direct"}}
       @selected={{this.defaultpostmode}}
       @name="default-post-mode"
       @required={{true}}
     />
-  </div>
+  </fieldset>
   <div class="register-form-follow-approval-wrapper">
     <label>
       Require approval for follow requests
@@ -58,8 +74,9 @@
       <Input @type="checkbox" name="Indexable" @checked={{this.indexable}} />
     </label>
   </div>
-  <div class="register-form-custom-fields-wrapper">
+  <fieldset class="register-form-custom-fields-wrapper">
+    <legend>Custom fields</legend>
     <Util::MapEdit @list={{this.customProperties}} />
-  </div>
-  {{! TODO: Icon, Background, Banner }}
+  </fieldset>
+  {{! TODO: Icon, Background, Banner, Bluesky toggle }}
 </div>
\ 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 9ef5a58..8cd271b 100644
--- a/frontend-reactive/app/components/auth/post-registration-form.ts
+++ b/frontend-reactive/app/components/auth/post-registration-form.ts
@@ -1,29 +1,29 @@
-import { action } from '@ember/object'
-import Component from '@glimmer/component'
-import { tracked } from '@glimmer/tracking'
-import isValidMail from 'frontend-reactive/helpers/is-valid-mail'
+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<AuthPostRegistrationFormSignature> {
-  @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',
@@ -55,22 +55,22 @@ export default class AuthPostRegistrationForm extends Component<AuthPostRegistra
       description: 'Doll',
       checked: false,
     },
-  ]
-  @tracked defaultpostmode: string = 'Public'
-  @tracked followapproval: boolean = false
+  ];
+  @tracked defaultpostmode: string = 'Public';
+  @tracked followapproval: boolean = false;
   // Actual custom properties stored in here
-  @tracked customProperties: Array<{ key: string; value: string }> = []
-  @tracked indexable: boolean = true
-  @tracked mail = { mail: '', valid: false }
+  @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)
+    console.log(this.mail);
   }
 }
diff --git a/frontend-reactive/app/components/util/mail-entry.hbs b/frontend-reactive/app/components/util/mail-entry.hbs
index db61b3c..ca4f51a 100644
--- a/frontend-reactive/app/components/util/mail-entry.hbs
+++ b/frontend-reactive/app/components/util/mail-entry.hbs
@@ -1,11 +1,18 @@
 <div class="mail-entry {{@wrapper-classes}}">
   <label>
     Email
-    <Input @type="text" @value={{this.args.data.mail}} placeholder="Email address" {{on "change" (fn this.checkMail)}}/>
+    <!--<div class="filling-spacer"/>-->
+    <Input
+      class="mail-input {{if this.mailOk "mail-input-ok" "mail-input-error"}} {{@input-classes}}"
+      @type="text"
+      @value={{this.args.data.mail}}
+      placeholder="Email address"
+      {{on "change" this.checkMail}}
+    />
   </label>
   {{#if this.mailOk}}
-    <p class="mail-ok">O</p>
+    <p class="mail-ok mail-status">&#10004;</p>
   {{else}}
-    <p class="mail-error">X</p>
+    <p class="mail-error mail-status">X</p>
   {{/if}}
 </div>
\ 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
index 7e27b5d..38c0e71 100644
--- a/frontend-reactive/app/components/util/mail-entry.ts
+++ b/frontend-reactive/app/components/util/mail-entry.ts
@@ -1,27 +1,27 @@
-import { action } from '@ember/object'
-import { map } from '@ember/object/computed'
-import Component from '@glimmer/component'
-import { tracked } from '@glimmer/tracking'
+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+/
+const re = /.+@\S+\.\S+/;
 
 export interface UtilMailEntrySignature {
   // The arguments accepted by the component
   Args: {
-    data: { mail: string; valid: boolean }
-  }
+    data: { mail: string; valid: boolean };
+  };
   // 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 UtilMailEntry extends Component<UtilMailEntrySignature> {
-  @tracked mailOk = this.args.data.valid
+  @tracked mailOk = this.args.data.valid;
   @action checkMail() {
-    this.args.data.valid = re.test(this.args.data.mail)
-    this.mailOk = this.args.data.valid
+    this.args.data.valid = re.test(this.args.data.mail);
+    this.mailOk = this.args.data.valid;
   }
 }
diff --git a/frontend-reactive/app/components/util/multiselect.hbs b/frontend-reactive/app/components/util/multiselect.hbs
index b8b9a16..5a857c5 100644
--- a/frontend-reactive/app/components/util/multiselect.hbs
+++ b/frontend-reactive/app/components/util/multiselect.hbs
@@ -5,6 +5,7 @@
       <Input
         @type="checkbox"
         name="{{element.name}}"
+        class="{{@input-classes}}"
         @checked={{element.checked}}
         {{on "change" this.onChange}}
       />
diff --git a/frontend-reactive/app/components/util/string-array.hbs b/frontend-reactive/app/components/util/string-array.hbs
index f54b760..2c5098d 100644
--- a/frontend-reactive/app/components/util/string-array.hbs
+++ b/frontend-reactive/app/components/util/string-array.hbs
@@ -2,8 +2,9 @@
   <ul>
     {{#each this.args.list as |element index|}}
       <li>
-        <div class="string-array-element-wrapper">
+        <div class="string-array-element-wrapper {{@element-wrapper-classes}}">
           <Input
+            class="{{@element-classes}}"
             @type="text"
             @value={{element.value}}
           />
diff --git a/frontend-reactive/app/helpers/equals.ts b/frontend-reactive/app/helpers/equals.ts
index 7d13647..20d7592 100644
--- a/frontend-reactive/app/helpers/equals.ts
+++ b/frontend-reactive/app/helpers/equals.ts
@@ -1,7 +1,7 @@
-import { helper } from '@ember/component/helper'
+import { helper } from '@ember/component/helper';
 
 export default helper(function equals(args) {
-  if (args.length != 2) return false
-  console.log(args[0], args[1])
-  return args[0] == args[1]
-})
+  if (args.length != 2) return false;
+  console.log(args[0], args[1]);
+  return args[0] == args[1];
+});
diff --git a/frontend-reactive/app/routes/index.ts b/frontend-reactive/app/routes/index.ts
new file mode 100644
index 0000000..accaec9
--- /dev/null
+++ b/frontend-reactive/app/routes/index.ts
@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default class IndexRoute extends Route {}
diff --git a/frontend-reactive/app/styles/app.css b/frontend-reactive/app/styles/app.css
index 6c4b147..9184054 100644
--- a/frontend-reactive/app/styles/app.css
+++ b/frontend-reactive/app/styles/app.css
@@ -3,7 +3,7 @@
 /* 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("debug.css");*/
 @import url("fonts.css");
 @import url("colors.css");
 @import url("util.css");
diff --git a/frontend-reactive/app/styles/auth/registerForm.css b/frontend-reactive/app/styles/auth/registerForm.css
index f4b736a..505b52b 100644
--- a/frontend-reactive/app/styles/auth/registerForm.css
+++ b/frontend-reactive/app/styles/auth/registerForm.css
@@ -1,3 +1,75 @@
 .registration-form {
-  background: var(--accent);
+  background: var(--secondary);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: fit-content;
+}
+
+.registration-form-name-mail-wrapper {
+  width: fit-content;
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+}
+
+.registration-form-username {
+  width: max-content;
+}
+
+.registration-form-displayname-wrapper {
+  display: flex;
+}
+
+.registration-form-mail-wrapper {
+  display: flex;
+  width: max-content;
+  flex-direction: row;
+}
+
+.registration-form-mail-input {
+  width: max-content;
+  /*display: flex;*/
+  /*flex-grow: 1;*/
+}
+
+.registration-form-description-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+.registration-form-gender-wrapper {
+}
+
+.registration-form-gender-info {
+}
+
+.register-form-being-wrapper {
+  margin: 1em;
+}
+
+.registration-form-being-info {
+}
+
+.register-form-default-post-mode-wrapper {
+  margin-bottom: 1em;
+}
+
+.registration-form-default-post-mode-info {
+}
+
+.register-form-follow-approval-wrapper {
+  margin-bottom: 0.5em;
+}
+
+.register-form-indexable-wrapper {
+  margin-bottom: 0.5em;
+}
+
+.register-form-custom-fields-wrapper {
+  flex-grow: 1;
+  width: 80%;
+  margin-bottom: 1em;
 }
diff --git a/frontend-reactive/app/styles/util.css b/frontend-reactive/app/styles/util.css
index b35bccb..942c6de 100644
--- a/frontend-reactive/app/styles/util.css
+++ b/frontend-reactive/app/styles/util.css
@@ -15,3 +15,7 @@
   margin-top: 0.2em;
   margin-bottom: 0.2em;
 }
+
+.filling-spacer {
+  flex-grow: 1;
+}
diff --git a/frontend-reactive/app/styles/util/mailEntry.css b/frontend-reactive/app/styles/util/mailEntry.css
index 002f1f6..ce01e49 100644
--- a/frontend-reactive/app/styles/util/mailEntry.css
+++ b/frontend-reactive/app/styles/util/mailEntry.css
@@ -1,6 +1,41 @@
 .mail-entry {
+  display: flex;
+  flex-direction: row;
 }
+
+.mail-input {
+  outline: 0;
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+
+.mail-input-ok {
+  border: 1px solid green;
+  box-shadow: 0px 0px 5px green;
+}
+
+.mail-input-error {
+  border: 1px solid red;
+  box-shadow: 0px 0px 5px red;
+}
+
+.mail-status {
+  /*margin: 0;*/
+  margin-top: 0.75em;
+  margin-left: 0.4em;
+}
+
 .mail-ok {
+  color: green;
+  /*margin-top: -0.25lh;*/
+  /*margin-bottom: -0.28lh;*/
+  font-size: 0.9lh;
+  margin: 0;
+  margin-left: 0.2em;
 }
-.mail-ok {
+
+.mail-error {
+  color: red;
+  margin-bottom: 0;
+  margin-left: 0.6em;
 }
diff --git a/frontend-reactive/app/templates/application.hbs b/frontend-reactive/app/templates/application.hbs
index 274f120..afb373c 100644
--- a/frontend-reactive/app/templates/application.hbs
+++ b/frontend-reactive/app/templates/application.hbs
@@ -1,4 +1,2 @@
 {{page-title "FrontendReactive"}}
-
-{{outlet}}{{!----}}
-{{!--<Timeline @notes={{@model.notes}} />--}}
\ No newline at end of file
+{{outlet}}
\ No newline at end of file
diff --git a/frontend-reactive/app/templates/auth.hbs b/frontend-reactive/app/templates/auth.hbs
index 3238cf1..b19cda2 100644
--- a/frontend-reactive/app/templates/auth.hbs
+++ b/frontend-reactive/app/templates/auth.hbs
@@ -1,2 +1,2 @@
 {{page-title "Auth"}}
-{{outlet}}
\ No newline at end of file
+<Auth::Login />
\ No newline at end of file
diff --git a/frontend-reactive/app/templates/index.hbs b/frontend-reactive/app/templates/index.hbs
new file mode 100644
index 0000000..40a5bca
--- /dev/null
+++ b/frontend-reactive/app/templates/index.hbs
@@ -0,0 +1,2 @@
+{{page-title "Index"}}
+<Timeline @notes={{@model.notes}} />
\ No newline at end of file
diff --git a/frontend-reactive/app/templates/registerform.hbs b/frontend-reactive/app/templates/registerform.hbs
index d4a0f15..d021040 100644
--- a/frontend-reactive/app/templates/registerform.hbs
+++ b/frontend-reactive/app/templates/registerform.hbs
@@ -1,4 +1,2 @@
 {{page-title "RegisterForm"}}
-<Auth::Login />
-<br>
-{{!--<Auth::PostRegistrationForm @username="bob" />--}}
\ No newline at end of file
+<Auth::PostRegistrationForm @username="bob" />
\ No newline at end of file
diff --git a/frontend-reactive/tests/unit/routes/index-test.ts b/frontend-reactive/tests/unit/routes/index-test.ts
new file mode 100644
index 0000000..a9ea71d
--- /dev/null
+++ b/frontend-reactive/tests/unit/routes/index-test.ts
@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'frontend-reactive/tests/helpers';
+
+module('Unit | Route | index', function (hooks) {
+  setupTest(hooks);
+
+  test('it exists', function (assert) {
+    const route = this.owner.lookup('route:index');
+    assert.ok(route);
+  });
+});