diff options
Diffstat (limited to 'vnext')
| -rw-r--r-- | vnext/src/components/Settings.js | 215 | ||||
| -rw-r--r-- | vnext/src/index.js | 10 |
2 files changed, 223 insertions, 2 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 diff --git a/vnext/src/index.js b/vnext/src/index.js index 5bf7c021..492b569e 100644 --- a/vnext/src/index.js +++ b/vnext/src/index.js @@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'; import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'; import Icon from './components/Icon'; import { Discover, Discussions, Blog, Tag, Home } from './components/Feeds'; +import Settings from './components/Settings'; import Post from './components/Post'; import Thread from './components/Thread'; import LoginButton from './components/LoginButton'; @@ -91,7 +92,7 @@ class App extends React.Component { <div id="header_wrapper"> {this.state.visitor.uid > 0 ? <div id="ctitle"> - { this.state.visitor.uname ? <Avatar user={this.state.visitor} /> : <Icon name="ei-spinner" size="m" /> } + {this.state.visitor.uname ? <Avatar user={this.state.visitor} /> : <Icon name="ei-spinner" size="m" />} </div> : <div id="logo"><Link to="/">Juick</Link></div> @@ -126,7 +127,12 @@ class App extends React.Component { <Switch> <Route exact path="/" render={(props) => <Discover visitor={this.state.visitor} {...props} />} /> <Route exact path="/home" render={(props) => <Home visitor={this.state.visitor} {...props} />} /> - <Route exact path="/discussions" render={(props) => <Discussions visitor={this.state.visitor} {...props} />} /> + <Route exact path="/discussions" render={(props) => + <Discussions visitor={this.state.visitor} {...props} /> + } /> + <Route exact path="/settings" render={(props) => + <Settings visitor={this.state.visitor} {...props} /> + } /> <Route exact path="/post" render={(props) => <Post visitor={this.state.visitor} {...props} />} /> <Route exact path="/:user" render={(props) => <Blog visitor={this.state.visitor} {...props} />} /> <Route exact path="/tag/:tag" render={(props) => <Tag visitor={this.state.visitor} {...props} />} /> |