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,18 +1,69 @@
 <div class="registration-form">
-  <p class="registration-form-username">{{this.username}}</p>
-
-  <label>
-    Displayname
-    <Input @type="text" @value={{this.displayname}} placeholder="Displayname" />
-  </label>
-  <label>
-    Description
-    <Input
-      @type="text"
-      @value={{this.description}}
-      placeholder="Account description"
+  <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"
+      />
+    </label>
+  </div>
+  <div class="registration-form-description">
+    <label>
+      Description
+      <Input
+        @type="text"
+        @value={{this.description}}
+        placeholder="Account description"
+      />
+    </label>
+  </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}}
     />
-  </label>
-  <Util::StringArray @list={{this.gender}} />
+  </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');
+  }
 }