JS frontend stuff

Move old ember frontend to properly named folder
Add vue based new frontend

frontend-old-ember/app/components/auth/login.hbs

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

frontend-old-ember/app/components/auth/login.ts

@@ -0,0 +1,24 @@
+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: {};
+  // Any blocks yielded by the component
+  Blocks: {
+    default: [];
+  };
+  // The element to which `...attributes` is applied in the component template
+  Element: null;
+}
+
+export default class AuthLogin extends Component<AuthLoginSignature> {
+  @tracked username = '';
+
+  @action onLoginStart() {
+    console.log('Starting login for username ' + this.username);
+    // Check if username is approved for login
+    // If it is, continue with login
+  }
+}

frontend-old-ember/app/components/auth/post-registration-form.hbs

@@ -0,0 +1,83 @@
+<div class="registration-form">
+  <h1 class="registration-form-username">username: {{this.args.username}}</h1>
+  <div class="registration-form-name-mail-wrapper">
+    <div class="registration-form-displayname-wrapper">
+      <label>
+        Displayname
+        <Input
+          @type="text"
+          @value={{this.displayname}}
+          placeholder="Displayname"
+        />
+      </label>
+    </div>
+    <Util::MailEntry
+      @wrapper-classes="registration-form-mail-wrapper"
+      @input-classes="registration-form-mail-input"
+      @data={{this.mail}}
+    />
+  </div>
+  <div class="registration-form-description-wrapper">
+    {{! TODO: Split into entry form on the left and live preview on the right }}
+    <label for="registration-description">
+      Description
+    </label>
+    <Textarea
+      id="registration-description"
+      @value={{this.description}}
+      placeholder="Account description"
+    />
+  </div>
+  <fieldset class="registration-form-gender-wrapper">
+    <legend class="registration-form-gender-info">Add your preferred pronouns</legend>
+    <Util::StringArray
+      @list={{this.gender}}
+      @onNewElement={{this.genderAddedHandler}}
+      @onDeleteElement={{this.genderRemovedHandler}}
+      @wrapper-classes=""
+      @element-wrapper-classes=""
+      @element-classes=""
+      @remove-element-classes=""
+      @add-element-classes=""
+    />
+  </fieldset>
+  <fieldset class="register-form-being-wrapper">
+    <legend class="registration-form-being-info">Select the type of being you are. Multiselect is possible</legend>
+    <Util::Multiselect
+      @elements={{this.beingTypes}}
+      @wrapper-class=""
+      @label-class=""
+      @input-classes=""
+    />
+  </fieldset>
+  <fieldset class="register-form-default-post-mode-wrapper">
+    <legend class="registration-form-default-post-mode-info">Select the default mode for your posts</legend>
+    <Util::OneOfArray
+      @elements={{array "Public" "Local" "Followers" "Direct"}}
+      @selected={{this.defaultpostmode}}
+      @name="default-post-mode"
+      @required={{true}}
+    />
+  </fieldset>
+  <div class="register-form-follow-approval-wrapper">
+    <label>
+      Require approval for follow requests
+      <Input
+        @type="checkbox"
+        name="Follow approval"
+        @checked={{this.args.followapproval}}
+      />
+    </label>
+  </div>
+  <div class="register-form-indexable-wrapper">
+    <label>
+      Whether the account is indexable
+      <Input @type="checkbox" name="Indexable" @checked={{this.indexable}} />
+    </label>
+  </div>
+  <fieldset class="register-form-custom-fields-wrapper">
+    <legend>Custom fields</legend>
+    <Util::MapEdit @list={{this.customProperties}} />
+  </fieldset>
+  {{! TODO: Icon, Background, Banner, Bluesky toggle }}
+</div>

frontend-old-ember/app/components/auth/post-registration-form.ts

@@ -0,0 +1,76 @@
+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;
+  };
+  // Any blocks yielded by the component
+  Blocks: {
+    default: [];
+  };
+  // The element to which `...attributes` is applied in the component template
+  Element: null;
+}
+
+export default class AuthPostRegistrationForm extends Component<AuthPostRegistrationFormSignature> {
+  @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;
+  @tracked customProperties: Array<{ key: string; value: string }> = [];
+  @tracked indexable: boolean = true;
+  @tracked mail = { mail: '', valid: false };
+  @tracked enableBlueskyIntegration = false;
+
+  genderAddedHandler(newIndex: number) {
+    console.log('gender added');
+  }
+  genderRemovedHandler(removedIndex: number) {
+    console.log('gender removed');
+  }
+
+  @action test() {
+    console.log(this.mail);
+  }
+}

frontend-old-ember/app/components/auth/register-start.hbs

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

frontend-old-ember/app/components/auth/register-start.ts

@@ -0,0 +1,14 @@
+import Component from '@glimmer/component';
+
+export interface AuthRegisterStartSignature {
+  // The arguments accepted by the component
+  Args: {};
+  // Any blocks yielded by the component
+  Blocks: {
+    default: [];
+  };
+  // The element to which `...attributes` is applied in the component template
+  Element: null;
+}
+
+export default class AuthRegisterStart extends Component<AuthRegisterStartSignature> {}