diff options
Diffstat (limited to 'vnext/src/components')
| -rw-r--r-- | vnext/src/components/Settings.js | 215 |
1 files changed, 215 insertions, 0 deletions
diff --git a/vnext/src/components/Settings.js b/vnext/src/components/Settings.js new file mode 100644 index 00000000..fc28c3b5 --- /dev/null +++ b/vnext/src/components/Settings.js @@ -0,0 +1,215 @@ +import React from 'react'; + +export default class Settings extends React.Component { + constructor(props) { + super(props) + this.state = { + settings: {}, + userinfo: {}, + facebook: {} + } + } + render() { + const { settings, userinfo, facebook } = this.state; + return ( + <div id="content"> + <article> + <h1>Settings</h1> + <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> + </form> + <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 /> + <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 ? ( + <form action="/settings" method="post"> + <div>Telegram: <b>{{ telegram_name }}</b> — + <input type="hidden" name="page" value="telegram-del" /> + <input type="submit" value=" Disable " /> + </div> + </form> + ) : ( + <p>To connect Telegram account: send any text message to <a href="https://telegram.me/Juick_bot">@Juick_bot</a> + </p> + )} + </fieldset> + {settings.jids && ( + <form> + <fieldset> + <legend style={{ + background: 'url(//static.juick.com/settings/xmpp.png) no-repeat', + paddingLeft: '58px', lineHeight: '48px' + }}>XMPP accounts + </legend> + <p>Your accounts:</p> + <p> + { + settings.jids.map(jid => + <React.Fragment> + <label><input type="radio" name="delete" value={jid} />${jid}</label><br /> + </React.Fragment> + ) + } + {settings.auths.map(auth => + <React.Fragment> + <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( + <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> + </form> + )} + <fieldset> + <legend style={{ + background: 'url(//static.juick.com/settings/email.png) no-repeat', + paddingLeft: '58px', + lineHeight: '48px' + }}>E-mail</legend> + <form> + <p>Add account:<br /> + <input type="text" name="account" /> + <input type="hidden" name="page" value="email-add" /> + <input type="submit" value=" Add " /> + </p> + </form> + <form> + <p>Your accounts:</p> + <p> + { + settings.emails ? settings.emails.map(email => + <React.Fragment> + <label> + <input type="radio" name="account" value="{{ email }}" />{{ email }} + </label> + <br /> + {settings.emails.length > 1 && + <p><input type="hidden" name="page" value="email-del" /><input type="submit" value=" Delete " /></p> + } + </React.Fragment> + ) : `-` + } + </p> + </form> + {settings.emails && + <React.Fragment> + {/** email_off **/} + <form> + You can receive notifications to email:<br /> + Sent to <select name="account"> + <option value="">Disabled</option> + {email.map(email => + <option value={email} selected={email.active == email}> + {email} + </option> + )} + </select> + <input type="hidden" name="page" value="email-subscr" /> + <input type="submit" value="OK" /> + </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> + </React.Fragment> + } + </fieldset> + <fieldset> + <legend style={{ + background: 'url(//static.juick.com/settings/facebook.png) no-repeat', + paddingLeft: '58px', lineHeight: '48px' + }}> + Facebook + </legend> + {facebook.connected ? ( + facebook.crosspostEnabled ? + <form action="/settings" method="post"> + <div> + Facebook: <b>Enabled</b> — + <input type="hidden" name="page" value="facebook-disable" /> + <input type="submit" value=" Disable " /> + </div> + </form> + : + <form action="/settings" method="post"> + <div> + Facebook: <b>Disabled</b> — + <input type="hidden" name="page" value="facebook-enable" /> + <input type="submit" value=" Enable " /> + </div> + </form> + ) : ( + <p>Cross-posting to Facebook: + <a href="/_fblogin"> + <img src="//static.juick.com/facebook-connect.png" alt="Connect to Facebook" /> + </a> + </p> + )} + </fieldset> + <fieldset> + <legend style={{background: 'url(//static.juick.com/settings/twitter.png) no-repeat', + paddingLeft: '58px', lineHeight: '48px'}}> + Twitter</legend> + { settings.twitter_name ? + <form action="/settings" method="post"> + <div>Twitter: <b>{ settings.twitter_name }</b> — + <input type="hidden" name="page" value="twitter-del" /> + <input type="submit" value=" Disable " /> + </div> + </form> + : + <p>Cross-posting to Twitter: <a href="/_twitter"><img src="//static.juick.com/twitter-connect.png" + alt="Connect to Twitter" /></a></p> + } + </fieldset> + + </article> + </div > + ) + } +}
\ No newline at end of file |