diff options
Diffstat (limited to 'vnext/src/components/Settings.js')
| -rw-r--r-- | vnext/src/components/Settings.js | 268 |
1 files changed, 0 insertions, 268 deletions
diff --git a/vnext/src/components/Settings.js b/vnext/src/components/Settings.js deleted file mode 100644 index cf6926f8..00000000 --- a/vnext/src/components/Settings.js +++ /dev/null @@ -1,268 +0,0 @@ -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 -}; - |