Getting work done. Registration form taking shape
Still needs styling and some more elements, but mostly usable now
This commit is contained in:
parent
f0638af99f
commit
467693d811
10 changed files with 38244 additions and 36547 deletions
|
|
@ -1,18 +1,69 @@
|
|||
<div class="registration-form">
|
||||
<p class="registration-form-username">{{this.username}}</p>
|
||||
|
||||
<label>
|
||||
Displayname
|
||||
<Input @type="text" @value={{this.displayname}} placeholder="Displayname" />
|
||||
</label>
|
||||
<label>
|
||||
Description
|
||||
<Input
|
||||
@type="text"
|
||||
@value={{this.description}}
|
||||
placeholder="Account description"
|
||||
<h1 class="registration-form-username">username: {{this.args.username}}</h1>
|
||||
<div class="registration-form-displayname">
|
||||
<label>
|
||||
Displayname
|
||||
<Input
|
||||
@type="text"
|
||||
@value={{this.displayname}}
|
||||
placeholder="Displayname"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<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>
|
||||
<Util::StringArray @list={{this.gender}} />
|
||||
</div>
|
||||
<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>
|
||||
|
|
@ -1,21 +1,69 @@
|
|||
import Component from '@glimmer/component'
|
||||
import { tracked } from '@glimmer/tracking'
|
||||
import Component from '@glimmer/component';
|
||||
import { tracked } from '@glimmer/tracking';
|
||||
|
||||
export interface AuthRegistrationFormSignature {
|
||||
// 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 AuthRegistrationForm extends Component<AuthRegistrationFormSignature> {
|
||||
@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: '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');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
import { action } from '@ember/object'
|
||||
import Component from '@glimmer/component'
|
||||
import { action } from '@ember/object';
|
||||
import Component from '@glimmer/component';
|
||||
|
||||
export interface UtilMultiselectSignature {
|
||||
// The arguments accepted by the component
|
||||
Args: {
|
||||
elements: Array<{ name: string; checked: boolean; description: string }>
|
||||
}
|
||||
elements: Array<{ name: string; checked: boolean; description: 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 UtilMultiselect extends Component<UtilMultiselectSignature> {
|
||||
@action onChange() {
|
||||
console.log(this.args.elements)
|
||||
console.log(this.args.elements);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,8 +10,7 @@
|
|||
<div
|
||||
class="{{@remove-element-classes}}"
|
||||
type="button"
|
||||
id="{{this.args.prefix}}-{{index}}"
|
||||
{{on "click" this.removeElement}}
|
||||
{{on "click" (fn this.removeElement index)}}
|
||||
>
|
||||
X
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,57 +1,56 @@
|
|||
import MutableArray from '@ember/array/mutable'
|
||||
import { action } from '@ember/object'
|
||||
import Component from '@glimmer/component'
|
||||
import { tracked } from '@glimmer/tracking'
|
||||
import MutableArray from '@ember/array/mutable';
|
||||
import { action } from '@ember/object';
|
||||
import Component from '@glimmer/component';
|
||||
import { tracked } from '@glimmer/tracking';
|
||||
|
||||
export interface UtilStringArraySignature {
|
||||
// The arguments accepted by the component
|
||||
Args: {
|
||||
list: MutableArray<{ value: string }>
|
||||
prefix: string
|
||||
}
|
||||
list: MutableArray<{ value: string }>;
|
||||
prefix: string;
|
||||
onNewElement: (index: number) => void;
|
||||
onDeleteElement: (index: number) => void;
|
||||
};
|
||||
// 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 UtilStringArray extends Component<UtilStringArraySignature> {
|
||||
@action addElement() {
|
||||
MutableArray.apply(this.args.list)
|
||||
this.args.list.pushObject({ value: '' })
|
||||
MutableArray.apply(this.args.list);
|
||||
this.args.list.pushObject({ value: '' });
|
||||
if (this.args.onNewElement)
|
||||
this.args.onNewElement(this.args.list.length - 1);
|
||||
}
|
||||
|
||||
@action removeElement(event: MouseEvent) {
|
||||
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
|
||||
@action removeElement(index: number) {
|
||||
MutableArray.apply(this.args.list);
|
||||
//let index = this.args.list.find((elem) => elem == 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 } {
|
||||
const out: { [key: number]: string } = {}
|
||||
const out: { [key: number]: string } = {};
|
||||
const tmp = arr.map((elem: string, index: number) => {
|
||||
out[index] = elem
|
||||
return elem
|
||||
})
|
||||
return out
|
||||
out[index] = elem;
|
||||
return elem;
|
||||
});
|
||||
return out;
|
||||
}
|
||||
|
||||
countElemsInObj(obj: any): number {
|
||||
let count = 0
|
||||
let count = 0;
|
||||
|
||||
for (var prop in obj) {
|
||||
if (obj.hasOwnProperty(prop)) ++count
|
||||
for (const prop in obj) {
|
||||
if (obj.hasOwnProperty(prop)) ++count;
|
||||
}
|
||||
|
||||
return count
|
||||
return count;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import Route from '@ember/routing/route'
|
||||
import Route from '@ember/routing/route';
|
||||
|
||||
export default class RegisterFormRoute extends Route {
|
||||
async model() {
|
||||
return {
|
||||
list: [{ value: 'one' }, { value: 'two' }],
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -140,4 +140,5 @@
|
|||
|
||||
:root {
|
||||
background-color: var(--background);
|
||||
color: var(--text);
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
74317
frontend-reactive/package-lock.json
generated
74317
frontend-reactive/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -1,123 +1,125 @@
|
|||
{
|
||||
"name": "frontend-reactive",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"description": "Small description for frontend-reactive goes here",
|
||||
"repository": "",
|
||||
"license": "EUPL-1.2",
|
||||
"author": "",
|
||||
"directories": {
|
||||
"doc": "doc",
|
||||
"test": "tests"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "ember build --environment=production",
|
||||
"lint": "concurrently \"npm:lint:*(!fix)\" --names \"lint:\"",
|
||||
"lint:css": "stylelint \"**/*.css\"",
|
||||
"lint:css:fix": "concurrently \"npm:lint:css -- --fix\"",
|
||||
"lint:fix": "concurrently \"npm:lint:*:fix\" --names \"fix:\"",
|
||||
"lint:hbs": "ember-template-lint .",
|
||||
"lint:hbs:fix": "ember-template-lint . --fix",
|
||||
"lint:js": "eslint . --cache",
|
||||
"lint:js:fix": "eslint . --fix",
|
||||
"lint:types": "tsc --noEmit",
|
||||
"start": "ember serve",
|
||||
"test": "concurrently \"npm:lint\" \"npm:test:*\" --names \"lint,test:\"",
|
||||
"test:ember": "ember test"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.25.2",
|
||||
"@ember/optional-features": "^2.1.0",
|
||||
"@ember/string": "^3.1.1",
|
||||
"@ember/test-helpers": "^3.3.1",
|
||||
"@glimmer/component": "^1.1.2",
|
||||
"@glimmer/tracking": "^1.1.2",
|
||||
"@glint/environment-ember-loose": "^1.4.0",
|
||||
"@glint/template": "^1.4.0",
|
||||
"@tsconfig/ember": "^3.0.8",
|
||||
"@types/ember": "^4.0.11",
|
||||
"@types/ember__application": "^4.0.11",
|
||||
"@types/ember__array": "^4.0.10",
|
||||
"@types/ember__component": "^4.0.22",
|
||||
"@types/ember__controller": "^4.0.12",
|
||||
"@types/ember__debug": "^4.0.8",
|
||||
"@types/ember__destroyable": "^4.0.5",
|
||||
"@types/ember__engine": "^4.0.11",
|
||||
"@types/ember__error": "^4.0.6",
|
||||
"@types/ember__helper": "^4.0.8",
|
||||
"@types/ember__modifier": "^4.0.9",
|
||||
"@types/ember__object": "^4.0.12",
|
||||
"@types/ember__owner": "^4.0.9",
|
||||
"@types/ember__polyfills": "^4.0.6",
|
||||
"@types/ember__routing": "^4.0.22",
|
||||
"@types/ember__runloop": "^4.0.10",
|
||||
"@types/ember__service": "^4.0.9",
|
||||
"@types/ember__string": "^3.16.3",
|
||||
"@types/ember__template": "^4.0.7",
|
||||
"@types/ember__test": "^4.0.6",
|
||||
"@types/ember__utils": "^4.0.7",
|
||||
"@types/ember-data": "^4.4.16",
|
||||
"@types/ember-data__adapter": "^4.0.6",
|
||||
"@types/ember-data__model": "^4.0.5",
|
||||
"@types/ember-data__serializer": "^4.0.6",
|
||||
"@types/ember-data__store": "^4.0.7",
|
||||
"@types/qunit": "^2.19.10",
|
||||
"@types/rsvp": "^4.0.9",
|
||||
"@typescript-eslint/eslint-plugin": "^6.21.0",
|
||||
"@typescript-eslint/parser": "^6.21.0",
|
||||
"broccoli-asset-rev": "^3.0.0",
|
||||
"concurrently": "^8.2.2",
|
||||
"ember-auto-import": "^2.7.4",
|
||||
"ember-cli": "~5.11.0",
|
||||
"ember-cli-app-version": "^6.0.1",
|
||||
"ember-cli-babel": "^8.2.0",
|
||||
"ember-cli-clean-css": "^3.0.0",
|
||||
"ember-cli-dependency-checker": "^3.3.2",
|
||||
"ember-cli-htmlbars": "^6.3.0",
|
||||
"ember-cli-inject-live-reload": "^2.1.0",
|
||||
"ember-cli-sri": "^2.1.1",
|
||||
"ember-cli-terser": "^4.0.2",
|
||||
"ember-composable-helpers": "^5.0.0",
|
||||
"ember-data": "~5.3.8",
|
||||
"ember-fetch": "^8.1.2",
|
||||
"ember-infinity": "^3.0.0",
|
||||
"ember-intl": "^7.0.6",
|
||||
"ember-load-initializers": "^2.1.2",
|
||||
"ember-modifier": "^4.2.0",
|
||||
"ember-moment": "^10.0.1",
|
||||
"ember-page-title": "^8.2.3",
|
||||
"ember-qunit": "^8.1.0",
|
||||
"ember-resolver": "^11.0.1",
|
||||
"ember-simple-auth": "^6.1.0",
|
||||
"ember-source": "~5.11.0",
|
||||
"ember-template-lint": "^5.13.0",
|
||||
"ember-tooltips": "^3.6.0",
|
||||
"ember-welcome-page": "^7.0.2",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-plugin-ember": "^11.12.0",
|
||||
"eslint-plugin-n": "^16.6.2",
|
||||
"eslint-plugin-prettier": "^5.2.1",
|
||||
"eslint-plugin-qunit": "^8.1.1",
|
||||
"loader.js": "^4.7.0",
|
||||
"prettier": "^3.3.3",
|
||||
"qunit": "^2.22.0",
|
||||
"qunit-dom": "^2.0.0",
|
||||
"stylelint": "^15.11.0",
|
||||
"stylelint-config-standard": "^34.0.0",
|
||||
"stylelint-prettier": "^4.1.0",
|
||||
"tracked-built-ins": "^3.3.0",
|
||||
"typescript": "^5.5.4",
|
||||
"webpack": "^5.93.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 18"
|
||||
},
|
||||
"ember": {
|
||||
"edition": "octane"
|
||||
},
|
||||
"dependencies": {
|
||||
"@simplewebauthn/browser": "^11.0.0",
|
||||
"moment": "^2.30.1"
|
||||
}
|
||||
"name": "frontend-reactive",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"description": "Small description for frontend-reactive goes here",
|
||||
"repository": "",
|
||||
"license": "EUPL-1.2",
|
||||
"author": "",
|
||||
"directories": {
|
||||
"doc": "doc",
|
||||
"test": "tests"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "ember build --environment=production",
|
||||
"lint": "concurrently \"npm:lint:*(!fix)\" --names \"lint:\"",
|
||||
"lint:css": "stylelint \"**/*.css\"",
|
||||
"lint:css:fix": "concurrently \"npm:lint:css -- --fix\"",
|
||||
"lint:fix": "concurrently \"npm:lint:*:fix\" --names \"fix:\"",
|
||||
"lint:hbs": "ember-template-lint .",
|
||||
"lint:hbs:fix": "ember-template-lint . --fix",
|
||||
"lint:js": "eslint . --cache",
|
||||
"lint:js:fix": "eslint . --fix",
|
||||
"lint:types": "tsc --noEmit",
|
||||
"start": "ember serve",
|
||||
"test": "concurrently \"npm:lint\" \"npm:test:*\" --names \"lint,test:\"",
|
||||
"test:ember": "ember test"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.25.2",
|
||||
"@ember/optional-features": "^2.1.0",
|
||||
"@ember/string": "^3.1.1",
|
||||
"@ember/test-helpers": "^3.3.1",
|
||||
"@glimmer/component": "^1.1.2",
|
||||
"@glimmer/tracking": "^1.1.2",
|
||||
"@glint/environment-ember-loose": "^1.4.0",
|
||||
"@glint/template": "^1.4.0",
|
||||
"@tsconfig/ember": "^3.0.8",
|
||||
"@types/ember": "^4.0.11",
|
||||
"@types/ember__application": "^4.0.11",
|
||||
"@types/ember__array": "^4.0.10",
|
||||
"@types/ember__component": "^4.0.22",
|
||||
"@types/ember__controller": "^4.0.12",
|
||||
"@types/ember__debug": "^4.0.8",
|
||||
"@types/ember__destroyable": "^4.0.5",
|
||||
"@types/ember__engine": "^4.0.11",
|
||||
"@types/ember__error": "^4.0.6",
|
||||
"@types/ember__helper": "^4.0.8",
|
||||
"@types/ember__modifier": "^4.0.9",
|
||||
"@types/ember__object": "^4.0.12",
|
||||
"@types/ember__owner": "^4.0.9",
|
||||
"@types/ember__polyfills": "^4.0.6",
|
||||
"@types/ember__routing": "^4.0.22",
|
||||
"@types/ember__runloop": "^4.0.10",
|
||||
"@types/ember__service": "^4.0.9",
|
||||
"@types/ember__string": "^3.16.3",
|
||||
"@types/ember__template": "^4.0.7",
|
||||
"@types/ember__test": "^4.0.6",
|
||||
"@types/ember__utils": "^4.0.7",
|
||||
"@types/ember-data": "^4.4.16",
|
||||
"@types/ember-data__adapter": "^4.0.6",
|
||||
"@types/ember-data__model": "^4.0.5",
|
||||
"@types/ember-data__serializer": "^4.0.6",
|
||||
"@types/ember-data__store": "^4.0.7",
|
||||
"@types/qunit": "^2.19.10",
|
||||
"@types/rsvp": "^4.0.9",
|
||||
"@typescript-eslint/eslint-plugin": "^6.21.0",
|
||||
"@typescript-eslint/parser": "^6.21.0",
|
||||
"broccoli-asset-rev": "^3.0.0",
|
||||
"concurrently": "^8.2.2",
|
||||
"ember-auto-import": "^2.7.4",
|
||||
"ember-cli": "~5.11.0",
|
||||
"ember-cli-app-version": "^6.0.1",
|
||||
"ember-cli-babel": "^8.2.0",
|
||||
"ember-cli-clean-css": "^3.0.0",
|
||||
"ember-cli-dependency-checker": "^3.3.2",
|
||||
"ember-cli-htmlbars": "^6.3.0",
|
||||
"ember-cli-inject-live-reload": "^2.1.0",
|
||||
"ember-cli-sri": "^2.1.1",
|
||||
"ember-cli-terser": "^4.0.2",
|
||||
"ember-composable-helpers": "^5.0.0",
|
||||
"ember-data": "~5.3.8",
|
||||
"ember-fetch": "^8.1.2",
|
||||
"ember-infinity": "^3.0.0",
|
||||
"ember-intl": "^7.0.6",
|
||||
"ember-load-initializers": "^2.1.2",
|
||||
"ember-modifier": "^4.2.0",
|
||||
"ember-moment": "^10.0.1",
|
||||
"ember-page-title": "^8.2.3",
|
||||
"ember-qunit": "^8.1.0",
|
||||
"ember-radio-button": "^3.0.0-beta.1",
|
||||
"ember-resolver": "^11.0.1",
|
||||
"ember-select-light": "^2.0.5",
|
||||
"ember-simple-auth": "^6.1.0",
|
||||
"ember-source": "~5.11.0",
|
||||
"ember-template-lint": "^5.13.0",
|
||||
"ember-tooltips": "^3.6.0",
|
||||
"ember-welcome-page": "^7.0.2",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-plugin-ember": "^11.12.0",
|
||||
"eslint-plugin-n": "^16.6.2",
|
||||
"eslint-plugin-prettier": "^5.2.1",
|
||||
"eslint-plugin-qunit": "^8.1.1",
|
||||
"loader.js": "^4.7.0",
|
||||
"prettier": "^3.3.3",
|
||||
"qunit": "^2.22.0",
|
||||
"qunit-dom": "^2.0.0",
|
||||
"stylelint": "^15.11.0",
|
||||
"stylelint-config-standard": "^34.0.0",
|
||||
"stylelint-prettier": "^4.1.0",
|
||||
"tracked-built-ins": "^3.3.0",
|
||||
"typescript": "^5.5.4",
|
||||
"webpack": "^5.93.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 18"
|
||||
},
|
||||
"ember": {
|
||||
"edition": "octane"
|
||||
},
|
||||
"dependencies": {
|
||||
"@simplewebauthn/browser": "^11.0.0",
|
||||
"moment": "^2.30.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue