Getting work done. Registration form taking shape

Still needs styling and some more elements, but mostly usable now

frontend-reactive/app/components/auth/registration-form.hbs

@@ -1,10 +1,16 @@
 <div class="registration-form">
-  <p class="registration-form-username">{{this.username}}</p>
-
+  <h1 class="registration-form-username">username: {{this.args.username}}</h1>
+  <div class="registration-form-displayname">
     <label>
       Displayname
-    <Input @type="text" @value={{this.displayname}} placeholder="Displayname" />
+      <Input
+        @type="text"
+        @value={{this.displayname}}
+        placeholder="Displayname"
+      />
     </label>
+  </div>
+  <div class="registration-form-description">
     <label>
       Description
       <Input
@@ -13,6 +19,51 @@
         placeholder="Account description"
       />
     </label>
-  <Util::StringArray @list={{this.gender}} />
-  <p>{{this.extracted}}</p>
+  </div>
+  <div class="registration-form-mail">
+    <label>
+      Email
+      <Input @type="text" @value={{this.email}} placeholder="Email address" />
+    </label>
+  </div>
+  <div class="registration-form-gender">
+    <Util::StringArray
+      @list={{this.gender}}
+      @onNewElement={{this.genderAddedHandler}}
+      @onDeleteElement={{this.genderRemovedHandler}}
+    />
+  </div>
+  <p>{{this.extracted}}</p>
+  <div class="register-form-being">
+    <Util::Multiselect @elements={{this.beingTypes}} />
+  </div>
+  <div class="register-form-default-post-mode">
+    <Util::OneOfArray
+      @elements={{array "Public" "Local" "Followers" "Direct"}}
+      @selected={{this.defaultpostmode}}
+      @name="default-post-mode"
+      @required={{true}}
+    />
+  </div>
+  <div class="register-form-follow-approval">
+    <label>
+      Require approval for follow requests
+      <Input
+        @type="checkbox"
+        name="Follow approval"
+        @checked={{this.args.followapproval}}
+      />
+    </label>
+  </div>
+  <div class="register-form-indexable">
+    <label>
+      Whether the account is indexable
+      <Input @type="checkbox" name="Indexable" @checked={{this.indexable}} />
+    </label>
+  </div>
+  <div class="register-form-custom-fields">
+    <Util::MapEdit @list={{this.customProperties}} />
+  </div>
+  {{! TODO: Custom fields (Two string arrays, lets go. Definitely won't be a pain to sync them up) }}
+  {{! TODO: Icon, Background, Banner }}
 </div>

frontend-reactive/app/components/auth/registration-form.ts

@@ -1,21 +1,69 @@
-import Component from '@glimmer/component'
-import { tracked } from '@glimmer/tracking'
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 
 export interface AuthRegistrationFormSignature {
   // 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 AuthRegistrationForm extends Component<AuthRegistrationFormSignature> {
-  @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: 'Human',
+      description: 'Human',
+      checked: true,
+    },
+    {
+      name: 'Cat',
+      description: 'Cat',
+      checked: false,
+    },
+    {
+      name: 'Fox',
+      description: 'Fox',
+      checked: false,
+    },
+    {
+      name: 'Dog',
+      description: 'Dog',
+      checked: false,
+    },
+    {
+      name: 'Robot',
+      description: 'Robot',
+      checked: false,
+    },
+    {
+      name: 'Doll',
+      description: 'Doll',
+      checked: 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;
+
+  genderAddedHandler(newIndex: number) {
+    console.log('gender added');
+  }
+  genderRemovedHandler(removedIndex: number) {
+    console.log('gender removed');
+  }
 }

frontend-reactive/app/components/util/multiselect.ts

@@ -1,21 +1,21 @@
-import { action } from '@ember/object'
-import Component from '@glimmer/component'
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
 
 export interface UtilMultiselectSignature {
   // The arguments accepted by the component
   Args: {
-    elements: Array<{ name: string; checked: boolean; description: string }>
-  }
+    elements: Array<{ name: string; checked: boolean; description: 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 UtilMultiselect extends Component<UtilMultiselectSignature> {
   @action onChange() {
-    console.log(this.args.elements)
+    console.log(this.args.elements);
   }
 }

frontend-reactive/app/components/util/string-array.hbs

@@ -10,8 +10,7 @@
           <div
             class="{{@remove-element-classes}}"
             type="button"
-            id="{{this.args.prefix}}-{{index}}"
-            {{on "click" this.removeElement}}
+            {{on "click" (fn this.removeElement index)}}
           >
             X
           </div>

frontend-reactive/app/components/util/string-array.ts

@@ -1,57 +1,56 @@
-import MutableArray from '@ember/array/mutable'
-import { action } from '@ember/object'
-import Component from '@glimmer/component'
-import { tracked } from '@glimmer/tracking'
+import MutableArray from '@ember/array/mutable';
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 
 export interface UtilStringArraySignature {
   // The arguments accepted by the component
   Args: {
-    list: MutableArray<{ value: string }>
-    prefix: string
-  }
+    list: MutableArray<{ value: string }>;
+    prefix: string;
+    onNewElement: (index: number) => void;
+    onDeleteElement: (index: number) => void;
+  };
   // 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 UtilStringArray extends Component<UtilStringArraySignature> {
   @action addElement() {
-    MutableArray.apply(this.args.list)
-    this.args.list.pushObject({ value: '' })
+    MutableArray.apply(this.args.list);
+    this.args.list.pushObject({ value: '' });
+    if (this.args.onNewElement)
+      this.args.onNewElement(this.args.list.length - 1);
   }
 
-  @action removeElement(event: MouseEvent) {
-    MutableArray.apply(this.args.list)
-    const target = event.target as HTMLDivElement
-    const splits = target.id.split('-', 2)
-    if (splits.length != 2) return
-    const indexStr = splits[1]
-    //console.log('Content: ', indexStr)
-    if (!indexStr) return
+  @action removeElement(index: number) {
+    MutableArray.apply(this.args.list);
     //let index = this.args.list.find((elem) => elem == content)
     //let index = this.listCopy.findIndex((d) => d == content)
-    this.args.list.removeAt(Number(indexStr))
+    this.args.list.removeAt(index);
+    if (this.args.onDeleteElement) this.args.onDeleteElement(index);
   }
 
   transformArrayIntoUsable(arr: Array<string>): { [key: number]: string } {
-    const out: { [key: number]: string } = {}
+    const out: { [key: number]: string } = {};
     const tmp = arr.map((elem: string, index: number) => {
-      out[index] = elem
-      return elem
-    })
-    return out
+      out[index] = elem;
+      return elem;
+    });
+    return out;
   }
 
   countElemsInObj(obj: any): number {
-    let count = 0
+    let count = 0;
 
-    for (var prop in obj) {
-      if (obj.hasOwnProperty(prop)) ++count
+    for (const prop in obj) {
+      if (obj.hasOwnProperty(prop)) ++count;
     }
 
-    return count
+    return count;
   }
 }

frontend-reactive/app/routes/registerform.ts

@@ -1,9 +1,9 @@
-import Route from '@ember/routing/route'
+import Route from '@ember/routing/route';
 
 export default class RegisterFormRoute extends Route {
   async model() {
     return {
       list: [{ value: 'one' }, { value: 'two' }],
-    }
+    };
   }
 }

frontend-reactive/app/styles/colors.css

@@ -140,4 +140,5 @@
 
 :root {
   background-color: var(--background);
+  color: var(--text);
 }

frontend-reactive/package.json

@@ -87,7 +87,9 @@
     "ember-moment": "^10.0.1",
     "ember-page-title": "^8.2.3",
     "ember-qunit": "^8.1.0",
+    "ember-radio-button": "^3.0.0-beta.1",
     "ember-resolver": "^11.0.1",
+    "ember-select-light": "^2.0.5",
     "ember-simple-auth": "^6.1.0",
     "ember-source": "~5.11.0",
     "ember-template-lint": "^5.13.0",