mstar/linstrom
1
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages 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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,6 @@
<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
@ -10,38 +11,53 @@
/>
</label>
</div>
<Util::MailEntry @data={{this.mail}}/>
<Util::MailEntry
@wrapper-classes="registration-form-mail-wrapper"
@input-classes="registration-form-mail-input"
@data={{this.mail}}
/>
</div>
<div class="registration-form-description-wrapper">
<label>
<label for="registration-description">
Description
<Input
@type="text"
</label>
<Textarea
id="registration-description"
@value={{this.description}}
placeholder="Account description"
/>
</label>
</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);
}
}

13
frontend-reactive/app/components/util/mail-entry.hbs
View file

@ -1,11 +1,18 @@
<div class="mail-entry {{@wrapper-classes}}">
<label>
Email
<Input @type="text" @value={{this.args.data.mail}} placeholder="Email address" {{on "change" (fn this.checkMail)}}/>
<!--<div class="filling-spacer"/>-->
<Input
class="mail-input {{if this.mailOk "mail-input-ok" "mail-input-error"}} {{@input-classes}}"
@type="text"
@value={{this.args.data.mail}}
placeholder="Email address"
{{on "change" this.checkMail}}
/>
</label>
{{#if this.mailOk}}
<p class="mail-ok">O</p>
<p class="mail-ok mail-status">&#10004;</p>
{{else}}
<p class="mail-error">X</p>
<p class="mail-error mail-status">X</p>
{{/if}}
</div>

26
frontend-reactive/app/components/util/mail-entry.ts
View file

@ -1,27 +1,27 @@
import { action } from '@ember/object'
import { map } from '@ember/object/computed'
import Component from '@glimmer/component'
import { tracked } from '@glimmer/tracking'
import { action } from '@ember/object';
import { map } from '@ember/object/computed';
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
const re = /.+@\S+\.\S+/
const re = /.+@\S+\.\S+/;
export interface UtilMailEntrySignature {
// The arguments accepted by the component
Args: {
data: { mail: string; valid: boolean }
}
data: { mail: string; valid: boolean };
};
// 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 UtilMailEntry extends Component<UtilMailEntrySignature> {
@tracked mailOk = this.args.data.valid
@tracked mailOk = this.args.data.valid;
@action checkMail() {
this.args.data.valid = re.test(this.args.data.mail)
this.mailOk = this.args.data.valid
this.args.data.valid = re.test(this.args.data.mail);
this.mailOk = this.args.data.valid;
}
}

1
frontend-reactive/app/components/util/multiselect.hbs
View file

@ -5,6 +5,7 @@
<Input
@type="checkbox"
name="{{element.name}}"
class="{{@input-classes}}"
@checked={{element.checked}}
{{on "change" this.onChange}}
/>

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

@ -2,8 +2,9 @@
<ul>
{{#each this.args.list as |element index|}}
<li>
<div class="string-array-element-wrapper">
<div class="string-array-element-wrapper {{@element-wrapper-classes}}">
<Input
class="{{@element-classes}}"
@type="text"
@value={{element.value}}
/>

10
frontend-reactive/app/helpers/equals.ts
View file

@ -1,7 +1,7 @@
import { helper } from '@ember/component/helper'
import { helper } from '@ember/component/helper';
export default helper(function equals(args) {
if (args.length != 2) return false
console.log(args[0], args[1])
return args[0] == args[1]
})
if (args.length != 2) return false;
console.log(args[0], args[1]);
return args[0] == args[1];
});

3
frontend-reactive/app/routes/index.ts Normal file
View file

@ -0,0 +1,3 @@
import Route from '@ember/routing/route';
export default class IndexRoute extends Route {}

2
frontend-reactive/app/styles/app.css
View file

@ -3,7 +3,7 @@
/* Note: CSS is fucking stupid. It applies styles not in the order classes are set on an element,
* but in the order they appear in the css files */
/* @import url("debug.css"); */
/*@import url("debug.css");*/
@import url("fonts.css");
@import url("colors.css");
@import url("util.css");

74
frontend-reactive/app/styles/auth/registerForm.css
View file

@ -1,3 +1,75 @@
.registration-form {
background: var(--accent);
background: var(--secondary);
display: flex;
flex-direction: column;
align-items: center;
width: fit-content;
}
.registration-form-name-mail-wrapper {
width: fit-content;
display: flex;
flex-direction: column;
align-items: end;
}
.registration-form-username {
width: max-content;
}
.registration-form-displayname-wrapper {
display: flex;
}
.registration-form-mail-wrapper {
display: flex;
width: max-content;
flex-direction: row;
}
.registration-form-mail-input {
width: max-content;
/*display: flex;*/
/*flex-grow: 1;*/
}
.registration-form-description-wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.registration-form-gender-wrapper {
}
.registration-form-gender-info {
}
.register-form-being-wrapper {
margin: 1em;
}
.registration-form-being-info {
}
.register-form-default-post-mode-wrapper {
margin-bottom: 1em;
}
.registration-form-default-post-mode-info {
}
.register-form-follow-approval-wrapper {
margin-bottom: 0.5em;
}
.register-form-indexable-wrapper {
margin-bottom: 0.5em;
}
.register-form-custom-fields-wrapper {
flex-grow: 1;
width: 80%;
margin-bottom: 1em;
}

4
frontend-reactive/app/styles/util.css
View file

@ -15,3 +15,7 @@
margin-top: 0.2em;
margin-bottom: 0.2em;
}
.filling-spacer {
flex-grow: 1;
}

37
frontend-reactive/app/styles/util/mailEntry.css
View file

@ -1,6 +1,41 @@
.mail-entry {
display: flex;
flex-direction: row;
}
.mail-input {
outline: 0;
margin-top: 1em;
margin-bottom: 1em;
}
.mail-input-ok {
border: 1px solid green;
box-shadow: 0px 0px 5px green;
}
.mail-input-error {
border: 1px solid red;
box-shadow: 0px 0px 5px red;
}
.mail-status {
/*margin: 0;*/
margin-top: 0.75em;
margin-left: 0.4em;
}
.mail-ok {
color: green;
/*margin-top: -0.25lh;*/
/*margin-bottom: -0.28lh;*/
font-size: 0.9lh;
margin: 0;
margin-left: 0.2em;
}
.mail-ok {
.mail-error {
color: red;
margin-bottom: 0;
margin-left: 0.6em;
}

4
frontend-reactive/app/templates/application.hbs
View file

@ -1,4 +1,2 @@
{{page-title "FrontendReactive"}}
{{outlet}}{{!----}}
{{!--<Timeline @notes={{@model.notes}} />--}}
{{outlet}}

2
frontend-reactive/app/templates/auth.hbs
View file

@ -1,2 +1,2 @@
{{page-title "Auth"}}
{{outlet}}
<Auth::Login />

2
frontend-reactive/app/templates/index.hbs Normal file
View file

@ -0,0 +1,2 @@
{{page-title "Index"}}
<Timeline @notes={{@model.notes}} />

4
frontend-reactive/app/templates/registerform.hbs
View file

@ -1,4 +1,2 @@
{{page-title "RegisterForm"}}
<Auth::Login />
<br>
{{!--<Auth::PostRegistrationForm @username="bob" />--}}
<Auth::PostRegistrationForm @username="bob" />

11
frontend-reactive/tests/unit/routes/index-test.ts Normal file
View file

@ -0,0 +1,11 @@
import { module, test } from 'qunit';
import { setupTest } from 'frontend-reactive/tests/helpers';
module('Unit | Route | index', function (hooks) {
setupTest(hooks);
test('it exists', function (assert) {
const route = this.owner.lookup('route:index');
assert.ok(route);
});
});