aboutsummaryrefslogtreecommitdiff
path: root/vnext
diff options
context:
space:
mode:
Diffstat (limited to 'vnext')
-rw-r--r--vnext/src/components/Settings.js215
-rw-r--r--vnext/src/index.js10
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, &lt;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 &quot;http://&quot;</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} />
+ &nbsp;Reply notifications (&quot;Message posted&quot;)
+ </p>
+ <p><input type="checkbox" name="subscr_notify" checked={settings.subscriptionsEnabled} />
+ &nbsp;Subscriptions notifications (&quot;@user subscribed...&quot;)
+ </p>
+ <p><input type="checkbox" name="recomm" checked={settings.recommendationsEnabled} />
+ &nbsp;Posts recommendations (&quot;Recommended by @user&quot;)
+ </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> &mdash;
+ <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>
+ &mdash; <a href="#"
+ onclick="alert(\'To confirm, please send &quot;AUTH {{ auth.getAuthCode() }}&quot; (without quotes) from this account to &quot;juick@juick.com&quot;.\'); 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>&nbsp;</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> &mdash;
+ <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> &mdash;
+ <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> &mdash;
+ <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} />} />