added red x for errors in field
This commit is contained in:
parent
d5fdee1d3c
commit
b1ba96270b
4 changed files with 6 additions and 9 deletions
|
@ -129,10 +129,11 @@ class ChannelCreateForm extends React.Component {
|
||||||
<div className="column column--3 column--sml-10">
|
<div className="column column--3 column--sml-10">
|
||||||
<label className="label" htmlFor="new-channel-name">Name:</label>
|
<label className="label" htmlFor="new-channel-name">Name:</label>
|
||||||
</div><div className="column column--6 column--sml-10">
|
</div><div className="column column--6 column--sml-10">
|
||||||
<div className="input-text--primary flex-container--row flex-container--left-bottom">
|
<div className="input-text--primary flex-container--row flex-container--left-bottom span--relative">
|
||||||
<span>@</span>
|
<span>@</span>
|
||||||
<input type="text" name="channel" id="new-channel-name" className="input-text" placeholder="exampleChannelName" value={this.state.channel} onChange={this.handleChannelInput} />
|
<input type="text" name="channel" id="new-channel-name" className="input-text" placeholder="exampleChannelName" value={this.state.channel} onChange={this.handleChannelInput} />
|
||||||
<span id="input-success-channel-name" className="info-message--success">{'\u2713'}</span>
|
{ (this.state.channel && !this.state.error) && <span id="input-success-channel-name" className="info-message--success span--absolute">{'\u2713'}</span> }
|
||||||
|
{ this.state.error && <span id="input-success-channel-name" className="info-message--failure span--absolute">{'\u2716'}</span> }
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -143,11 +143,6 @@ class PublishForm extends React.Component {
|
||||||
<div className="row row--padded row--no-top row--no-bottom row--wide">
|
<div className="row row--padded row--no-top row--no-bottom row--wide">
|
||||||
<PublishMetadataInputs />
|
<PublishMetadataInputs />
|
||||||
</div>
|
</div>
|
||||||
{ this.props.publishSubmitError && (
|
|
||||||
<div className="row align-content-center">
|
|
||||||
<p className="info-message-placeholder info-message--failure">{this.props.publishSubmitError}</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="row row--wide align-content-center">
|
<div className="row row--wide align-content-center">
|
||||||
<button id="publish-submit" className="button--primary button--large" onClick={this.publish}>Publish</button>
|
<button id="publish-submit" className="button--primary button--large" onClick={this.publish}>Publish</button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -155,7 +150,7 @@ class PublishForm extends React.Component {
|
||||||
<button className="button--cancel" onClick={this.props.onFileClear}>Cancel</button>
|
<button className="button--cancel" onClick={this.props.onFileClear}>Cancel</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="row row--short align-content-center">
|
<div className="row row--short align-content-center">
|
||||||
<p className="fine-print">By clicking 'Upload', you affirm that you have the rights to publish this content to the LBRY network, and that you understand the properties of publishing it to a decentralized, user-controlled network. <a className="link--primary" target="_blank" href="https://lbry.io/learn">Read more.</a></p>
|
<p className="fine-print">By clicking 'Publish', you affirm that you have the rights to publish this content to the LBRY network, and that you understand the properties of publishing it to a decentralized, user-controlled network. <a className="link--primary" target="_blank" href="https://lbry.io/learn">Read more.</a></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -5,7 +5,7 @@ class PublishMetadataInputs extends React.Component {
|
||||||
constructor (props) {
|
constructor (props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
showInputs : false,
|
showInputs: false,
|
||||||
};
|
};
|
||||||
this.toggleShowInputs = this.toggleShowInputs.bind(this);
|
this.toggleShowInputs = this.toggleShowInputs.bind(this);
|
||||||
this.handleDescriptionInput = this.handleDescriptionInput.bind(this);
|
this.handleDescriptionInput = this.handleDescriptionInput.bind(this);
|
||||||
|
|
|
@ -72,6 +72,7 @@ class PublishUrlInput extends React.Component {
|
||||||
|
|
||||||
<input type="text" id="claim-name-input" className="input-text" name='claim' placeholder="your-url-here" onChange={this.handleInput} value={this.props.claim}/>
|
<input type="text" id="claim-name-input" className="input-text" name='claim' placeholder="your-url-here" onChange={this.handleInput} value={this.props.claim}/>
|
||||||
{ (this.props.claim && !this.props.urlError) && <span id="input-success-claim-name" className="info-message--success span--absolute">{'\u2713'}</span> }
|
{ (this.props.claim && !this.props.urlError) && <span id="input-success-claim-name" className="info-message--success span--absolute">{'\u2713'}</span> }
|
||||||
|
{ this.props.urlError && <span id="input-success-channel-name" className="info-message--failure span--absolute">{'\u2716'}</span> }
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in a new issue