Components -> UI

1 files changed, 268 insertions, 0 deletions

diff --git a/vnext/src/ui/Settings.js b/vnext/src/ui/Settings.js
new file mode 100644
index 00000000..cf6926f8
--- /dev/null
+++ b/vnext/src/ui/Settings.js
@@ -0,0 +1,268 @@
+import React, { useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import ReactRouterPropTypes from 'react-router-prop-types';
+
+import { me, updateAvatar } from '../api';
+
+import { UserType } from './Types';
+
+import Button from './Button';
+import Icon from './Icon';
+import UploadButton from './UploadButton';
+import Avatar from './Avatar';
+
+function ChangeAvatarForm({ visitor }) {
+    const [avatar, setAvatar] = useState('');
+    const [preview, setPreview] = useState();
+    const avatarInput = useRef();
+    let avatarChanged = (newAvatar) => {
+        setAvatar(newAvatar);
+        setPreview('');
+        if (newAvatar) {
+            let reader = new FileReader();
+            reader.onloadend = (preview) => {
+                setPreview(preview.target.result);
+            };
+            reader.readAsDataURL(avatarInput.current.files[0]);
+        }
+    };
+    let previewUser = { ...visitor, uname: '<preview>' };
+    if (preview) {
+        previewUser = { ...visitor, avatar: preview, uname: '<preview>' };
+    }
+    let onSubmitAvatar = (event) => {
+        if (event.preventDefault) {
+            event.preventDefault();
+        }
+        updateAvatar(avatarInput.current.files[0]).then(() => {
+            avatarChanged('');
+            me().then(visitor => {
+                this.props.onChange(visitor);
+            });
+        });
+    };
+    return (
+        <form>
+            <small>Recommendations: PNG, 96x96, &lt;50Kb. Also, JPG and GIF supported.</small>
+            <UploadButton inputRef={avatarInput}
+                value={avatar} onChange={avatarChanged} />
+            <Avatar user={visitor} />
+            <Avatar user={previewUser} />
+            <Button onClick={onSubmitAvatar}>Update</Button>
+        </form>
+    );
+}
+
+ChangeAvatarForm.propTypes = {
+    visitor: UserType.isRequired
+};
+
+export default class Settings extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            settings: {
+            },
+            me: {}
+        };
+    }
+    componentDidMount() {
+        me().then(visitor => {
+            this.setState({
+                me: visitor
+            });
+        });
+    }
+
+    passwordChanged = (event) => {
+        let newState = update(this.state, {
+            settings: { password: { $set: event.target.value } }
+        });
+        this.setState(newState);
+    }
+    onSubmitPassword = (event) => {
+        if (event.preventDefault) {
+            event.preventDefault();
+        }
+        console.log('password update');
+    }
+    emailChanged = (event) => {
+        let newState = update(this.state, {
+            me: { activeEmail: { $set: event.target.value } }
+        });
+        this.setState(newState);
+        console.log('email update');
+    }
+    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, settings } = this.state;
+        return (
+            <div className="msg-cont">
+                <fieldset>
+                    <legend><Icon name="ei-user" size="m" />Changing your avatar</legend>
+                    <ChangeAvatarForm visitor={me} />
+                </fieldset>
+                <fieldset>
+                    <legend><Icon name="ei-unlock" size="m" />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 />
+                            <i>(max. length - 16 symbols)</i></p>
+                    </form>
+                </fieldset>
+                <fieldset>
+                    <legend><Icon name="ei-sc-telegram" size="m" />Telegram</legend>
+                    {me.telegramName ? (
+                        <form>
+                            <div>Telegram: <b> {me.telegramName} </b>&mdash;
+                                <Button onClick={this.disableTelegram}>Disable</Button>
+                            </div>
+                        </form>
+                    ) : (
+                            <p>To connect Telegram account: send any text message to <a href="https://telegram.me/Juick_bot">@Juick_bot</a>
+                            </p>
+                        )}
+                </fieldset>
+                {me.jids && (
+                    <form>
+                        <fieldset>
+                            <legend>XMPP accounts
+                                </legend>
+                            <p>Your accounts:</p>
+                            <p>
+                                {
+                                    me.jids.map(jid =>
+                                        <React.Fragment key={jid}>
+                                            <label><input type="radio" name="delete" value={jid} />{jid}</label><br />
+                                        </React.Fragment>
+                                    )
+                                }
+                            </p>
+                            {
+                                me.jids && me.jids.length > 1 &&
+                                <p><Button onClick={this.deleteJid}>Delete</Button></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><Icon name="ei-envelope" size="m" />E-mail</legend>
+                    <form>
+                        <p>Add account:<br />
+                            <input type="text" name="account" />
+                            <input type="hidden" name="page" value="email-add" />
+                            <Button onClick={this.addEmail}>Add</Button>
+                        </p>
+                    </form>
+                    <form>
+                        <p>Your accounts:</p>
+                        <p>
+                            {
+                                me.emails ? me.emails.map(email =>
+                                    <React.Fragment key={email}>
+                                        <label>
+                                            <input type="radio" name="account" value={email} />{email}
+                                        </label>
+                                        <br />
+                                    </React.Fragment>
+                                ) : '-'
+                            }
+                        </p>
+                        {
+                            me.emails && me.emails.length > 1 &&
+                            <Button onClick={this.deleteEmail}>Delete</Button>
+                        }
+                    </form>
+                    {
+                        me.emails &&
+                        <>
+                            {/** email_off **/}
+                            <form>
+                                You can receive notifications to email:<br />
+                                Sent to <select name="account" value={me.activeEmail || 'Disabled'} onChange={this.emailChanged}>
+                                    <option value="">Disabled</option>
+                                    {
+                                        me.emails.map(email =>
+                                            <option key={email} value={email}>
+                                                {email}
+                                            </option>
+                                        )
+                                    }
+                                </select>
+                            </form>
+                            {/** /email_off **/}
+                            <p>&nbsp;</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>
+                        </>
+                    }
+                </fieldset>
+                <fieldset>
+                    <legend><Icon name="ei-sc-facebook" size="m" />Facebook</legend>
+                    {me.facebookStatus && me.facebookStatus.connected ? (
+                        me.facebookStatus.crosspostEnabled ?
+                            <form>
+                                <div>
+                                    Facebook: <b>Enabled</b> &mdash;
+                                    <Button onClick={this.disableFacebook}>Disable</Button>
+                                </div>
+                            </form>
+                            :
+                            <form>
+                                <div>
+                                    Facebook: <b>Disabled</b> &mdash;
+                                    <Button onClick={this.enableFacebook}>Enable</Button>
+                                </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><Icon name="ei-sc-twitter" size="m" />Twitter</legend>
+                    {me.twitterName ?
+                        <form action="/settings" method="post">
+                            <div>Twitter: <b>{me.twitterName}</b> &mdash;
+            <input type="hidden" name="page" value="twitter-del" />
+                                <Button onClick={this.disableTwitter}>Disable</Button>
+                            </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>
+
+            </div>
+        );
+    }
+}
+
+Settings.propTypes = {
+    visitor: UserType.isRequired,
+    onChange: PropTypes.func.isRequired
+};
+