diff options
Diffstat (limited to 'vnext/src/components')
| -rw-r--r-- | vnext/src/components/Settings.js | 128 |
1 files changed, 65 insertions, 63 deletions
diff --git a/vnext/src/components/Settings.js b/vnext/src/components/Settings.js index d4947e5a..d3eced63 100644 --- a/vnext/src/components/Settings.js +++ b/vnext/src/components/Settings.js @@ -1,66 +1,71 @@ import React from 'react'; +import { me } from '../api'; + +import { UserType } from './Types'; + +import Button from './Button'; + export default class Settings extends React.Component { constructor(props) { super(props); this.state = { settings: {}, - userinfo: {}, - facebook: {} + me: {} }; } + componentDidMount() { + me().then(visitor => { + this.setState({ + me: visitor + }); + }); + } + onSubmitAvatar = (event) => { + if (event.preventDefault) { + event.preventDefault(); + } + console.log('avatar update'); + } + passwordChanged = (event) => { + this.setState({ + settings: { password : event.target.value } + }); + } + onSubmitPassword = (event) => { + if (event.preventDefault) { + event.preventDefault(); + } + console.log('password update'); + } render() { - const { settings, userinfo, facebook } = this.state; + const { me } = this.state; return ( <article> <h1>Settings</h1> + <fieldset> + <legend>Changing your avatar</legend> <form> <p>Avatar: <input type="file" name="avatar" /><br /> <small>Recommendations: PNG, 96x96, <50Kb. Also, JPG and GIF supported.</small></p> - <p><input type="hidden" name="page" value="about" /><input type="submit" value=" OK " /></p> - <p>Full name: <input type="text" name="fullname" value={userinfo.fullName} /></p> - <p>Country: <input type="text" name="country" value={userinfo.country} /></p> - <p>URL: <input type="text" name="url" value={userinfo.url} size="32" /><br /> - <small>Please, start with "http://"</small></p> - <p>About:<br /> - <input type="text" name="descr" value={userinfo.description} style={{ width: '100%' }} /><br /> - <small>Max. 255 symbols</small></p> + <p><input type="hidden" name="page" value="about" /> + <Button onClick={this.onSubmitAvatar}>Update</Button> + </p> </form> + </fieldset> <fieldset> <legend>Changing your password</legend> - <form onSubmit={this.updatePassword}> - <input type="hidden" name="page" value="password" /> - <p>Change password: <input type="password" name="password" size="8" value={settings.password} /> - <input type="submit" value=" Update " /><br /> + <form> + <p>Change password: <input type="password" name="password" size="8" onChange={this.passwordChanged} /> + <Button onClick={this.onSubmitPassword}>Update</Button><br /> <i>(max. length - 16 symbols)</i></p> </form> </fieldset> - - - <form onSubmit={this.updateNotificationSettings}> - <fieldset> - <legend>Notification options</legend> - <p> - <input type="checkbox" name="jnotify" checked={settings.repliesEnabled} /> - Reply notifications ("Message posted") - </p> - <p><input type="checkbox" name="subscr_notify" checked={settings.subscriptionsEnabled} /> - Subscriptions notifications ("@user subscribed...") - </p> - <p><input type="checkbox" name="recomm" checked={settings.recommendationsEnabled} /> - Posts recommendations ("Recommended by @user") - </p> - <p><input type="submit" value=" OK " /></p> - </fieldset> - </form> <fieldset> - <legend style={{ - background: 'url(//telegram.org/favicon.ico?3) no-repeat', - paddingLeft: '58px', lineHeight: '48px' - }}>Telegram</legend> - {settings.telegramName ? ( + <legend>Telegram</legend> + {me.telegramName ? ( <form action="/settings" method="post"> - <div>Telegram: <b> telegram_name </b>— + <div>Telegram: <b> {me.telegramName} </b>— <input type="hidden" name="page" value="telegram-del" /> <input type="submit" value=" Disable " /> </div> @@ -70,7 +75,7 @@ export default class Settings extends React.Component { </p> )} </fieldset> - {settings.jids && ( + {me.jids && ( <form> <fieldset> <legend style={{ @@ -81,24 +86,17 @@ export default class Settings extends React.Component { <p>Your accounts:</p> <p> { - settings.jids.map(jid => + me.jids.map(jid => <React.Fragment key="jid"> - <label><input type="radio" name="delete" value={jid} />${jid}</label><br /> + <label><input type="radio" name="delete" value={jid} />{jid}</label><br /> </React.Fragment> ) } - {settings.auths.map(auth => - <React.Fragment key={auth.account}> - <label><input type="radio" name="delete" - value={auth.account} />{auth.account}</label> - — <a href="#" - onClick="alert(\'To confirm, please send "AUTH {{ auth.getAuthCode() }}" (without quotes) from this account to "juick@juick.com".\'); return false;">Confirm</a><br /> - </React.Fragment> - )} </p> - {settings.jids && settings.jids.length > 1( + { + me.jids && me.jids.length > 1 && <p><input type="hidden" name="page" value="jid-del" /><input type="submit" value=" Delete " /></p> - )} + } <p>To add new jabber account: send any text message to <a href="xmpp:juick@juick.com?message;body=login">juick@juick.com</a> </p> </fieldset> @@ -121,13 +119,13 @@ export default class Settings extends React.Component { <p>Your accounts:</p> <p> { - settings.emails ? settings.emails.map(email => + me.emails ? me.emails.map(email => <React.Fragment key={email}> <label> <input type="radio" name="account" value="{{ email }}" />{email} </label> <br /> - {settings.emails.length > 1 && + {me.emails.length > 1 && <p><input type="hidden" name="page" value="email-del" /><input type="submit" value=" Delete " /></p> } </React.Fragment> @@ -135,15 +133,15 @@ export default class Settings extends React.Component { } </p> </form> - {settings.emails && + {me.emails && <React.Fragment> {/** email_off **/} <form> You can receive notifications to email:<br /> Sent to <select name="account"> <option value="">Disabled</option> - {settings.emails.map(email => - <option key={email} value={email} selected={email.active == email}> + {me.emails.map(email => + <option key={email} value={email} selected={me.activeEmail == email}> {email} </option> )} @@ -153,8 +151,7 @@ export default class Settings extends React.Component { </form> {/** /email_off **/} <p> </p> - <p>You can post to Juick via e-mail. Send your <span style="text-decoration: underline">plain text</span> - messages to <span><a href="mailto:juick@juick.com">juick@juick.com</a></span>. You can attach one photo or video file.</p> + <p>You can post to Juick via e-mail. Send your <u>plain text</u> messages to <span><a href="mailto:juick@juick.com">juick@juick.com</a></span>. You can attach one photo or video file.</p> </React.Fragment> } </fieldset> @@ -165,8 +162,8 @@ export default class Settings extends React.Component { }}> Facebook </legend> - {facebook.connected ? ( - facebook.crosspostEnabled ? + {me.facebookStatus && me.facebookStatus.connected ? ( + me.facebookStatus.crosspostEnabled ? <form action="/settings" method="post"> <div> Facebook: <b>Enabled</b> — @@ -196,9 +193,9 @@ export default class Settings extends React.Component { paddingLeft: '58px', lineHeight: '48px' }}> Twitter</legend> - {settings.twitter_name ? + {me.twitterName ? <form action="/settings" method="post"> - <div>Twitter: <b>{settings.twitter_name}</b> — + <div>Twitter: <b>{me.twitterName}</b> — <input type="hidden" name="page" value="twitter-del" /> <input type="submit" value=" Disable " /> </div> @@ -213,3 +210,8 @@ export default class Settings extends React.Component { ); } } + +Settings.propTypes = { + visitor: UserType.isRequired +}; + |