diff options
author | 2022-07-12 17:59:43 +0100 | |
---|---|---|
committer | 2022-07-12 16:59:43 +0000 | |
commit | 6415f2746e38ebe5cb328c2af94413a4d4e5da07 (patch) | |
tree | 58cdabbcc7fe9c8ceec58780b73d2528210fdaff /src/components/auth/SetupAssistant.js | |
parent | 6.0.0-nightly.98 [skip ci] (diff) | |
download | ferdium-app-6415f2746e38ebe5cb328c2af94413a4d4e5da07.tar.gz ferdium-app-6415f2746e38ebe5cb328c2af94413a4d4e5da07.tar.zst ferdium-app-6415f2746e38ebe5cb328c2af94413a4d4e5da07.zip |
Refactor the 'Welcome' screen and the 'SetupAssistant' for better UX (#472)
* Change auth styling and add back button
* Add Skip button on 'SetupAssistant'
Diffstat (limited to 'src/components/auth/SetupAssistant.js')
-rw-r--r-- | src/components/auth/SetupAssistant.js | 331 |
1 files changed, 0 insertions, 331 deletions
diff --git a/src/components/auth/SetupAssistant.js b/src/components/auth/SetupAssistant.js deleted file mode 100644 index e3d2d88d1..000000000 --- a/src/components/auth/SetupAssistant.js +++ /dev/null | |||
@@ -1,331 +0,0 @@ | |||
1 | import { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import { defineMessages, injectIntl } from 'react-intl'; | ||
5 | import injectSheet from 'react-jss'; | ||
6 | import classnames from 'classnames'; | ||
7 | |||
8 | import Input from '../ui/input/index'; | ||
9 | import Button from '../ui/button'; | ||
10 | import Badge from '../ui/badge'; | ||
11 | import Modal from '../ui/Modal'; | ||
12 | import Infobox from '../ui/Infobox'; | ||
13 | import Appear from '../ui/effects/Appear'; | ||
14 | import globalMessages from '../../i18n/globalMessages'; | ||
15 | |||
16 | import { CDN_URL } from '../../config'; | ||
17 | import { H1, H2 } from '../ui/headline'; | ||
18 | |||
19 | const SLACK_ID = 'slack'; | ||
20 | |||
21 | const messages = defineMessages({ | ||
22 | headline: { | ||
23 | id: 'setupAssistant.headline', | ||
24 | defaultMessage: "Let's get started", | ||
25 | }, | ||
26 | subHeadline: { | ||
27 | id: 'setupAssistant.subheadline', | ||
28 | defaultMessage: | ||
29 | 'Choose from our most used services and get back on top of your messaging now.', | ||
30 | }, | ||
31 | submitButtonLabel: { | ||
32 | id: 'setupAssistant.submit.label', | ||
33 | defaultMessage: "Let's go", | ||
34 | }, | ||
35 | inviteSuccessInfo: { | ||
36 | id: 'invite.successInfo', | ||
37 | defaultMessage: 'Invitations sent successfully', | ||
38 | }, | ||
39 | }); | ||
40 | |||
41 | let transition = 'none'; | ||
42 | |||
43 | if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) { | ||
44 | transition = 'all 0.25s'; | ||
45 | } | ||
46 | |||
47 | const styles = theme => ({ | ||
48 | root: { | ||
49 | width: '500px !important', | ||
50 | textAlign: 'center', | ||
51 | padding: 20, | ||
52 | |||
53 | '& h1': {}, | ||
54 | }, | ||
55 | servicesGrid: { | ||
56 | display: 'flex', | ||
57 | flexWrap: 'wrap', | ||
58 | justifyContent: 'space-between', | ||
59 | }, | ||
60 | serviceContainer: { | ||
61 | background: theme.colorBackground, | ||
62 | position: 'relative', | ||
63 | width: '32%', | ||
64 | display: 'flex', | ||
65 | alignItems: 'center', | ||
66 | flexDirection: 'column', | ||
67 | justifyContent: 'center', | ||
68 | padding: 20, | ||
69 | borderRadius: theme.borderRadius, | ||
70 | marginBottom: 10, | ||
71 | opacity: 0.5, | ||
72 | transition, | ||
73 | border: [3, 'solid', 'transparent'], | ||
74 | |||
75 | '& h2': { | ||
76 | margin: [10, 0, 0], | ||
77 | color: theme.colorText, | ||
78 | }, | ||
79 | |||
80 | '&:hover': { | ||
81 | border: [3, 'solid', theme.brandPrimary], | ||
82 | '& $serviceIcon': {}, | ||
83 | }, | ||
84 | }, | ||
85 | selected: { | ||
86 | border: [3, 'solid', theme.brandPrimary], | ||
87 | background: `${theme.brandPrimary}47`, | ||
88 | opacity: 1, | ||
89 | }, | ||
90 | serviceIcon: { | ||
91 | width: 50, | ||
92 | transition, | ||
93 | }, | ||
94 | |||
95 | slackModalContent: { | ||
96 | textAlign: 'center', | ||
97 | |||
98 | '& img': { | ||
99 | width: 50, | ||
100 | marginBottom: 20, | ||
101 | }, | ||
102 | }, | ||
103 | modalActionContainer: { | ||
104 | display: 'flex', | ||
105 | flexDirection: 'column', | ||
106 | justifyContent: 'center', | ||
107 | alignItems: 'center', | ||
108 | }, | ||
109 | ctaCancel: { | ||
110 | background: 'none !important', | ||
111 | }, | ||
112 | slackBadge: { | ||
113 | position: 'absolute', | ||
114 | bottom: 4, | ||
115 | height: 'auto', | ||
116 | padding: '0px 4px', | ||
117 | borderRadius: theme.borderRadiusSmall, | ||
118 | margin: 0, | ||
119 | display: 'flex', | ||
120 | overflow: 'hidden', | ||
121 | }, | ||
122 | clearSlackWorkspace: { | ||
123 | background: theme.inputPrefixColor, | ||
124 | marginLeft: 5, | ||
125 | height: '100%', | ||
126 | color: theme.colorText, | ||
127 | display: 'inline-flex', | ||
128 | justifyContent: 'center', | ||
129 | alignItems: 'center', | ||
130 | marginRight: -4, | ||
131 | padding: [0, 5], | ||
132 | }, | ||
133 | }); | ||
134 | |||
135 | class SetupAssistant extends Component { | ||
136 | static propTypes = { | ||
137 | classes: PropTypes.object.isRequired, | ||
138 | onSubmit: PropTypes.func.isRequired, | ||
139 | isInviteSuccessful: PropTypes.bool, | ||
140 | services: PropTypes.object.isRequired, | ||
141 | isSettingUpServices: PropTypes.bool.isRequired, | ||
142 | }; | ||
143 | |||
144 | static defaultProps = { | ||
145 | isInviteSuccessful: false, | ||
146 | }; | ||
147 | |||
148 | state = { | ||
149 | services: [ | ||
150 | { | ||
151 | id: 'whatsapp', | ||
152 | }, | ||
153 | { | ||
154 | id: 'messenger', | ||
155 | }, | ||
156 | { | ||
157 | id: 'gmail', | ||
158 | }, | ||
159 | ], | ||
160 | isSlackModalOpen: false, | ||
161 | slackWorkspace: '', | ||
162 | }; | ||
163 | |||
164 | slackWorkspaceHandler() { | ||
165 | const { slackWorkspace = '', services } = this.state; | ||
166 | |||
167 | const sanitizedWorkspace = slackWorkspace | ||
168 | .trim() | ||
169 | .replace(/^https?:\/\//, ''); | ||
170 | |||
171 | if (sanitizedWorkspace) { | ||
172 | const index = services.findIndex(s => s.id === SLACK_ID); | ||
173 | |||
174 | if (index === -1) { | ||
175 | const newServices = services; | ||
176 | newServices.push({ id: SLACK_ID, team: sanitizedWorkspace }); | ||
177 | this.setState({ services: newServices }); | ||
178 | } | ||
179 | } | ||
180 | |||
181 | this.setState({ | ||
182 | isSlackModalOpen: false, | ||
183 | slackWorkspace: sanitizedWorkspace, | ||
184 | }); | ||
185 | } | ||
186 | |||
187 | render() { | ||
188 | const { intl } = this.props; | ||
189 | const { | ||
190 | classes, | ||
191 | isInviteSuccessful, | ||
192 | onSubmit, | ||
193 | services, | ||
194 | isSettingUpServices, | ||
195 | } = this.props; | ||
196 | const { | ||
197 | isSlackModalOpen, | ||
198 | slackWorkspace, | ||
199 | services: addedServices, | ||
200 | } = this.state; | ||
201 | |||
202 | return ( | ||
203 | <div className={`auth__container ${classes.root}`}> | ||
204 | {this.state.showSuccessInfo && isInviteSuccessful && ( | ||
205 | <Appear> | ||
206 | <Infobox | ||
207 | type="success" | ||
208 | icon="checkbox-marked-circle-outline" | ||
209 | dismissable | ||
210 | > | ||
211 | {intl.formatMessage(messages.inviteSuccessInfo)} | ||
212 | </Infobox> | ||
213 | </Appear> | ||
214 | )} | ||
215 | |||
216 | <img src="./assets/images/logo.svg" className="auth__logo" alt="" /> | ||
217 | <H1>{intl.formatMessage(messages.headline)}</H1> | ||
218 | <H2>{intl.formatMessage(messages.subHeadline)}</H2> | ||
219 | <div className={classnames('grid', classes.servicesGrid)}> | ||
220 | {Object.keys(services).map(id => { | ||
221 | const service = services[id]; | ||
222 | return ( | ||
223 | <button | ||
224 | className={classnames({ | ||
225 | [classes.serviceContainer]: true, | ||
226 | [classes.selected]: | ||
227 | this.state.services.findIndex(s => s.id === id) !== -1, | ||
228 | })} | ||
229 | key={id} | ||
230 | onClick={() => { | ||
231 | const index = this.state.services.findIndex(s => s.id === id); | ||
232 | if (index === -1) { | ||
233 | if (id === SLACK_ID) { | ||
234 | this.setState({ isSlackModalOpen: true }); | ||
235 | } else { | ||
236 | addedServices.push({ id }); | ||
237 | } | ||
238 | } else { | ||
239 | addedServices.splice(index, 1); | ||
240 | if (id === SLACK_ID) { | ||
241 | this.setState({ | ||
242 | slackWorkspace: '', | ||
243 | }); | ||
244 | } | ||
245 | } | ||
246 | |||
247 | this.setState({ services: addedServices }); | ||
248 | }} | ||
249 | type="button" | ||
250 | > | ||
251 | <img | ||
252 | src={`${CDN_URL}/recipes/dist/${id}/src/icon.svg`} | ||
253 | className={classes.serviceIcon} | ||
254 | alt="" | ||
255 | /> | ||
256 | <H2>{service.name}</H2> | ||
257 | {id === SLACK_ID && slackWorkspace && ( | ||
258 | <Badge type="secondary" className={classes.slackBadge}> | ||
259 | {slackWorkspace} | ||
260 | <button | ||
261 | type="button" | ||
262 | className={classes.clearSlackWorkspace} | ||
263 | onClick={() => { | ||
264 | this.setState({ | ||
265 | slackWorkspace: '', | ||
266 | }); | ||
267 | }} | ||
268 | > | ||
269 | x | ||
270 | </button> | ||
271 | </Badge> | ||
272 | )} | ||
273 | </button> | ||
274 | ); | ||
275 | })} | ||
276 | </div> | ||
277 | <Modal | ||
278 | isOpen={isSlackModalOpen} | ||
279 | // isBlocking={false} | ||
280 | close={() => this.setState({ isSlackModalOpen: false })} | ||
281 | > | ||
282 | <div className={classes.slackModalContent}> | ||
283 | <img src={`${CDN_URL}/recipes/dist/slack/src/icon.svg`} alt="" /> | ||
284 | <H1>Create your first Slack workspace</H1> | ||
285 | <form | ||
286 | onSubmit={e => { | ||
287 | e.preventDefault(); | ||
288 | this.slackWorkspaceHandler(); | ||
289 | }} | ||
290 | > | ||
291 | <Input | ||
292 | suffix=".slack.com" | ||
293 | placeholder="workspace-url" | ||
294 | onChange={e => | ||
295 | this.setState({ slackWorkspace: e.target.value }) | ||
296 | } | ||
297 | value={slackWorkspace} | ||
298 | /> | ||
299 | <div className={classes.modalActionContainer}> | ||
300 | <Button | ||
301 | type="submit" | ||
302 | label={intl.formatMessage(globalMessages.save)} | ||
303 | /> | ||
304 | <Button | ||
305 | type="link" | ||
306 | buttonType="secondary" | ||
307 | label={intl.formatMessage(globalMessages.cancel)} | ||
308 | className={classes.ctaCancel} | ||
309 | onClick={() => this.setState({ slackWorkspace: '' })} | ||
310 | /> | ||
311 | </div> | ||
312 | </form> | ||
313 | </div> | ||
314 | </Modal> | ||
315 | <Button | ||
316 | type="button" | ||
317 | className="auth__button" | ||
318 | // disabled={!atLeastOneEmailAddress} | ||
319 | label={intl.formatMessage(messages.submitButtonLabel)} | ||
320 | onClick={() => onSubmit(this.state.services)} | ||
321 | busy={isSettingUpServices} | ||
322 | disabled={isSettingUpServices || addedServices.length === 0} | ||
323 | /> | ||
324 | </div> | ||
325 | ); | ||
326 | } | ||
327 | } | ||
328 | |||
329 | export default injectIntl( | ||
330 | injectSheet(styles, { injectTheme: true })(observer(SetupAssistant)), | ||
331 | ); | ||