mstar/linstrom
1
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity Actions

Getting work done. Registration form taking shape

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

79
frontend-reactive/app/components/auth/registration-form.hbs
View file

@ -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>

68
frontend-reactive/app/components/auth/registration-form.ts
View file

@ -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');
}
}

16
frontend-reactive/app/components/util/multiselect.ts
View file

@ -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);
}
}

3
frontend-reactive/app/components/util/string-array.hbs
View file

@ -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>

59
frontend-reactive/app/components/util/string-array.ts
View file

@ -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;
}
}

4
frontend-reactive/app/routes/registerform.ts
View file

@ -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' }],
}
};
}
}

1
frontend-reactive/app/styles/colors.css
View file

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

BIN
frontend-reactive/bun.lockb
View file

Binary file not shown.

74317
frontend-reactive/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

244
frontend-reactive/package.json
View file

@ -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"
}
}