aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/ui/Settings.js
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2019-05-04 21:13:12 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:54 +0300
commitf470636a70943a8ecad8bddc791a1c2dddd28e1e (patch)
treec43d109d88adbde9a696084070cdd92c6b9a004b /vnext/src/ui/Settings.js
parent3d7d213e3ddc5bf4f71d536f31677b768aa3b7c0 (diff)
Components -> UI
Diffstat (limited to 'vnext/src/ui/Settings.js')
-rw-r--r--vnext/src/ui/Settings.js268
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
+};
+