moar /settings updates

1 files changed, 44 insertions, 23 deletions

diff --git a/vnext/src/components/Settings.js b/vnext/src/components/Settings.js
index d3eced63..2a24e35c 100644
--- a/vnext/src/components/Settings.js
+++ b/vnext/src/components/Settings.js
@@ -29,7 +29,7 @@ export default class Settings extends React.Component {
     }
     passwordChanged = (event) => {
         this.setState({
-            settings: { password : event.target.value }
+            settings: { password: event.target.value }
         });
     }
     onSubmitPassword = (event) => {
@@ -38,6 +38,29 @@ export default class Settings extends React.Component {
         }
         console.log('password update');
     }
+    emailChanged = (event) => {
+        this.setState({
+            me: { activeEmail: event.target.value }
+        });
+    }
+    disableTelegram = () => {
+        console.log('telegram disable');
+    }
+    disableFacebook = (event) => {
+        if (event.preventDefault) {
+            event.preventDefault();
+        }
+        console.log('facebook disable');
+    }
+    enableFacebook = (event) => {
+        if (event.preventDefault) {
+            event.preventDefault();
+        }
+        console.log('facebook enable');
+    }
+    disableTwitter = () => {
+        console.log('twitter disable');
+    }
     render() {
         const { me } = this.state;
         return (
@@ -45,29 +68,28 @@ export default class Settings extends React.Component {
                 <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" />
-                        <Button onClick={this.onSubmitAvatar}>Update</Button>
-                    </p>
-                </form>
+                    <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" />
+                            <Button onClick={this.onSubmitAvatar}>Update</Button>
+                        </p>
+                    </form>
                 </fieldset>
                 <fieldset>
                     <legend>Changing your password</legend>
                     <form>
                         <p>Change password: <input type="password" name="password" size="8" onChange={this.passwordChanged} />
-                        <Button onClick={this.onSubmitPassword}>Update</Button><br />
+                            <Button onClick={this.onSubmitPassword}>Update</Button><br />
                             <i>(max. length - 16 symbols)</i></p>
                     </form>
                 </fieldset>
                 <fieldset>
                     <legend>Telegram</legend>
                     {me.telegramName ? (
-                        <form action="/settings" method="post">
+                        <form>
                             <div>Telegram: <b> {me.telegramName} </b>&mdash;
-                <input type="hidden" name="page" value="telegram-del" />
-                                <input type="submit" value="  Disable  " />
+                                <Button onClick={this.disableTelegram}>Disable</Button>
                             </div>
                         </form>
                     ) : (
@@ -122,7 +144,7 @@ export default class Settings extends React.Component {
                                 me.emails ? me.emails.map(email =>
                                     <React.Fragment key={email}>
                                         <label>
-                                            <input type="radio" name="account" value="{{ email }}" />{email}
+                                            <input type="radio" name="account" value={email} />{email}
                                         </label>
                                         <br />
                                         {me.emails.length > 1 &&
@@ -133,15 +155,16 @@ export default class Settings extends React.Component {
                             }
                         </p>
                     </form>
-                    {me.emails &&
+                    {
+                        me.emails &&
                         <React.Fragment>
                             {/** email_off **/}
                             <form>
                                 You can receive notifications to email:<br />
-                                Sent to <select name="account">
+                                Sent to <select name="account" value={me.activeEmail} onChange={this.emailChanged}>
                                     <option value="">Disabled</option>
                                     {me.emails.map(email =>
-                                        <option key={email} value={email} selected={me.activeEmail == email}>
+                                        <option key={email} value={email}>
                                             {email}
                                         </option>
                                     )}
@@ -164,19 +187,17 @@ export default class Settings extends React.Component {
         </legend>
                     {me.facebookStatus && me.facebookStatus.connected ? (
                         me.facebookStatus.crosspostEnabled ?
-                            <form action="/settings" method="post">
+                            <form>
                                 <div>
                                     Facebook: <b>Enabled</b> &mdash;
-                <input type="hidden" name="page" value="facebook-disable" />
-                                    <input type="submit" value="  Disable  " />
+                                    <Button onClick={this.disableFacebook}>Disable</Button>
                                 </div>
                             </form>
                             :
-                            <form action="/settings" method="post">
+                            <form>
                                 <div>
                                     Facebook: <b>Disabled</b> &mdash;
-                <input type="hidden" name="page" value="facebook-enable" />
-                                    <input type="submit" value="  Enable  " />
+                                    <Button onClick={this.enableFacebook}>Enable</Button>
                                 </div>
                             </form>
                     ) : (
@@ -197,7 +218,7 @@ export default class Settings extends React.Component {
                         <form action="/settings" method="post">
                             <div>Twitter: <b>{me.twitterName}</b> &mdash;
             <input type="hidden" name="page" value="twitter-del" />
-                                <input type="submit" value="  Disable  " />
+                                <Button onClick={this.disableTwitter}>Disable</Button>
                             </div>
                         </form>
                         :