LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

got login component working

Browse source
This commit is contained in:
bill bittner 2018-01-05 15:11:45 -08:00
parent 257df15e44
commit 697501410b
4 changed files with 52 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
react/components/channelLoginForm.jsx
View file

@ -19,6 +19,24 @@ class ChannelLoginForm extends React.Component {
}
loginToChannel (event) {
event.preventDefault();
const params = `username=${this.state.name}&password=${this.state.password}`;
const url = '/login';
const that = this;
this.props.makePostRequest(url, params)
.then(result => {
that.props.updateLoggedInChannelOutsideReact(result.channelName, result.channelClaimId, result.shortChannelId);
that.props.updateUploaderState('loggedInChannelName', result.channelName);
that.props.updateUploaderState('loggedInChannelShortId', result.shortChannelId);
that.props.selectOption(result.channelName);
})
.catch(error => {
console.log('login error', error);
if (error.message) {
that.setState({'error': error.message});
} else {
that.setState({'error': 'There was an error logging into your channel'});
}
});
}
render () {
return (

41
react/components/channelSelector.jsx
View file

@ -9,24 +9,28 @@ class ChannelSelector extends React.Component {
constructor (props) {
super(props);
this.state = {
displayCreateOrLogin: LOGIN,
optionState: LOGIN,
};
this.toggleCreateOrLogin = this.toggleCreateOrLogin.bind(this);
this.handleSelection = this.handleSelection.bind(this);
this.selectOption = this.selectOption.bind(this);
this.updateLoggedInChannelOutsideReact = this.updateLoggedInChannelOutsideReact.bind(this);
}
componentWillMount () {
if (this.props.loggedInChannelName) {
this.setState({ displayCreateOrLogin: null });
this.setState({ optionState: null });
}
}
toggleCreateOrLogin (event) {
handleSelection (event) {
const selectedOption = event.target.selectedOptions[0].value;
if (selectedOption === 'login') {
this.setState({ displayCreateOrLogin: LOGIN });
} else if (selectedOption === 'create') {
this.setState({ displayCreateOrLogin: CREATE });
} else {
this.setState({ displayCreateOrLogin: null });
this.selectOption(selectedOption);
}
selectOption (option) {
this.setState({optionState: option});
}
updateLoggedInChannelOutsideReact (channelName, channelClaimId, shortChannelId) {
// update anywhere on page that needs to be updated outside of this component
setUserCookies(channelName, channelClaimId, shortChannelId);
replaceChannelOptionInNavBarChannelSelect(channelName);
}
render () {
return (
@ -39,18 +43,27 @@ class ChannelSelector extends React.Component {
<div className="column column--3">
<label className="label" htmlFor="channel-name-select">Channel:</label>
</div><div className="column column--7">
<select type="text" id="channel-name-select" className="select select--arrow" onChange={this.toggleCreateOrLogin}>
<select type="text" id="channel-name-select" className="select select--arrow" value={this.state.optionState} onChange={this.handleSelection}>
{ this.props.loggedInChannelName && <option value={this.props.loggedInChannelName} id="publish-channel-select-channel-option">{this.props.loggedInChannelName}</option> }
<option value="login">Existing</option>
<option value="create">New</option>
</select>
</div>
{ (this.state.displayCreateOrLogin === LOGIN) && <ChannelLoginForm /> }
{ (this.state.displayCreateOrLogin === CREATE) &&
{ (this.state.optionState === LOGIN) &&
<ChannelLoginForm
makePostRequest={this.props.makePostRequest}
updateLoggedInChannelOutsideReact={this.updateLoggedInChannelOutsideReact}
updateUploaderState={this.props.updateUploaderState}
selectOption={this.selectOption}
/> }
{ (this.state.optionState === CREATE) &&
<ChannelCreateForm
makeGetRequest={this.props.makeGetRequest}
cleanseInput={this.props.cleanseInput}
makeGetRequest={this.props.makeGetRequest}
updateLoggedInChannelOutsideReact={this.updateLoggedInChannelOutsideReact}
updateUploaderState={this.props.updateUploaderState}
selectOption={this.selectOption}
/> }
</div>

3
react/components/publishForm.jsx
View file

@ -91,12 +91,13 @@ class PublishForm extends React.Component {
updateUploaderState={this.props.updateUploaderState}
/>
<ChannelSelector
channel={this.props.channel}
loggedInChannelName={this.props.loggedInChannelName}
publishToChannel={this.props.publishToChannel}
cleanseInput={this.props.cleanseInput}
updateUploaderState={this.updateUploaderState}
makeGetRequest={this.props.makeGetRequest}
makePostRequest={this.props.makePostRequest}
updateUploaderState={this.props.updateUploaderState}
/>
<MetadataInputs />

3
react/uploader.js
View file

@ -14,7 +14,6 @@ const initialState = {
publishToChannel : false,
file : null,
title : '',
channel : null,
claim : '',
thumbnail : '',
description : '',
@ -122,13 +121,13 @@ class Uploader extends React.Component {
updateUploaderState={this.updateUploaderState}
clearUploaderState={this.clearUploaderState}
makeGetRequest={this.makeGetRequest}
makePostRequest={this.makePostRequest}
cleanseInput={this.cleanseInput}
loggedInChannelName={this.state.loggedInChannelName}
loggedInChannelShortId={this.state.loggedInChannelShortId}
publishToChannel={this.state.publishToChannel}
file={this.state.file}
title={this.state.title}
channel={this.state.channel}
claim={this.state.claim}
thumbnail={this.state.thumbnail}
description={this.state.description}