Getting work done. Registration form taking shape

Still needs styling and some more elements, but mostly usable now
This commit is contained in:
Melody Becker 2024-10-25 16:54:48 +02:00
parent f0638af99f
commit 467693d811
10 changed files with 38244 additions and 36547 deletions

View file

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

View file

@ -1,21 +1,69 @@
import Component from '@glimmer/component' import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking' import { tracked } from '@glimmer/tracking';
export interface AuthRegistrationFormSignature { export interface AuthRegistrationFormSignature {
// The arguments accepted by the component // The arguments accepted by the component
Args: { Args: {
username: string username: string;
} };
// Any blocks yielded by the component // Any blocks yielded by the component
Blocks: { Blocks: {
default: [] default: [];
} };
// The element to which `...attributes` is applied in the component template // The element to which `...attributes` is applied in the component template
Element: null Element: null;
} }
export default class AuthRegistrationForm extends Component<AuthRegistrationFormSignature> { export default class AuthRegistrationForm extends Component<AuthRegistrationFormSignature> {
@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;
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');
}
} }

View file

@ -1,21 +1,21 @@
import { action } from '@ember/object' import { action } from '@ember/object';
import Component from '@glimmer/component' import Component from '@glimmer/component';
export interface UtilMultiselectSignature { export interface UtilMultiselectSignature {
// The arguments accepted by the component // The arguments accepted by the component
Args: { Args: {
elements: Array<{ name: string; checked: boolean; description: string }> elements: Array<{ name: string; checked: boolean; description: string }>;
} };
// Any blocks yielded by the component // Any blocks yielded by the component
Blocks: { Blocks: {
default: [] default: [];
} };
// The element to which `...attributes` is applied in the component template // The element to which `...attributes` is applied in the component template
Element: null Element: null;
} }
export default class UtilMultiselect extends Component<UtilMultiselectSignature> { export default class UtilMultiselect extends Component<UtilMultiselectSignature> {
@action onChange() { @action onChange() {
console.log(this.args.elements) console.log(this.args.elements);
} }
} }

View file

@ -10,8 +10,7 @@
<div <div
class="{{@remove-element-classes}}" class="{{@remove-element-classes}}"
type="button" type="button"
id="{{this.args.prefix}}-{{index}}" {{on "click" (fn this.removeElement index)}}
{{on "click" this.removeElement}}
> >
X X
</div> </div>

View file

@ -1,57 +1,56 @@
import MutableArray from '@ember/array/mutable' import MutableArray from '@ember/array/mutable';
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';
export interface UtilStringArraySignature { export interface UtilStringArraySignature {
// The arguments accepted by the component // The arguments accepted by the component
Args: { Args: {
list: MutableArray<{ value: string }> list: MutableArray<{ value: string }>;
prefix: string prefix: string;
} onNewElement: (index: number) => void;
onDeleteElement: (index: number) => void;
};
// Any blocks yielded by the component // Any blocks yielded by the component
Blocks: { Blocks: {
default: [] default: [];
} };
// The element to which `...attributes` is applied in the component template // The element to which `...attributes` is applied in the component template
Element: null Element: null;
} }
export default class UtilStringArray extends Component<UtilStringArraySignature> { export default class UtilStringArray extends Component<UtilStringArraySignature> {
@action addElement() { @action addElement() {
MutableArray.apply(this.args.list) MutableArray.apply(this.args.list);
this.args.list.pushObject({ value: '' }) this.args.list.pushObject({ value: '' });
if (this.args.onNewElement)
this.args.onNewElement(this.args.list.length - 1);
} }
@action removeElement(event: MouseEvent) { @action removeElement(index: number) {
MutableArray.apply(this.args.list) MutableArray.apply(this.args.list);
const target = event.target as HTMLDivElement
const splits = target.id.split('-', 2)
if (splits.length != 2) return
const indexStr = splits[1]
//console.log('Content: ', indexStr)
if (!indexStr) return
//let index = this.args.list.find((elem) => elem == content) //let index = this.args.list.find((elem) => elem == content)
//let index = this.listCopy.findIndex((d) => d == content) //let index = this.listCopy.findIndex((d) => d == content)
this.args.list.removeAt(Number(indexStr)) this.args.list.removeAt(index);
if (this.args.onDeleteElement) this.args.onDeleteElement(index);
} }
transformArrayIntoUsable(arr: Array<string>): { [key: number]: string } { transformArrayIntoUsable(arr: Array<string>): { [key: number]: string } {
const out: { [key: number]: string } = {} const out: { [key: number]: string } = {};
const tmp = arr.map((elem: string, index: number) => { const tmp = arr.map((elem: string, index: number) => {
out[index] = elem out[index] = elem;
return elem return elem;
}) });
return out return out;
} }
countElemsInObj(obj: any): number { countElemsInObj(obj: any): number {
let count = 0 let count = 0;
for (var prop in obj) { for (const prop in obj) {
if (obj.hasOwnProperty(prop)) ++count if (obj.hasOwnProperty(prop)) ++count;
} }
return count return count;
} }
} }

View file

@ -1,9 +1,9 @@
import Route from '@ember/routing/route' import Route from '@ember/routing/route';
export default class RegisterFormRoute extends Route { export default class RegisterFormRoute extends Route {
async model() { async model() {
return { return {
list: [{ value: 'one' }, { value: 'two' }], list: [{ value: 'one' }, { value: 'two' }],
} };
} }
} }

View file

@ -140,4 +140,5 @@
:root { :root {
background-color: var(--background); background-color: var(--background);
color: var(--text);
} }

Binary file not shown.

File diff suppressed because it is too large Load diff

View file

@ -1,123 +1,125 @@
{ {
"name": "frontend-reactive", "name": "frontend-reactive",
"version": "0.0.0", "version": "0.0.0",
"private": true, "private": true,
"description": "Small description for frontend-reactive goes here", "description": "Small description for frontend-reactive goes here",
"repository": "", "repository": "",
"license": "EUPL-1.2", "license": "EUPL-1.2",
"author": "", "author": "",
"directories": { "directories": {
"doc": "doc", "doc": "doc",
"test": "tests" "test": "tests"
}, },
"scripts": { "scripts": {
"build": "ember build --environment=production", "build": "ember build --environment=production",
"lint": "concurrently \"npm:lint:*(!fix)\" --names \"lint:\"", "lint": "concurrently \"npm:lint:*(!fix)\" --names \"lint:\"",
"lint:css": "stylelint \"**/*.css\"", "lint:css": "stylelint \"**/*.css\"",
"lint:css:fix": "concurrently \"npm:lint:css -- --fix\"", "lint:css:fix": "concurrently \"npm:lint:css -- --fix\"",
"lint:fix": "concurrently \"npm:lint:*:fix\" --names \"fix:\"", "lint:fix": "concurrently \"npm:lint:*:fix\" --names \"fix:\"",
"lint:hbs": "ember-template-lint .", "lint:hbs": "ember-template-lint .",
"lint:hbs:fix": "ember-template-lint . --fix", "lint:hbs:fix": "ember-template-lint . --fix",
"lint:js": "eslint . --cache", "lint:js": "eslint . --cache",
"lint:js:fix": "eslint . --fix", "lint:js:fix": "eslint . --fix",
"lint:types": "tsc --noEmit", "lint:types": "tsc --noEmit",
"start": "ember serve", "start": "ember serve",
"test": "concurrently \"npm:lint\" \"npm:test:*\" --names \"lint,test:\"", "test": "concurrently \"npm:lint\" \"npm:test:*\" --names \"lint,test:\"",
"test:ember": "ember test" "test:ember": "ember test"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.25.2", "@babel/core": "^7.25.2",
"@ember/optional-features": "^2.1.0", "@ember/optional-features": "^2.1.0",
"@ember/string": "^3.1.1", "@ember/string": "^3.1.1",
"@ember/test-helpers": "^3.3.1", "@ember/test-helpers": "^3.3.1",
"@glimmer/component": "^1.1.2", "@glimmer/component": "^1.1.2",
"@glimmer/tracking": "^1.1.2", "@glimmer/tracking": "^1.1.2",
"@glint/environment-ember-loose": "^1.4.0", "@glint/environment-ember-loose": "^1.4.0",
"@glint/template": "^1.4.0", "@glint/template": "^1.4.0",
"@tsconfig/ember": "^3.0.8", "@tsconfig/ember": "^3.0.8",
"@types/ember": "^4.0.11", "@types/ember": "^4.0.11",
"@types/ember__application": "^4.0.11", "@types/ember__application": "^4.0.11",
"@types/ember__array": "^4.0.10", "@types/ember__array": "^4.0.10",
"@types/ember__component": "^4.0.22", "@types/ember__component": "^4.0.22",
"@types/ember__controller": "^4.0.12", "@types/ember__controller": "^4.0.12",
"@types/ember__debug": "^4.0.8", "@types/ember__debug": "^4.0.8",
"@types/ember__destroyable": "^4.0.5", "@types/ember__destroyable": "^4.0.5",
"@types/ember__engine": "^4.0.11", "@types/ember__engine": "^4.0.11",
"@types/ember__error": "^4.0.6", "@types/ember__error": "^4.0.6",
"@types/ember__helper": "^4.0.8", "@types/ember__helper": "^4.0.8",
"@types/ember__modifier": "^4.0.9", "@types/ember__modifier": "^4.0.9",
"@types/ember__object": "^4.0.12", "@types/ember__object": "^4.0.12",
"@types/ember__owner": "^4.0.9", "@types/ember__owner": "^4.0.9",
"@types/ember__polyfills": "^4.0.6", "@types/ember__polyfills": "^4.0.6",
"@types/ember__routing": "^4.0.22", "@types/ember__routing": "^4.0.22",
"@types/ember__runloop": "^4.0.10", "@types/ember__runloop": "^4.0.10",
"@types/ember__service": "^4.0.9", "@types/ember__service": "^4.0.9",
"@types/ember__string": "^3.16.3", "@types/ember__string": "^3.16.3",
"@types/ember__template": "^4.0.7", "@types/ember__template": "^4.0.7",
"@types/ember__test": "^4.0.6", "@types/ember__test": "^4.0.6",
"@types/ember__utils": "^4.0.7", "@types/ember__utils": "^4.0.7",
"@types/ember-data": "^4.4.16", "@types/ember-data": "^4.4.16",
"@types/ember-data__adapter": "^4.0.6", "@types/ember-data__adapter": "^4.0.6",
"@types/ember-data__model": "^4.0.5", "@types/ember-data__model": "^4.0.5",
"@types/ember-data__serializer": "^4.0.6", "@types/ember-data__serializer": "^4.0.6",
"@types/ember-data__store": "^4.0.7", "@types/ember-data__store": "^4.0.7",
"@types/qunit": "^2.19.10", "@types/qunit": "^2.19.10",
"@types/rsvp": "^4.0.9", "@types/rsvp": "^4.0.9",
"@typescript-eslint/eslint-plugin": "^6.21.0", "@typescript-eslint/eslint-plugin": "^6.21.0",
"@typescript-eslint/parser": "^6.21.0", "@typescript-eslint/parser": "^6.21.0",
"broccoli-asset-rev": "^3.0.0", "broccoli-asset-rev": "^3.0.0",
"concurrently": "^8.2.2", "concurrently": "^8.2.2",
"ember-auto-import": "^2.7.4", "ember-auto-import": "^2.7.4",
"ember-cli": "~5.11.0", "ember-cli": "~5.11.0",
"ember-cli-app-version": "^6.0.1", "ember-cli-app-version": "^6.0.1",
"ember-cli-babel": "^8.2.0", "ember-cli-babel": "^8.2.0",
"ember-cli-clean-css": "^3.0.0", "ember-cli-clean-css": "^3.0.0",
"ember-cli-dependency-checker": "^3.3.2", "ember-cli-dependency-checker": "^3.3.2",
"ember-cli-htmlbars": "^6.3.0", "ember-cli-htmlbars": "^6.3.0",
"ember-cli-inject-live-reload": "^2.1.0", "ember-cli-inject-live-reload": "^2.1.0",
"ember-cli-sri": "^2.1.1", "ember-cli-sri": "^2.1.1",
"ember-cli-terser": "^4.0.2", "ember-cli-terser": "^4.0.2",
"ember-composable-helpers": "^5.0.0", "ember-composable-helpers": "^5.0.0",
"ember-data": "~5.3.8", "ember-data": "~5.3.8",
"ember-fetch": "^8.1.2", "ember-fetch": "^8.1.2",
"ember-infinity": "^3.0.0", "ember-infinity": "^3.0.0",
"ember-intl": "^7.0.6", "ember-intl": "^7.0.6",
"ember-load-initializers": "^2.1.2", "ember-load-initializers": "^2.1.2",
"ember-modifier": "^4.2.0", "ember-modifier": "^4.2.0",
"ember-moment": "^10.0.1", "ember-moment": "^10.0.1",
"ember-page-title": "^8.2.3", "ember-page-title": "^8.2.3",
"ember-qunit": "^8.1.0", "ember-qunit": "^8.1.0",
"ember-resolver": "^11.0.1", "ember-radio-button": "^3.0.0-beta.1",
"ember-simple-auth": "^6.1.0", "ember-resolver": "^11.0.1",
"ember-source": "~5.11.0", "ember-select-light": "^2.0.5",
"ember-template-lint": "^5.13.0", "ember-simple-auth": "^6.1.0",
"ember-tooltips": "^3.6.0", "ember-source": "~5.11.0",
"ember-welcome-page": "^7.0.2", "ember-template-lint": "^5.13.0",
"eslint": "^8.57.0", "ember-tooltips": "^3.6.0",
"eslint-config-prettier": "^9.1.0", "ember-welcome-page": "^7.0.2",
"eslint-plugin-ember": "^11.12.0", "eslint": "^8.57.0",
"eslint-plugin-n": "^16.6.2", "eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.2.1", "eslint-plugin-ember": "^11.12.0",
"eslint-plugin-qunit": "^8.1.1", "eslint-plugin-n": "^16.6.2",
"loader.js": "^4.7.0", "eslint-plugin-prettier": "^5.2.1",
"prettier": "^3.3.3", "eslint-plugin-qunit": "^8.1.1",
"qunit": "^2.22.0", "loader.js": "^4.7.0",
"qunit-dom": "^2.0.0", "prettier": "^3.3.3",
"stylelint": "^15.11.0", "qunit": "^2.22.0",
"stylelint-config-standard": "^34.0.0", "qunit-dom": "^2.0.0",
"stylelint-prettier": "^4.1.0", "stylelint": "^15.11.0",
"tracked-built-ins": "^3.3.0", "stylelint-config-standard": "^34.0.0",
"typescript": "^5.5.4", "stylelint-prettier": "^4.1.0",
"webpack": "^5.93.0" "tracked-built-ins": "^3.3.0",
}, "typescript": "^5.5.4",
"engines": { "webpack": "^5.93.0"
"node": ">= 18" },
}, "engines": {
"ember": { "node": ">= 18"
"edition": "octane" },
}, "ember": {
"dependencies": { "edition": "octane"
"@simplewebauthn/browser": "^11.0.0", },
"moment": "^2.30.1" "dependencies": {
} "@simplewebauthn/browser": "^11.0.0",
"moment": "^2.30.1"
}
} }