aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/ui/Settings.js
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2019-07-26 13:22:00 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:55 +0300
commitf707d3d524d8d16e2bb780764f029d85fc57ecc0 (patch)
tree1580074a665bd16c9744b5749c2a777700c5ae73 /vnext/src/ui/Settings.js
parent6016b0888e77497e15384f1cd024eb42672129a4 (diff)
prop-types -> jsdoc
Diffstat (limited to 'vnext/src/ui/Settings.js')
-rw-r--r--vnext/src/ui/Settings.js310
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>&mdash;
+ <div>Telegram: <b> {visitor.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>
+ </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>&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>
- </>
+ 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>&nbsp;</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> &mdash;
- <Button onClick={this.disableFacebook}>Disable</Button>
+ Facebook: <b>Enabled</b>&mdash;
+ <Button onClick={disableFacebook}>Disable</Button>
</div>
</form>
:
<form>
<div>
- Facebook: <b>Disabled</b> &mdash;
- <Button onClick={this.enableFacebook}>Enable</Button>
+ Facebook: <b>Disabled</b>&mdash;
+ <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> &mdash;
+ </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>&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>
+ <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
};
+*/