aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'vnext/src/components')
-rw-r--r--vnext/src/components/Settings.js128
1 files changed, 65 insertions, 63 deletions
diff --git a/vnext/src/components/Settings.js b/vnext/src/components/Settings.js
index d4947e5a..d3eced63 100644
--- a/vnext/src/components/Settings.js
+++ b/vnext/src/components/Settings.js
@@ -1,66 +1,71 @@
import React from 'react';
+import { me } from '../api';
+
+import { UserType } from './Types';
+
+import Button from './Button';
+
export default class Settings extends React.Component {
constructor(props) {
super(props);
this.state = {
settings: {},
- userinfo: {},
- facebook: {}
+ me: {}
};
}
+ componentDidMount() {
+ me().then(visitor => {
+ this.setState({
+ me: visitor
+ });
+ });
+ }
+ onSubmitAvatar = (event) => {
+ if (event.preventDefault) {
+ event.preventDefault();
+ }
+ console.log('avatar update');
+ }
+ passwordChanged = (event) => {
+ this.setState({
+ settings: { password : event.target.value }
+ });
+ }
+ onSubmitPassword = (event) => {
+ if (event.preventDefault) {
+ event.preventDefault();
+ }
+ console.log('password update');
+ }
render() {
- const { settings, userinfo, facebook } = this.state;
+ const { me } = this.state;
return (
<article>
<h1>Settings</h1>
+ <fieldset>
+ <legend>Changing your avatar</legend>
<form>
<p>Avatar: <input type="file" name="avatar" /><br />
<small>Recommendations: PNG, 96x96, &lt;50Kb. Also, JPG and GIF supported.</small></p>
- <p><input type="hidden" name="page" value="about" /><input type="submit" value=" OK " /></p>
- <p>Full name: <input type="text" name="fullname" value={userinfo.fullName} /></p>
- <p>Country: <input type="text" name="country" value={userinfo.country} /></p>
- <p>URL: <input type="text" name="url" value={userinfo.url} size="32" /><br />
- <small>Please, start with &quot;http://&quot;</small></p>
- <p>About:<br />
- <input type="text" name="descr" value={userinfo.description} style={{ width: '100%' }} /><br />
- <small>Max. 255 symbols</small></p>
+ <p><input type="hidden" name="page" value="about" />
+ <Button onClick={this.onSubmitAvatar}>Update</Button>
+ </p>
</form>
+ </fieldset>
<fieldset>
<legend>Changing your password</legend>
- <form onSubmit={this.updatePassword}>
- <input type="hidden" name="page" value="password" />
- <p>Change password: <input type="password" name="password" size="8" value={settings.password} />
- <input type="submit" value=" Update " /><br />
+ <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>
-
-
- <form onSubmit={this.updateNotificationSettings}>
- <fieldset>
- <legend>Notification options</legend>
- <p>
- <input type="checkbox" name="jnotify" checked={settings.repliesEnabled} />
- &nbsp;Reply notifications (&quot;Message posted&quot;)
- </p>
- <p><input type="checkbox" name="subscr_notify" checked={settings.subscriptionsEnabled} />
- &nbsp;Subscriptions notifications (&quot;@user subscribed...&quot;)
- </p>
- <p><input type="checkbox" name="recomm" checked={settings.recommendationsEnabled} />
- &nbsp;Posts recommendations (&quot;Recommended by @user&quot;)
- </p>
- <p><input type="submit" value=" OK " /></p>
- </fieldset>
- </form>
<fieldset>
- <legend style={{
- background: 'url(//telegram.org/favicon.ico?3) no-repeat',
- paddingLeft: '58px', lineHeight: '48px'
- }}>Telegram</legend>
- {settings.telegramName ? (
+ <legend>Telegram</legend>
+ {me.telegramName ? (
<form action="/settings" method="post">
- <div>Telegram: <b> telegram_name </b>&mdash;
+ <div>Telegram: <b> {me.telegramName} </b>&mdash;
<input type="hidden" name="page" value="telegram-del" />
<input type="submit" value=" Disable " />
</div>
@@ -70,7 +75,7 @@ export default class Settings extends React.Component {
</p>
)}
</fieldset>
- {settings.jids && (
+ {me.jids && (
<form>
<fieldset>
<legend style={{
@@ -81,24 +86,17 @@ export default class Settings extends React.Component {
<p>Your accounts:</p>
<p>
{
- settings.jids.map(jid =>
+ me.jids.map(jid =>
<React.Fragment key="jid">
- <label><input type="radio" name="delete" value={jid} />${jid}</label><br />
+ <label><input type="radio" name="delete" value={jid} />{jid}</label><br />
</React.Fragment>
)
}
- {settings.auths.map(auth =>
- <React.Fragment key={auth.account}>
- <label><input type="radio" name="delete"
- value={auth.account} />{auth.account}</label>
- &mdash; <a href="#"
- onClick="alert(\'To confirm, please send &quot;AUTH {{ auth.getAuthCode() }}&quot; (without quotes) from this account to &quot;juick@juick.com&quot;.\'); return false;">Confirm</a><br />
- </React.Fragment>
- )}
</p>
- {settings.jids && settings.jids.length > 1(
+ {
+ me.jids && me.jids.length > 1 &&
<p><input type="hidden" name="page" value="jid-del" /><input type="submit" value=" Delete " /></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>
@@ -121,13 +119,13 @@ export default class Settings extends React.Component {
<p>Your accounts:</p>
<p>
{
- settings.emails ? settings.emails.map(email =>
+ me.emails ? me.emails.map(email =>
<React.Fragment key={email}>
<label>
<input type="radio" name="account" value="{{ email }}" />{email}
</label>
<br />
- {settings.emails.length > 1 &&
+ {me.emails.length > 1 &&
<p><input type="hidden" name="page" value="email-del" /><input type="submit" value=" Delete " /></p>
}
</React.Fragment>
@@ -135,15 +133,15 @@ export default class Settings extends React.Component {
}
</p>
</form>
- {settings.emails &&
+ {me.emails &&
<React.Fragment>
{/** email_off **/}
<form>
You can receive notifications to email:<br />
Sent to <select name="account">
<option value="">Disabled</option>
- {settings.emails.map(email =>
- <option key={email} value={email} selected={email.active == email}>
+ {me.emails.map(email =>
+ <option key={email} value={email} selected={me.activeEmail == email}>
{email}
</option>
)}
@@ -153,8 +151,7 @@ export default class Settings extends React.Component {
</form>
{/** /email_off **/}
<p>&nbsp;</p>
- <p>You can post to Juick via e-mail. Send your <span style="text-decoration: underline">plain text</span>
- messages to <span><a href="mailto:juick@juick.com">juick@juick.com</a></span>. You can attach one photo or video file.</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>
</React.Fragment>
}
</fieldset>
@@ -165,8 +162,8 @@ export default class Settings extends React.Component {
}}>
Facebook
</legend>
- {facebook.connected ? (
- facebook.crosspostEnabled ?
+ {me.facebookStatus && me.facebookStatus.connected ? (
+ me.facebookStatus.crosspostEnabled ?
<form action="/settings" method="post">
<div>
Facebook: <b>Enabled</b> &mdash;
@@ -196,9 +193,9 @@ export default class Settings extends React.Component {
paddingLeft: '58px', lineHeight: '48px'
}}>
Twitter</legend>
- {settings.twitter_name ?
+ {me.twitterName ?
<form action="/settings" method="post">
- <div>Twitter: <b>{settings.twitter_name}</b> &mdash;
+ <div>Twitter: <b>{me.twitterName}</b> &mdash;
<input type="hidden" name="page" value="twitter-del" />
<input type="submit" value=" Disable " />
</div>
@@ -213,3 +210,8 @@ export default class Settings extends React.Component {
);
}
}
+
+Settings.propTypes = {
+ visitor: UserType.isRequired
+};
+