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

Good progress on styling post-registration form

Browse source
This commit is contained in:
Melody Becker 2024-10-29 13:23:04 +01:00
parent 8b03454d6f
commit 1fb924f59c
17 changed files with 234 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,47 +1,63 @@
<div class="registration-form">
<h1 class="registration-form-username">username: {{this.args.username}}</h1>
<div class="registration-form-displayname-wrapper">
<label>
Displayname
<Input
@type="text"
@value={{this.displayname}}
placeholder="Displayname"
/>
</label>
<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>
<Util::MailEntry @data={{this.mail}}/>
<div class="registration-form-description-wrapper">
<label>
<label for="registration-description">
Description
<Input
@type="text"
@value={{this.description}}
placeholder="Account description"
/>
</label>
<Textarea
id="registration-description"
@value={{this.description}}
placeholder="Account description"
/>
</div>
<div class="registration-form-gender-wrapper">
<p class="registration-form-gender-info">Add your preferred pronouns</p>
<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=""
/>
</div>
<div class="register-form-being-wrapper">
<p class="registration-form-being-info">Select the type of being you are. Multiselect is possible</p>
<Util::Multiselect @elements={{this.beingTypes}} />
</div>
<div class="register-form-default-post-mode-wrapper">
<p class="registration-form-default-post-mode-info">Select the default mode for your posts</p>
</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}}
/>
</div>
</fieldset>
<div class="register-form-follow-approval-wrapper">
<label>
Require approval for follow requests
@ -58,8 +74,9 @@
<Input @type="checkbox" name="Indexable" @checked={{this.indexable}} />
</label>
</div>
<div class="register-form-custom-fields-wrapper">
<fieldset class="register-form-custom-fields-wrapper">
<legend>Custom fields</legend>
<Util::MapEdit @list={{this.customProperties}} />
</div>
{{! TODO: Icon, Background, Banner }}
</fieldset>
{{! TODO: Icon, Background, Banner, Bluesky toggle }}
</div>

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

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