Add read-only mode to map and array editors

frontend-reactive/app/components/account/full.hbs

@@ -0,0 +1 @@
+{{yield}}

frontend-reactive/app/components/account/overview.hbs

@@ -0,0 +1 @@
+{{yield}}

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

@@ -1,29 +1,29 @@
-import { action } from '@ember/object'
+import { action } from '@ember/object';
-import Component from '@glimmer/component'
+import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking'
+import { tracked } from '@glimmer/tracking';
-import isValidMail from 'frontend-reactive/helpers/is-valid-mail'
+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 displayname: string = this.args.username;
-  @tracked description: string = ''
+  @tracked description: string = '';
-  @tracked gender: Array<{ value: string }> = []
+  @tracked gender: Array<{ value: string }> = [];
   @tracked beingTypes: Array<{
-    name: string
+    name: string;
-    checked: boolean
+    checked: boolean;
-    description: string
+    description: string;
   }> = [
     {
       name: 'Human',
@@ -55,22 +55,22 @@ export default class AuthPostRegistrationForm extends Component<AuthPostRegistra
       description: 'Doll',
       checked: false,
     },
-  ]
+  ];
-  @tracked defaultpostmode: string = 'Public'
+  @tracked defaultpostmode: string = 'Public';
-  @tracked followapproval: boolean = false
+  @tracked followapproval: boolean = false;
-  @tracked customProperties: Array<{ key: string; value: string }> = []
+  @tracked customProperties: Array<{ key: string; value: string }> = [];
-  @tracked indexable: boolean = true
+  @tracked indexable: boolean = true;
-  @tracked mail = { mail: '', valid: false }
+  @tracked mail = { mail: '', valid: false };
-  @tracked enableBlueskyIntegration = false
+  @tracked enableBlueskyIntegration = 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);
   }
 }

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

@@ -1,7 +1,7 @@
 <div class="mail-entry {{@wrapper-classes}}">
   <label>
     Email
-    <!--<div class="filling-spacer"/>-->
+    {{!--<div class="filling-spacer"/>--}}
     <Input
       class="mail-input {{if this.mailOk "mail-input-ok" "mail-input-error"}} {{@input-classes}}"
       @type="text"

frontend-reactive/app/components/util/map-edit.hbs

@@ -1,27 +1,40 @@
 <div class="{{@wrapper-classes}}">
-  <ul>
+  {{#if @readonly}}
-    {{#each this.args.list as |element index|}}
+    <ul>
-      <li>
+      {{#each this.args.list as |element|}}
-        <div class="string-array-element-wrapper">
+        <li>
-          <Input @type="text" @value={{element.key}} />
+          <div class="string-array-element-wrapper">
-          <Input @type="text" @value={{element.value}} />
+            <p class="{{@element-key-classes}}">{{element.key}}</p>
-          <div
+            <p class="{{@element-value-classes}}">{{element.value}}</p>
-            class="{{@remove-element-classes}}"
-            type="button"
-            {{on "click" (fn this.removeElement index)}}
-          >
-            X
           </div>
-        </div>
+        </li>
-      </li>
+      {{/each}}
-    {{/each}}
+    </ul>
+  {{else}}
+    <ul>
+      {{#each this.args.list as |element index|}}
+        <li>
+          <div class="string-array-element-wrapper">
+            <Input @type="text" @value={{element.key}} />
+            <Input @type="text" @value={{element.value}} />
+            <div
+              class="{{@remove-element-classes}}"
+              type="button"
+              {{on "click" (fn this.removeElement index)}}
+            >
+              X
+            </div>
+          </div>
+        </li>
+      {{/each}}
 
-  </ul>
+    </ul>
-  <div
+    <div
-    class="{{@add-element-classes}}"
+      class="{{@add-element-classes}}"
-    type="button"
+      type="button"
-    {{on "click" this.addElement}}
+      {{on "click" this.addElement}}
-  >
+    >
-    Add element
+      Add element
-  </div>
+    </div>
+  {{/if}}
 </div>

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

@@ -1,14 +1,26 @@
 <div class={{@wrapper-class}}>
-  {{#each this.args.elements as |element|}}
+  {{#if @readonly}}
-    <label class={{@label-class}}>
+    <ul>
-      {{element.description}}
+      {{#each this.args.elements as |element|}}
-      <Input
+        {{#if element.checked}}
-        @type="checkbox"
+          <li>
-        name="{{element.name}}"
+            <p>{{element.name}}</p>
-        class="{{@input-classes}}"
+          </li>
-        @checked={{element.checked}}
+        {{/if}}
-        {{on "change" this.onChange}}
+      {{/each}}
-      />
+    </ul>
-    </label>
+  {{else}}
-  {{/each}}
+    {{#each this.args.elements as |element|}}
+      <label class={{@label-class}}>
+        {{element.description}}
+        <Input
+          @type="checkbox"
+          name="{{element.name}}"
+          class="{{@input-classes}}"
+          @checked={{element.checked}}
+          {{on "change" this.onChange}}
+        />
+      </label>
+    {{/each}}
+  {{/if}}
 </div>

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

@@ -1,12 +1,16 @@
 <div class="{{@wrapper-class}}">
-  {{#each @elements as |element index|}}
+  {{#if @readonly}}
-    <RadioButton
+    <p class="{{@element-classes}}">{{@selected}}</p>
-      @value="{{element}}"
+  {{else}}
-      @groupValue={{@selected}}
+    {{#each @elements as |element index|}}
-      @name={{@name}}
+      <RadioButton
-      @required={{@required}}
+        @value="{{element}}"
-    >
+        @groupValue={{@selected}}
-      {{element}}
+        @name={{@name}}
-    </RadioButton>
+        @required={{@required}}
-  {{/each}}
+      >
+        {{element}}
+      </RadioButton>
+    {{/each}}
+  {{/if}}
 </div>

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

@@ -1,4 +1,11 @@
 <div class="{{@wrapper-classes}}">
+  {{#if @readonly}}
+    <ul>
+      {{#each this.args.list as |element|}}
+        <p class="{{@readonly-element-classes}}">{{element.value}}</p>
+      {{/each}}
+    </ul>
+  {{else}}
   <ul>
     {{#each this.args.list as |element index|}}
       <li>
@@ -27,4 +34,5 @@
   >
     Add element
   </div>
+  {{/if}}
 </div>

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");

frontend-reactive/app/styles/auth/registerForm.css

@@ -29,8 +29,10 @@
 
 .registration-form-mail-input {
   width: max-content;
-  /*display: flex;*/
+
-  /*flex-grow: 1;*/
+  /* display: flex; */
+
+  /* flex-grow: 1; */
 }
 
 .registration-form-description-wrapper {

frontend-reactive/app/styles/util/mailEntry.css

@@ -11,24 +11,26 @@
 
 .mail-input-ok {
   border: 1px solid green;
-  box-shadow: 0px 0px 5px green;
+  box-shadow: 0 0 5px green;
 }
 
 .mail-input-error {
   border: 1px solid red;
-  box-shadow: 0px 0px 5px red;
+  box-shadow: 0 0 5px red;
 }
 
 .mail-status {
-  /*margin: 0;*/
+  /* margin: 0; */
   margin-top: 0.75em;
   margin-left: 0.4em;
 }
 
 .mail-ok {
   color: green;
-  /*margin-top: -0.25lh;*/
+
-  /*margin-bottom: -0.28lh;*/
+  /* margin-top: -0.25lh; */
+
+  /* margin-bottom: -0.28lh; */
   font-size: 0.9lh;
   margin: 0;
   margin-left: 0.2em;

frontend-reactive/tests/integration/components/account/full-test.ts

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'frontend-reactive/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | account/full', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<Account::Full />`);
+
+    assert.dom().hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <Account::Full>
+        template block text
+      </Account::Full>
+    `);
+
+    assert.dom().hasText('template block text');
+  });
+});

frontend-reactive/tests/integration/components/account/overview-test.ts

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'frontend-reactive/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | account/overview', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<Account::Overview />`);
+
+    assert.dom().hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <Account::Overview>
+        template block text
+      </Account::Overview>
+    `);
+
+    assert.dom().hasText('template block text');
+  });
+});