More work on post registration form

frontend-reactive/app/components/util/mail-entry.hbs

@@ -0,0 +1,11 @@
+<div class="mail-entry {{@wrapper-classes}}">
+  <label>
+    Email
+    <Input @type="text" @value={{this.args.data.mail}} placeholder="Email address" {{on "change" (fn this.checkMail)}}/>
+  </label>
+  {{#if this.mailOk}}
+    <p class="mail-ok">O</p>
+  {{else}}
+    <p class="mail-error">X</p>
+  {{/if}}
+</div>

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<UtilMailEntrySignature> {
+  @tracked mailOk = this.args.data.valid
+  @action checkMail() {
+    this.args.data.valid = re.test(this.args.data.mail)
+    this.mailOk = this.args.data.valid
+  }
+}

frontend-reactive/app/components/util/one-of-array.hbs

@@ -1,5 +1,5 @@
 <div class="{{@wrapper-class}}">
-  {{#each @elements as |element|}}
+  {{#each @elements as |element index|}}
     <RadioButton
       @value="{{element}}"
       @groupValue={{@selected}}