/settings updates

2 files changed, 69 insertions, 63 deletions

diff --git a/vnext/src/api/index.js b/vnext/src/api/index.js
index efa57cf1..90c8b15e 100644
--- a/vnext/src/api/index.js
+++ b/vnext/src/api/index.js
@@ -31,6 +31,10 @@ export function me(username = '', password = '') {
     });
 }
 
+export function info(username) {
+    return client.get(`/info/${username}`);
+}
+
 export function getChats() {
     return client.get('/groups_pms');
 }
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, &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>
+                    <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} />
-                            &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 ? (
+                    <legend>Telegram</legend>
+                    {me.telegramName ? (
                         <form action="/settings" method="post">
-                            <div>Telegram: <b> telegram_name </b>&mdash;
+                            <div>Telegram: <b> {me.telegramName} </b>&mdash;
                 <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>
-                                        &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(
+                            {
+                                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>&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>
+                            <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> &mdash;
@@ -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> &mdash;
+                            <div>Twitter: <b>{me.twitterName}</b> &mdash;
             <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
+};
+