diff options
Diffstat (limited to 'vnext/src/ui/Settings.js')
| -rw-r--r-- | vnext/src/ui/Settings.js | 310 |
1 files changed, 147 insertions, 163 deletions
diff --git a/vnext/src/ui/Settings.js b/vnext/src/ui/Settings.js index cf6926f8..61ac91d4 100644 --- a/vnext/src/ui/Settings.js +++ b/vnext/src/ui/Settings.js @@ -1,17 +1,13 @@ 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 }) { +function ChangeAvatarForm({ visitor, onChange }) { const [avatar, setAvatar] = useState(''); const [preview, setPreview] = useState(); const avatarInput = useRef(); @@ -37,7 +33,7 @@ function ChangeAvatarForm({ visitor }) { updateAvatar(avatarInput.current.files[0]).then(() => { avatarChanged(''); me().then(visitor => { - this.props.onChange(visitor); + onChange(visitor); }); }); }; @@ -52,185 +48,173 @@ function ChangeAvatarForm({ visitor }) { </form> ); } - +/* ChangeAvatarForm.propTypes = { - visitor: UserType.isRequired + visitor: UserType.isRequired, + onChange: PropTypes.func.isRequired }; +*/ +export default function Settings({ visitor, onChange }) { -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) => { + let passwordChanged = (event) => { + console.log('password changed'); + }; + let 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); + }; + let emailChanged = (event) => { console.log('email update'); - } - disableTelegram = () => { + }; + let disableTelegram = () => { console.log('telegram disable'); - } - disableFacebook = (event) => { + }; + let disableFacebook = (event) => { if (event.preventDefault) { event.preventDefault(); } console.log('facebook disable'); - } - enableFacebook = (event) => { + }; + let enableFacebook = (event) => { if (event.preventDefault) { event.preventDefault(); } console.log('facebook enable'); - } - disableTwitter = () => { + }; + let disableTwitter = () => { console.log('twitter disable'); - } + }; + let deleteJid = () => { - 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> + }; + let addEmail = () => { + + }; + let deleteEmail = () => { + + }; + return ( + <div className="msg-cont"> + <fieldset> + <legend><Icon name="ei-user" size="m" />Changing your avatar</legend> + <ChangeAvatarForm visitor={visitor} onChange={onChange} /> + </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={passwordChanged} /> + <Button onClick={onSubmitPassword}>Update</Button><br /> + <i>(max. length - 16 symbols)</i></p> + </form> + </fieldset> + <fieldset> + <legend><Icon name="ei-sc-telegram" size="m" />Telegram</legend> + {visitor.telegramName ? ( <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>— + <div>Telegram: <b> {visitor.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> + </div> </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>To connect Telegram account: send any text message to <a href="https://telegram.me/Juick_bot">@Juick_bot</a> </p> - </form> - <form> + )} + </fieldset> + {me.jids && ( + <form> + <fieldset> + <legend>XMPP accounts + </legend> <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 /> + visitor.jids.map(jid => + <React.Fragment key={jid}> + <label><input type="radio" name="delete" value={jid} />{jid}</label><br /> </React.Fragment> - ) : '-' + ) } </p> { - me.emails && me.emails.length > 1 && - <Button onClick={this.deleteEmail}>Delete</Button> + visitor.jids && visitor.jids.length > 1 && + <p><Button onClick={deleteJid}>Delete</Button></p> } - </form> + <p>To add new jabber account: send any text message to <span><a href="xmpp:juick@juick.com?message;body=login">juick@juick.com</a></span> + </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={addEmail}>Add</Button> + </p> + </form> + <form> + <p>Your accounts:</p> + <p> + { + visitor.emails ? visitor.emails.map(email => + <React.Fragment key={email}> + <label> + <input type="radio" name="account" value={email} />{email} + </label> + <br /> + </React.Fragment> + ) : '-' + } + </p> { - 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> - </> + visitor.emails && visitor.emails.length > 1 && + <Button onClick={deleteEmail}>Delete</Button> } - </fieldset> - <fieldset> - <legend><Icon name="ei-sc-facebook" size="m" />Facebook</legend> - {me.facebookStatus && me.facebookStatus.connected ? ( - me.facebookStatus.crosspostEnabled ? + </form> + { + visitor.emails && + <> + {/** email_off **/} + <form> + You can receive notifications to email:<br /> + Sent to <select name="account" value={me.activeEmail || 'Disabled'} onChange={emailChanged}> + <option value="">Disabled</option> + { + visitor.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 <a href="mailto:juick@juick.com">juick@juick.com</a>. + You can attach one photo or video file.</p> + </> + } + </fieldset> + <fieldset> + <legend><Icon name="ei-sc-facebook" size="m" />Facebook</legend> + { + visitor.facebookStatus && visitor.facebookStatus.connected ? ( + visitor.facebookStatus.crosspostEnabled ? <form> <div> - Facebook: <b>Enabled</b> — - <Button onClick={this.disableFacebook}>Disable</Button> + Facebook: <b>Enabled</b>— + <Button onClick={disableFacebook}>Disable</Button> </div> </form> : <form> <div> - Facebook: <b>Disabled</b> — - <Button onClick={this.enableFacebook}>Enable</Button> + Facebook: <b>Disabled</b>— + <Button onClick={enableFacebook}>Enable</Button> </div> </form> ) : ( @@ -240,29 +224,29 @@ export default class Settings extends React.Component { </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> — + </fieldset> + <fieldset> + <legend><Icon name="ei-sc-twitter" size="m" />Twitter</legend> + {visitor.twitterName ? + <form action="/settings" method="post"> + <div>Twitter: <b>{visitor.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> + <Button onClick={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> - ); - } + </div> + ); } - +/* Settings.propTypes = { visitor: UserType.isRequired, onChange: PropTypes.func.isRequired }; +*/ |