diff options
author | haraldox <hnaumann+github@gmail.com> | 2018-01-30 15:22:12 +0100 |
---|---|---|
committer | haraldox <hnaumann+github@gmail.com> | 2018-01-30 15:22:12 +0100 |
commit | 2b5ce92f746ba8fb35ba2cc0d78a8b9a42960e84 (patch) | |
tree | 6b5064d12dc973919b74a25a63bccb182647384f /src | |
parent | [MINOR] fix indentation (diff) | |
download | ferdium-app-2b5ce92f746ba8fb35ba2cc0d78a8b9a42960e84.tar.gz ferdium-app-2b5ce92f746ba8fb35ba2cc0d78a8b9a42960e84.tar.zst ferdium-app-2b5ce92f746ba8fb35ba2cc0d78a8b9a42960e84.zip |
[WIP] started work on infobox
Diffstat (limited to 'src')
-rw-r--r-- | src/components/auth/Invite.js | 28 | ||||
-rw-r--r-- | src/components/settings/navigation/SettingsNavigation.js | 2 | ||||
-rw-r--r-- | src/containers/settings/InviteScreen.js | 18 | ||||
-rw-r--r-- | src/i18n/locales/en-US.json | 1 | ||||
-rw-r--r-- | src/stores/UserStore.js | 4 |
5 files changed, 46 insertions, 7 deletions
diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js index 9c32220f8..2776af05f 100644 --- a/src/components/auth/Invite.js +++ b/src/components/auth/Invite.js | |||
@@ -5,6 +5,8 @@ import { defineMessages, intlShape } from 'react-intl'; | |||
5 | import { Link } from 'react-router'; | 5 | import { Link } from 'react-router'; |
6 | import classnames from 'classnames'; | 6 | import classnames from 'classnames'; |
7 | 7 | ||
8 | import Infobox from '../ui/Infobox'; | ||
9 | import Appear from '../ui/effects/Appear'; | ||
8 | import Form from '../../lib/Form'; | 10 | import Form from '../../lib/Form'; |
9 | import { email } from '../../helpers/validation-helpers'; | 11 | import { email } from '../../helpers/validation-helpers'; |
10 | import Input from '../ui/Input'; | 12 | import Input from '../ui/Input'; |
@@ -70,9 +72,17 @@ export default class Invite extends Component { | |||
70 | 72 | ||
71 | submit(e) { | 73 | submit(e) { |
72 | e.preventDefault(); | 74 | e.preventDefault(); |
75 | |||
76 | const from = this.props.from; | ||
77 | |||
73 | this.form.submit({ | 78 | this.form.submit({ |
74 | onSuccess: (form) => { | 79 | onSuccess: (form) => { |
75 | this.props.onSubmit({ invites: form.values().invite }); | 80 | this.props.onSubmit({ |
81 | invites: form.values().invite, | ||
82 | from | ||
83 | }); | ||
84 | this.form.clear() | ||
85 | this.form.$('invite').$('0').focus() | ||
76 | }, | 86 | }, |
77 | onError: () => {}, | 87 | onError: () => {}, |
78 | }); | 88 | }); |
@@ -81,7 +91,7 @@ export default class Invite extends Component { | |||
81 | render() { | 91 | render() { |
82 | const { form } = this; | 92 | const { form } = this; |
83 | const { intl } = this.context; | 93 | const { intl } = this.context; |
84 | const { from, embed } = this.props; | 94 | const { from, embed, success } = this.props; |
85 | 95 | ||
86 | const atLeastOneEmailAddress = form.$('invite') | 96 | const atLeastOneEmailAddress = form.$('invite') |
87 | .map(invite => invite.$('email').value) | 97 | .map(invite => invite.$('email').value) |
@@ -92,7 +102,20 @@ export default class Invite extends Component { | |||
92 | 'invite__embed--button': embed, | 102 | 'invite__embed--button': embed, |
93 | }); | 103 | }); |
94 | 104 | ||
105 | console.log(success) | ||
106 | |||
95 | return ( | 107 | return ( |
108 | <div> | ||
109 | {(success && <Appear> | ||
110 | <Infobox | ||
111 | type="success" | ||
112 | icon="checkbox-marked-circle-outline" | ||
113 | dismissable | ||
114 | > | ||
115 | Great Success! | ||
116 | </Infobox> | ||
117 | </Appear>)} | ||
118 | |||
96 | <form className="franz-form auth__form" onSubmit={e => this.submit(e)}> | 119 | <form className="franz-form auth__form" onSubmit={e => this.submit(e)}> |
97 | {!embed && (<img | 120 | {!embed && (<img |
98 | src="./assets/images/logo.svg" | 121 | src="./assets/images/logo.svg" |
@@ -123,6 +146,7 @@ export default class Invite extends Component { | |||
123 | {intl.formatMessage(messages.skipButtonLabel)} | 146 | {intl.formatMessage(messages.skipButtonLabel)} |
124 | </Link>)} | 147 | </Link>)} |
125 | </form> | 148 | </form> |
149 | </div> | ||
126 | ); | 150 | ); |
127 | } | 151 | } |
128 | } | 152 | } |
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js index 75ace53cc..3f42cd10e 100644 --- a/src/components/settings/navigation/SettingsNavigation.js +++ b/src/components/settings/navigation/SettingsNavigation.js | |||
@@ -75,7 +75,7 @@ export default class SettingsNavigation extends Component { | |||
75 | {intl.formatMessage(messages.settings)} | 75 | {intl.formatMessage(messages.settings)} |
76 | </Link> | 76 | </Link> |
77 | <Link | 77 | <Link |
78 | to="/settings/invite?from=/settings&embed=true" | 78 | to="/settings/invite?from=/settings/invite" |
79 | className="settings-navigation__link" | 79 | className="settings-navigation__link" |
80 | activeClassName="is-active" | 80 | activeClassName="is-active" |
81 | > | 81 | > |
diff --git a/src/containers/settings/InviteScreen.js b/src/containers/settings/InviteScreen.js index 5a7c64f73..923f08069 100644 --- a/src/containers/settings/InviteScreen.js +++ b/src/containers/settings/InviteScreen.js | |||
@@ -3,9 +3,21 @@ import PropTypes from 'prop-types'; | |||
3 | import { inject, observer } from 'mobx-react'; | 3 | import { inject, observer } from 'mobx-react'; |
4 | import Invite from '../../components/auth/Invite'; | 4 | import Invite from '../../components/auth/Invite'; |
5 | import { gaPage } from '../../lib/analytics'; | 5 | import { gaPage } from '../../lib/analytics'; |
6 | import { defineMessages, intlShape } from 'react-intl'; | ||
7 | |||
8 | const messages = defineMessages({ | ||
9 | headline: { | ||
10 | id: 'settings.invite.headline', | ||
11 | defaultMessage: '!!!Invite Friends', | ||
12 | }, | ||
13 | }); | ||
6 | 14 | ||
7 | @inject('stores', 'actions') @observer | 15 | @inject('stores', 'actions') @observer |
8 | export default class InviteScreen extends Component { | 16 | export default class InviteScreen extends Component { |
17 | static contextTypes = { | ||
18 | intl: intlShape, | ||
19 | }; | ||
20 | |||
9 | componentDidMount() { | 21 | componentDidMount() { |
10 | gaPage('Settings/Invite'); | 22 | gaPage('Settings/Invite'); |
11 | } | 23 | } |
@@ -19,14 +31,14 @@ export default class InviteScreen extends Component { | |||
19 | return ( | 31 | return ( |
20 | <div className="settings__main"> | 32 | <div className="settings__main"> |
21 | <div className="settings__header"> | 33 | <div className="settings__header"> |
22 | {/* <h1>{intl.formatMessage(messages.headline)}</h1> */} | 34 | <h1>{this.context.intl.formatMessage(messages.headline)}</h1> |
23 | <h1>Invite Friends</h1> | ||
24 | </div> | 35 | </div> |
25 | <div className="settings__body invite__form"> | 36 | <div className="settings__body invite__form"> |
26 | <Invite | 37 | <Invite |
27 | onSubmit={actions.user.invite} | 38 | onSubmit={actions.user.invite} |
28 | from={location.query.from} | 39 | from={location.query.from} |
29 | embed={location.query.embed} | 40 | embed={true} |
41 | success={location.query.success} | ||
30 | /> | 42 | /> |
31 | </div> | 43 | </div> |
32 | </div> | 44 | </div> |
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json index 0c59ba432..bd0863f64 100644 --- a/src/i18n/locales/en-US.json +++ b/src/i18n/locales/en-US.json | |||
@@ -88,6 +88,7 @@ | |||
88 | "settings.account.deleteAccount": "Delete account", | 88 | "settings.account.deleteAccount": "Delete account", |
89 | "settings.account.deleteInfo": "If you don't need your Franz account any longer, you can delete your account and all related data here.", | 89 | "settings.account.deleteInfo": "If you don't need your Franz account any longer, you can delete your account and all related data here.", |
90 | "settings.account.deleteEmailSent": "You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!", | 90 | "settings.account.deleteEmailSent": "You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!", |
91 | "settings.invite.headline": "Invite Friends", | ||
91 | "settings.navigation.availableServices": "Available services", | 92 | "settings.navigation.availableServices": "Available services", |
92 | "settings.navigation.yourServices": "Your services", | 93 | "settings.navigation.yourServices": "Your services", |
93 | "settings.navigation.account": "Account", | 94 | "settings.navigation.account": "Account", |
diff --git a/src/stores/UserStore.js b/src/stores/UserStore.js index 91b544b29..152090f46 100644 --- a/src/stores/UserStore.js +++ b/src/stores/UserStore.js | |||
@@ -166,8 +166,10 @@ export default class UserStore extends Store { | |||
166 | 166 | ||
167 | this.inviteRequest.execute(data); | 167 | this.inviteRequest.execute(data); |
168 | 168 | ||
169 | console.log(from) | ||
170 | |||
169 | // we do not wait for a server response before redirecting the user | 171 | // we do not wait for a server response before redirecting the user |
170 | this.stores.router.push(from || '/'); | 172 | this.stores.router.push(from + '?success=true' || '/'); |
171 | 173 | ||
172 | gaEvent('User', 'inviteUsers'); | 174 | gaEvent('User', 'inviteUsers'); |
173 | } | 175 | } |