More work on post registration form

frontend-reactive/app/components/auth/login.hbs

@@ -3,7 +3,7 @@
     <Input
       @type="text"
       @value={{this.username}}
-      @placeholder="Username"
+      placeholder="Username"
     />
   </label>
   <div type="button" class="login-start-button" {{on "click" this.onLoginStart}}>

frontend-reactive/app/components/auth/login.ts

@@ -1,23 +1,23 @@
-import { action } from '@ember/object'
-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';
 
 export interface AuthLoginSignature {
   // The arguments accepted by the component
-  Args: {}
+  Args: {};
   // 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 AuthLogin extends Component<AuthLoginSignature> {
-  @tracked username = ''
+  @tracked username = '';
 
   @action onLoginStart() {
-    console.log('Starting login for username ' + this.username)
+    console.log('Starting login for username ' + this.username);
     // Check if username is approved for login
     // If it is, continue with login
   }

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

@@ -10,6 +10,7 @@
       />
     </label>
   </div>
+  <Util::MailEntry @data={{this.mail}}/>
   <div class="registration-form-description-wrapper">
     <label>
       Description
@@ -20,24 +21,20 @@
       />
     </label>
   </div>
-  {{!--<div class="registration-form-mail-wrapper">--}}
-  {{!--  <label>--}}
-  {{!--    Email--}}
-  {{!--    <Input @type="text" @value={{this.email}} placeholder="Email address" />--}}
-  {{!--  </label>--}}
-  {{!--</div>--}}
   <div class="registration-form-gender-wrapper">
+    <p class="registration-form-gender-info">Add your preferred pronouns</p>
     <Util::StringArray
       @list={{this.gender}}
       @onNewElement={{this.genderAddedHandler}}
       @onDeleteElement={{this.genderRemovedHandler}}
     />
   </div>
-  <p>{{this.extracted}}</p>
   <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>
     <Util::OneOfArray
       @elements={{array "Public" "Local" "Followers" "Direct"}}
       @selected={{this.defaultpostmode}}
@@ -65,4 +62,4 @@
     <Util::MapEdit @list={{this.customProperties}} />
   </div>
   {{! TODO: Icon, Background, Banner }}
-</div>
+</div>

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<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',
@@ -53,17 +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 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)
   }
 }