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