diff options
Diffstat (limited to 'vnext/src/ui/Settings.js')
| -rw-r--r-- | vnext/src/ui/Settings.js | 268 |
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, <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>— + <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> </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> — + <Button onClick={this.disableFacebook}>Disable</Button> + </div> + </form> + : + <form> + <div> + Facebook: <b>Disabled</b> — + <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> — + <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 +}; + |