Inital settings page

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} />} />