chore: wrap RepositoryModal's fields in Form component (#4034)

* chore: wrap RepositoryModal's fields in Form component

* wip
This commit is contained in:
Ngô Quốc Đạt 2024-09-28 23:08:52 +07:00 committed by GitHub
parent 40a84fc3d8
commit f8560ef51b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 63 additions and 57 deletions

View File

@ -5,6 +5,7 @@ import Select from 'flarum/common/components/Select';
import Stream from 'flarum/common/utils/Stream'; import Stream from 'flarum/common/utils/Stream';
import Button from 'flarum/common/components/Button'; import Button from 'flarum/common/components/Button';
import extractText from 'flarum/common/utils/extractText'; import extractText from 'flarum/common/utils/extractText';
import Form from 'flarum/common/components/Form';
export interface IAuthMethodModalAttrs extends IInternalModalAttrs { export interface IAuthMethodModalAttrs extends IInternalModalAttrs {
onsubmit: (type: string, host: string, token: string) => void; onsubmit: (type: string, host: string, token: string) => void;
@ -45,38 +46,40 @@ export default class AuthMethodModal<CustomAttrs extends IAuthMethodModalAttrs =
return ( return (
<div className="Modal-body"> <div className="Modal-body">
<div className="Form-group"> <Form>
<label>{app.translator.trans('flarum-extension-manager.admin.auth_config.add_modal.type_label')}</label> <div className="Form-group">
<Select options={types} value={this.type()} onchange={this.type} /> <label>{app.translator.trans('flarum-extension-manager.admin.auth_config.add_modal.type_label')}</label>
</div> <Select options={types} value={this.type()} onchange={this.type} />
<div className="Form-group"> </div>
<label>{app.translator.trans('flarum-extension-manager.admin.auth_config.add_modal.host_label')}</label> <div className="Form-group">
<input <label>{app.translator.trans('flarum-extension-manager.admin.auth_config.add_modal.host_label')}</label>
className="FormControl" <input
bidi={this.host} className="FormControl"
placeholder={app.translator.trans('flarum-extension-manager.admin.auth_config.add_modal.host_placeholder')} bidi={this.host}
/> placeholder={app.translator.trans('flarum-extension-manager.admin.auth_config.add_modal.host_placeholder')}
</div> />
<div className="Form-group"> </div>
<label>{app.translator.trans('flarum-extension-manager.admin.auth_config.add_modal.token_label')}</label> <div className="Form-group">
<textarea <label>{app.translator.trans('flarum-extension-manager.admin.auth_config.add_modal.token_label')}</label>
className="FormControl" <textarea
oninput={(e: InputEvent) => this.token((e.target as HTMLTextAreaElement).value)} className="FormControl"
rows="6" oninput={(e: InputEvent) => this.token((e.target as HTMLTextAreaElement).value)}
placeholder={ rows="6"
this.token().startsWith('unchanged:') placeholder={
? extractText(app.translator.trans('flarum-extension-manager.admin.auth_config.add_modal.unchanged_token_placeholder')) this.token().startsWith('unchanged:')
: '' ? extractText(app.translator.trans('flarum-extension-manager.admin.auth_config.add_modal.unchanged_token_placeholder'))
} : ''
> }
{this.token().startsWith('unchanged:') ? '' : this.token()} >
</textarea> {this.token().startsWith('unchanged:') ? '' : this.token()}
</div> </textarea>
<div className="Form-group"> </div>
<Button className="Button Button--primary" onclick={this.submit.bind(this)}> <div className="Form-group">
{app.translator.trans('flarum-extension-manager.admin.auth_config.add_modal.submit_button')} <Button className="Button Button--primary" onclick={this.submit.bind(this)}>
</Button> {app.translator.trans('flarum-extension-manager.admin.auth_config.add_modal.submit_button')}
</div> </Button>
</div>
</Form>
</div> </div>
); );
} }

View File

@ -5,6 +5,7 @@ import Select from 'flarum/common/components/Select';
import Stream from 'flarum/common/utils/Stream'; import Stream from 'flarum/common/utils/Stream';
import Button from 'flarum/common/components/Button'; import Button from 'flarum/common/components/Button';
import { type Repository } from './ConfigureComposer'; import { type Repository } from './ConfigureComposer';
import Form from 'flarum/common/components/Form';
export interface IRepositoryModalAttrs extends IInternalModalAttrs { export interface IRepositoryModalAttrs extends IInternalModalAttrs {
onsubmit: (repository: Repository, key: string) => void; onsubmit: (repository: Repository, key: string) => void;
@ -41,31 +42,33 @@ export default class RepositoryModal<CustomAttrs extends IRepositoryModalAttrs =
return ( return (
<div className="Modal-body"> <div className="Modal-body">
<div className="Form-group"> <Form>
<label>{app.translator.trans('flarum-extension-manager.admin.composer.repositories.add_modal.name_label')}</label> <div className="Form-group">
<input className="FormControl" bidi={this.name} /> <label>{app.translator.trans('flarum-extension-manager.admin.composer.repositories.add_modal.name_label')}</label>
</div> <input className="FormControl" bidi={this.name} />
<div className="Form-group"> </div>
<label>{app.translator.trans('flarum-extension-manager.admin.composer.repositories.add_modal.type_label')}</label> <div className="Form-group">
<Select <label>{app.translator.trans('flarum-extension-manager.admin.composer.repositories.add_modal.type_label')}</label>
options={types} <Select
value={this.repository().type} options={types}
onchange={(value: 'composer' | 'vcs' | 'path') => this.repository({ ...this.repository(), type: value })} value={this.repository().type}
/> onchange={(value: 'composer' | 'vcs' | 'path') => this.repository({ ...this.repository(), type: value })}
</div> />
<div className="Form-group"> </div>
<label>{app.translator.trans('flarum-extension-manager.admin.composer.repositories.add_modal.url')}</label> <div className="Form-group">
<input <label>{app.translator.trans('flarum-extension-manager.admin.composer.repositories.add_modal.url')}</label>
className="FormControl" <input
onchange={(e: Event) => this.repository({ ...this.repository(), url: (e.target as HTMLInputElement).value })} className="FormControl"
value={this.repository().url} onchange={(e: Event) => this.repository({ ...this.repository(), url: (e.target as HTMLInputElement).value })}
/> value={this.repository().url}
</div> />
<div className="Form-group"> </div>
<Button className="Button Button--primary" onclick={this.submit.bind(this)}> <div className="Form-group">
{app.translator.trans('flarum-extension-manager.admin.composer.repositories.add_modal.submit_button')} <Button className="Button Button--primary" onclick={this.submit.bind(this)}>
</Button> {app.translator.trans('flarum-extension-manager.admin.composer.repositories.add_modal.submit_button')}
</div> </Button>
</div>
</Form>
</div> </div>
); );
} }