diff options
Diffstat (limited to 'src/components/auth')
-rw-r--r-- | src/components/auth/Import.js | 87 | ||||
-rw-r--r-- | src/components/auth/Invite.js | 105 | ||||
-rw-r--r-- | src/components/auth/Pricing.js | 1 | ||||
-rw-r--r-- | src/components/auth/Welcome.js | 1 |
4 files changed, 108 insertions, 86 deletions
diff --git a/src/components/auth/Import.js b/src/components/auth/Import.js index 3e34c3162..3073cad73 100644 --- a/src/components/auth/Import.js +++ b/src/components/auth/Import.js | |||
@@ -28,7 +28,9 @@ const messages = defineMessages({ | |||
28 | }, | 28 | }, |
29 | }); | 29 | }); |
30 | 30 | ||
31 | export default @observer class Import extends Component { | 31 | export default |
32 | @observer | ||
33 | class Import extends Component { | ||
32 | static propTypes = { | 34 | static propTypes = { |
33 | services: MobxPropTypes.arrayOrObservableArray.isRequired, | 35 | services: MobxPropTypes.arrayOrObservableArray.isRequired, |
34 | onSubmit: PropTypes.func.isRequired, | 36 | onSubmit: PropTypes.func.isRequired, |
@@ -40,17 +42,21 @@ export default @observer class Import extends Component { | |||
40 | intl: intlShape, | 42 | intl: intlShape, |
41 | }; | 43 | }; |
42 | 44 | ||
43 | componentWillMount() { | 45 | componentDidMount() { |
44 | const config = { | 46 | const config = { |
45 | fields: { | 47 | fields: { |
46 | import: [...this.props.services.filter(s => s.recipe).map(s => ({ | 48 | import: [ |
47 | fields: { | 49 | ...this.props.services |
48 | add: { | 50 | .filter((s) => s.recipe) |
49 | default: true, | 51 | .map((s) => ({ |
50 | options: s, | 52 | fields: { |
51 | }, | 53 | add: { |
52 | }, | 54 | default: true, |
53 | }))], | 55 | options: s, |
56 | }, | ||
57 | }, | ||
58 | })), | ||
59 | ], | ||
54 | }, | 60 | }, |
55 | }; | 61 | }; |
56 | 62 | ||
@@ -62,9 +68,12 @@ export default @observer class Import extends Component { | |||
62 | e.preventDefault(); | 68 | e.preventDefault(); |
63 | this.form.submit({ | 69 | this.form.submit({ |
64 | onSuccess: (form) => { | 70 | onSuccess: (form) => { |
65 | const servicesImport = form.values().import | 71 | const servicesImport = form |
66 | .map((value, i) => !value.add || services.filter(s => s.recipe)[i]) | 72 | .values() |
67 | .filter(s => typeof s !== 'boolean'); | 73 | .import.map( |
74 | (value, i) => !value.add || services.filter((s) => s.recipe)[i], | ||
75 | ) | ||
76 | .filter((s) => typeof s !== 'boolean'); | ||
68 | 77 | ||
69 | this.props.onSubmit({ services: servicesImport }); | 78 | this.props.onSubmit({ services: servicesImport }); |
70 | }, | 79 | }, |
@@ -76,37 +85,31 @@ export default @observer class Import extends Component { | |||
76 | const { intl } = this.context; | 85 | const { intl } = this.context; |
77 | const { services, isSubmitting, inviteRoute } = this.props; | 86 | const { services, isSubmitting, inviteRoute } = this.props; |
78 | 87 | ||
79 | const availableServices = services.filter(s => s.recipe); | 88 | const availableServices = services.filter((s) => s.recipe); |
80 | const unavailableServices = services.filter(s => !s.recipe); | 89 | const unavailableServices = services.filter((s) => !s.recipe); |
81 | 90 | ||
82 | return ( | 91 | return ( |
83 | <div className="auth__scroll-container"> | 92 | <div className="auth__scroll-container"> |
84 | <div className="auth__container auth__container--signup"> | 93 | <div className="auth__container auth__container--signup"> |
85 | <form className="franz-form auth__form" onSubmit={e => this.submit(e)}> | 94 | <form |
86 | <img | 95 | className="franz-form auth__form" |
87 | src="./assets/images/logo.svg" | 96 | onSubmit={(e) => this.submit(e)} |
88 | className="auth__logo" | 97 | > |
89 | alt="" | 98 | <img src="./assets/images/logo.svg" className="auth__logo" alt="" /> |
90 | /> | 99 | <h1>{intl.formatMessage(messages.headline)}</h1> |
91 | <h1> | ||
92 | {intl.formatMessage(messages.headline)} | ||
93 | </h1> | ||
94 | <table className="service-table available-services"> | 100 | <table className="service-table available-services"> |
95 | <tbody> | 101 | <tbody> |
96 | {this.form.$('import').map((service, i) => ( | 102 | {this.form.$('import').map((service, i) => ( |
97 | <tr | 103 | <tr key={service.id} className="service-table__row"> |
98 | key={service.id} | ||
99 | className="service-table__row" | ||
100 | > | ||
101 | <td className="service-table__toggle"> | 104 | <td className="service-table__toggle"> |
102 | <Toggle | 105 | <Toggle field={service.$('add')} showLabel={false} /> |
103 | field={service.$('add')} | ||
104 | showLabel={false} | ||
105 | /> | ||
106 | </td> | 106 | </td> |
107 | <td className="service-table__column-icon"> | 107 | <td className="service-table__column-icon"> |
108 | <img | 108 | <img |
109 | src={availableServices[i].custom_icon || availableServices[i].recipe.icons.svg} | 109 | src={ |
110 | availableServices[i].custom_icon | ||
111 | || availableServices[i].recipe.icons.svg | ||
112 | } | ||
110 | className={classnames({ | 113 | className={classnames({ |
111 | 'service-table__icon': true, | 114 | 'service-table__icon': true, |
112 | 'has-custom-icon': availableServices[i].custom_icon, | 115 | 'has-custom-icon': availableServices[i].custom_icon, |
@@ -125,14 +128,18 @@ export default @observer class Import extends Component { | |||
125 | </table> | 128 | </table> |
126 | {unavailableServices.length > 0 && ( | 129 | {unavailableServices.length > 0 && ( |
127 | <div className="unavailable-services"> | 130 | <div className="unavailable-services"> |
128 | <strong>{intl.formatMessage(messages.notSupportedHeadline)}</strong> | 131 | <strong> |
132 | {intl.formatMessage(messages.notSupportedHeadline)} | ||
133 | </strong> | ||
129 | <p> | 134 | <p> |
130 | {services.filter(s => !s.recipe).map((service, i) => ( | 135 | {services |
131 | <span key={service.id}> | 136 | .filter((s) => !s.recipe) |
132 | {service.name !== '' ? service.name : service.service} | 137 | .map((service, i) => ( |
133 | {unavailableServices.length > i + 1 ? ', ' : ''} | 138 | <span key={service.id}> |
134 | </span> | 139 | {service.name !== '' ? service.name : service.service} |
135 | ))} | 140 | {unavailableServices.length > i + 1 ? ', ' : ''} |
141 | </span> | ||
142 | ))} | ||
136 | </p> | 143 | </p> |
137 | </div> | 144 | </div> |
138 | )} | 145 | )} |
diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js index fd957ee73..4b4d63a6b 100644 --- a/src/components/auth/Invite.js +++ b/src/components/auth/Invite.js | |||
@@ -43,7 +43,9 @@ const messages = defineMessages({ | |||
43 | }, | 43 | }, |
44 | }); | 44 | }); |
45 | 45 | ||
46 | export default @observer class Invite extends Component { | 46 | export default |
47 | @observer | ||
48 | class Invite extends Component { | ||
47 | static propTypes = { | 49 | static propTypes = { |
48 | onSubmit: PropTypes.func.isRequired, | 50 | onSubmit: PropTypes.func.isRequired, |
49 | embed: PropTypes.bool, | 51 | embed: PropTypes.bool, |
@@ -63,36 +65,41 @@ export default @observer class Invite extends Component { | |||
63 | 65 | ||
64 | state = { showSuccessInfo: false }; | 66 | state = { showSuccessInfo: false }; |
65 | 67 | ||
66 | componentWillMount() { | 68 | componentDidMount() { |
67 | const handlers = { | 69 | this.form = new Form( |
68 | onChange: () => { | 70 | { |
69 | this.setState({ showSuccessInfo: false }); | 71 | fields: { |
70 | }, | 72 | invite: [ |
71 | }; | 73 | ...Array(3).fill({ |
72 | 74 | fields: { | |
73 | this.form = new Form({ | 75 | name: { |
74 | fields: { | 76 | label: this.context.intl.formatMessage(messages.nameLabel), |
75 | invite: [...Array(3).fill({ | 77 | placeholder: this.context.intl.formatMessage( |
76 | fields: { | 78 | messages.nameLabel, |
77 | name: { | 79 | ), |
78 | label: this.context.intl.formatMessage(messages.nameLabel), | 80 | onChange: () => { |
79 | placeholder: this.context.intl.formatMessage(messages.nameLabel), | 81 | this.setState({ showSuccessInfo: false }); |
80 | handlers, | 82 | }, |
81 | // related: ['invite.0.email'], // path accepted but does not work | 83 | // related: ['invite.0.email'], // path accepted but does not work |
82 | }, | 84 | }, |
83 | email: { | 85 | email: { |
84 | label: this.context.intl.formatMessage(messages.emailLabel), | 86 | label: this.context.intl.formatMessage(messages.emailLabel), |
85 | placeholder: this.context.intl.formatMessage(messages.emailLabel), | 87 | placeholder: this.context.intl.formatMessage( |
86 | handlers, | 88 | messages.emailLabel, |
87 | validators: [email], | 89 | ), |
88 | }, | 90 | onChange: () => { |
89 | }, | 91 | this.setState({ showSuccessInfo: false }); |
90 | })], | 92 | }, |
93 | validators: [email], | ||
94 | }, | ||
95 | }, | ||
96 | }), | ||
97 | ], | ||
98 | }, | ||
91 | }, | 99 | }, |
92 | }, this.context.intl); | 100 | this.context.intl, |
93 | } | 101 | ); |
94 | 102 | ||
95 | componentDidMount() { | ||
96 | document.querySelector('input:first-child').focus(); | 103 | document.querySelector('input:first-child').focus(); |
97 | } | 104 | } |
98 | 105 | ||
@@ -117,9 +124,10 @@ export default @observer class Invite extends Component { | |||
117 | const { intl } = this.context; | 124 | const { intl } = this.context; |
118 | const { embed, isInviteSuccessful, isLoadingInvite } = this.props; | 125 | const { embed, isInviteSuccessful, isLoadingInvite } = this.props; |
119 | 126 | ||
120 | const atLeastOneEmailAddress = form.$('invite') | 127 | const atLeastOneEmailAddress = form |
121 | .map(invite => invite.$('email').value) | 128 | .$('invite') |
122 | .some(emailValue => emailValue.trim() !== ''); | 129 | .map((invite) => invite.$('email').value) |
130 | .some((emailValue) => emailValue.trim() !== ''); | ||
123 | 131 | ||
124 | const sendButtonClassName = classnames({ | 132 | const sendButtonClassName = classnames({ |
125 | auth__button: true, | 133 | auth__button: true, |
@@ -127,7 +135,7 @@ export default @observer class Invite extends Component { | |||
127 | }); | 135 | }); |
128 | 136 | ||
129 | const renderForm = ( | 137 | const renderForm = ( |
130 | <Fragment> | 138 | <> |
131 | {this.state.showSuccessInfo && isInviteSuccessful && ( | 139 | {this.state.showSuccessInfo && isInviteSuccessful && ( |
132 | <Appear> | 140 | <Appear> |
133 | <Infobox | 141 | <Infobox |
@@ -140,18 +148,17 @@ export default @observer class Invite extends Component { | |||
140 | </Appear> | 148 | </Appear> |
141 | )} | 149 | )} |
142 | 150 | ||
143 | <form className="franz-form auth__form" onSubmit={e => this.submit(e)}> | 151 | <form |
152 | className="franz-form auth__form" | ||
153 | onSubmit={(e) => this.submit(e)} | ||
154 | > | ||
144 | {!embed && ( | 155 | {!embed && ( |
145 | <img | 156 | <img src="./assets/images/logo.svg" className="auth__logo" alt="" /> |
146 | src="./assets/images/logo.svg" | ||
147 | className="auth__logo" | ||
148 | alt="" | ||
149 | /> | ||
150 | )} | 157 | )} |
151 | <h1 className={embed && 'invite__embed'}> | 158 | <h1 className={embed && 'invite__embed'}> |
152 | {intl.formatMessage(messages.headline)} | 159 | {intl.formatMessage(messages.headline)} |
153 | </h1> | 160 | </h1> |
154 | {form.$('invite').map(invite => ( | 161 | {form.$('invite').map((invite) => ( |
155 | <div className="grid" key={invite.key}> | 162 | <div className="grid" key={invite.key}> |
156 | <div className="grid__row"> | 163 | <div className="grid__row"> |
157 | <Input field={invite.$('name')} showLabel={false} /> | 164 | <Input field={invite.$('name')} showLabel={false} /> |
@@ -175,17 +182,27 @@ export default @observer class Invite extends Component { | |||
175 | </Link> | 182 | </Link> |
176 | )} | 183 | )} |
177 | </form> | 184 | </form> |
178 | </Fragment> | 185 | </> |
179 | ); | 186 | ); |
180 | 187 | ||
181 | return ( | 188 | return ( |
182 | <div className={!embed ? 'auth__container auth__container--signup' : 'settings__main'}> | 189 | <div |
190 | className={ | ||
191 | !embed ? 'auth__container auth__container--signup' : 'settings__main' | ||
192 | } | ||
193 | > | ||
183 | {embed && ( | 194 | {embed && ( |
184 | <div className="settings__header"> | 195 | <div className="settings__header"> |
185 | <h1>{this.context.intl.formatMessage(messages.settingsHeadline)}</h1> | 196 | <h1> |
197 | {this.context.intl.formatMessage(messages.settingsHeadline)} | ||
198 | </h1> | ||
186 | </div> | 199 | </div> |
187 | )} | 200 | )} |
188 | {!embed ? <div>{renderForm}</div> : <div className="settings__body invite__form">{renderForm}</div>} | 201 | {!embed ? ( |
202 | <div>{renderForm}</div> | ||
203 | ) : ( | ||
204 | <div className="settings__body invite__form">{renderForm}</div> | ||
205 | )} | ||
189 | </div> | 206 | </div> |
190 | ); | 207 | ); |
191 | } | 208 | } |
diff --git a/src/components/auth/Pricing.js b/src/components/auth/Pricing.js index fecc6ba56..2fcabe54d 100644 --- a/src/components/auth/Pricing.js +++ b/src/components/auth/Pricing.js | |||
@@ -10,7 +10,6 @@ import { Button } from '@meetfranz/forms'; | |||
10 | import { FeatureItem } from '../ui/FeatureItem'; | 10 | import { FeatureItem } from '../ui/FeatureItem'; |
11 | import { FeatureList } from '../ui/FeatureList'; | 11 | import { FeatureList } from '../ui/FeatureList'; |
12 | 12 | ||
13 | |||
14 | const messages = defineMessages({ | 13 | const messages = defineMessages({ |
15 | headline: { | 14 | headline: { |
16 | id: 'pricing.trial.headline.pro', | 15 | id: 'pricing.trial.headline.pro', |
diff --git a/src/components/auth/Welcome.js b/src/components/auth/Welcome.js index 6e742e0c1..5f2fac64b 100644 --- a/src/components/auth/Welcome.js +++ b/src/components/auth/Welcome.js | |||
@@ -72,7 +72,6 @@ export default @inject('actions') @observer class Login extends Component { | |||
72 | <br /> | 72 | <br /> |
73 | <br /> | 73 | <br /> |
74 | 74 | ||
75 | |||
76 | <Link to={changeServerRoute}> | 75 | <Link to={changeServerRoute}> |
77 | <span style={{ | 76 | <span style={{ |
78 | textAlign: 'center', | 77 | textAlign: 'center', |