diff options
Diffstat (limited to 'src/components/auth/Import.js')
-rw-r--r-- | src/components/auth/Import.js | 168 |
1 files changed, 0 insertions, 168 deletions
diff --git a/src/components/auth/Import.js b/src/components/auth/Import.js deleted file mode 100644 index b897116e2..000000000 --- a/src/components/auth/Import.js +++ /dev/null | |||
@@ -1,168 +0,0 @@ | |||
1 | import { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; | ||
4 | import { defineMessages, injectIntl } from 'react-intl'; | ||
5 | import { Link } from 'react-router-dom'; | ||
6 | import classnames from 'classnames'; | ||
7 | import Form from '../../lib/Form'; | ||
8 | import Toggle from '../ui/toggle'; | ||
9 | import Button from '../ui/button'; | ||
10 | import { H1 } from '../ui/headline'; | ||
11 | |||
12 | const messages = defineMessages({ | ||
13 | headline: { | ||
14 | id: 'import.headline', | ||
15 | defaultMessage: 'Import your Ferdium 4 services', | ||
16 | }, | ||
17 | notSupportedHeadline: { | ||
18 | id: 'import.notSupportedHeadline', | ||
19 | defaultMessage: 'Services not yet supported in Ferdium 5', | ||
20 | }, | ||
21 | submitButtonLabel: { | ||
22 | id: 'import.submit.label', | ||
23 | defaultMessage: 'Import {count} services', | ||
24 | }, | ||
25 | skipButtonLabel: { | ||
26 | id: 'import.skip.label', | ||
27 | defaultMessage: 'I want to add services manually', | ||
28 | }, | ||
29 | }); | ||
30 | |||
31 | class Import extends Component { | ||
32 | static propTypes = { | ||
33 | services: MobxPropTypes.arrayOrObservableArray.isRequired, | ||
34 | onSubmit: PropTypes.func.isRequired, | ||
35 | isSubmitting: PropTypes.bool.isRequired, | ||
36 | inviteRoute: PropTypes.string.isRequired, | ||
37 | }; | ||
38 | |||
39 | componentDidMount() { | ||
40 | const config = { | ||
41 | fields: { | ||
42 | import: [ | ||
43 | ...this.props.services | ||
44 | .filter(s => s.recipe) | ||
45 | .map(s => ({ | ||
46 | fields: { | ||
47 | add: { | ||
48 | default: true, | ||
49 | options: s, | ||
50 | }, | ||
51 | }, | ||
52 | })), | ||
53 | ], | ||
54 | }, | ||
55 | }; | ||
56 | |||
57 | this.form = new Form(config, this.props.intl); | ||
58 | } | ||
59 | |||
60 | submit(e) { | ||
61 | const { services } = this.props; | ||
62 | e.preventDefault(); | ||
63 | this.form.submit({ | ||
64 | onSuccess: form => { | ||
65 | const servicesImport = form | ||
66 | .values() | ||
67 | .import.map( | ||
68 | (value, i) => !value.add || services.filter(s => s.recipe)[i], | ||
69 | ) | ||
70 | .filter(s => typeof s !== 'boolean'); | ||
71 | |||
72 | this.props.onSubmit({ services: servicesImport }); | ||
73 | }, | ||
74 | onError: () => {}, | ||
75 | }); | ||
76 | } | ||
77 | |||
78 | render() { | ||
79 | const { intl } = this.props; | ||
80 | const { services, isSubmitting, inviteRoute } = this.props; | ||
81 | |||
82 | const availableServices = services.filter(s => s.recipe); | ||
83 | const unavailableServices = services.filter(s => !s.recipe); | ||
84 | |||
85 | return ( | ||
86 | <div className="auth__scroll-container"> | ||
87 | <div className="auth__container auth__container--signup"> | ||
88 | <form | ||
89 | className="franz-form auth__form" | ||
90 | onSubmit={e => this.submit(e)} | ||
91 | > | ||
92 | <img src="./assets/images/logo.svg" className="auth__logo" alt="" /> | ||
93 | <H1>{intl.formatMessage(messages.headline)}</H1> | ||
94 | <table className="service-table available-services"> | ||
95 | <tbody> | ||
96 | {this.form.$('import').map((service, i) => ( | ||
97 | <tr key={service.id} className="service-table__row"> | ||
98 | <td className="service-table__toggle"> | ||
99 | <Toggle {...service.$('add').bind()} showLabel={false} /> | ||
100 | </td> | ||
101 | <td className="service-table__column-icon"> | ||
102 | <img | ||
103 | src={ | ||
104 | availableServices[i].custom_icon || | ||
105 | availableServices[i].recipe.icons.svg | ||
106 | } | ||
107 | className={classnames({ | ||
108 | 'service-table__icon': true, | ||
109 | 'has-custom-icon': availableServices[i].custom_icon, | ||
110 | })} | ||
111 | alt="" | ||
112 | /> | ||
113 | </td> | ||
114 | <td className="service-table__column-name"> | ||
115 | {availableServices[i].name !== '' | ||
116 | ? availableServices[i].name | ||
117 | : availableServices[i].recipe.name} | ||
118 | </td> | ||
119 | </tr> | ||
120 | ))} | ||
121 | </tbody> | ||
122 | </table> | ||
123 | {unavailableServices.length > 0 && ( | ||
124 | <div className="unavailable-services"> | ||
125 | <strong> | ||
126 | {intl.formatMessage(messages.notSupportedHeadline)} | ||
127 | </strong> | ||
128 | <p> | ||
129 | {services | ||
130 | .filter(s => !s.recipe) | ||
131 | .map((service, i) => ( | ||
132 | <span key={service.id}> | ||
133 | {service.name !== '' ? service.name : service.service} | ||
134 | {unavailableServices.length > i + 1 ? ', ' : ''} | ||
135 | </span> | ||
136 | ))} | ||
137 | </p> | ||
138 | </div> | ||
139 | )} | ||
140 | |||
141 | {isSubmitting ? ( | ||
142 | <Button | ||
143 | className="auth__button is-loading" | ||
144 | label={`${intl.formatMessage(messages.submitButtonLabel)} ...`} | ||
145 | loaded={false} | ||
146 | disabled | ||
147 | /> | ||
148 | ) : ( | ||
149 | <Button | ||
150 | type="submit" | ||
151 | className="auth__button" | ||
152 | label={intl.formatMessage(messages.submitButtonLabel)} | ||
153 | /> | ||
154 | )} | ||
155 | <Link | ||
156 | to={inviteRoute} | ||
157 | className="franz-form__button franz-form__button--secondary auth__button auth__button--skip" | ||
158 | > | ||
159 | {intl.formatMessage(messages.skipButtonLabel)} | ||
160 | </Link> | ||
161 | </form> | ||
162 | </div> | ||
163 | </div> | ||
164 | ); | ||
165 | } | ||
166 | } | ||
167 | |||
168 | export default injectIntl(observer(Import)); | ||