|
1 | | -import React, { useState, useEffect } from 'react'; |
2 | | -import { Form, Input, Button, Row, Col, Label } from 'reactstrap'; |
3 | | -import { NavLink, useLocation } from 'react-router-dom'; |
4 | | -import useAsyncEffect from 'use-async-effect'; |
5 | | -import queryString from 'query-string'; |
6 | | -import { useStoreState } from 'pullstate'; |
7 | | - |
8 | | -import handleSignup from '../../functions/auth/handleSignup'; |
| 1 | +import React, { useEffect } from 'react'; |
9 | 2 | import Loader from '../shared/Loader'; |
10 | | -import appState from '../../functions/state/appState'; |
11 | 3 |
|
12 | 4 | function SignUp() { |
13 | | - const { search } = useLocation(); |
14 | | - const { code, htuk, pageName, pageUri } = queryString.parse(search); |
15 | | - const auth = useStoreState(appState, (s) => s.auth); |
16 | | - const theme = useStoreState(appState, (s) => s.theme); |
17 | | - const [formState, setFormState] = useState({}); |
18 | | - const [formData, setFormData] = useState({ coupon_code: code, htuk, pageName, pageUri }); |
19 | | - const [showToolTip, setShowToolTip] = useState(false); |
20 | | - |
21 | | - useAsyncEffect(async () => { |
22 | | - if (formState.submitted) { |
23 | | - const newFormState = await handleSignup({ formData, theme }); |
24 | | - if (!auth.email && newFormState) setFormState(newFormState); |
25 | | - } |
26 | | - }, [formState]); |
27 | | - |
28 | 5 | useEffect(() => { |
29 | | - if (!formState.submitted) setFormState({}); |
30 | | - // eslint-disable-next-line |
31 | | - }, [formData]); |
32 | | - |
33 | | - return ( |
34 | | - <div className="login-form"> |
35 | | - {formState.submitted ? ( |
36 | | - <Loader header="creating your account" spinner relative /> |
37 | | - ) : ( |
38 | | - <> |
39 | | - <Form> |
40 | | - <h2 className="mb-2 instructions">Sign Up</h2> |
41 | | - <span className="mb-2 login-nav-link error d-inline-block">{formState.error}</span> |
42 | | - <Label className="mb-3 d-block"> |
43 | | - <span className="mb-2 d-inline-block">First Name</span> |
44 | | - <Input |
45 | | - id="firstname" |
46 | | - name="fname" |
47 | | - required |
48 | | - maxLength={40} |
49 | | - autoComplete="given-name" |
50 | | - type="text" |
51 | | - title="first name" |
52 | | - placeholder="Jane" |
53 | | - value={formData.firstname || ''} |
54 | | - disabled={formState.submitted} |
55 | | - onChange={(e) => setFormData({ ...formData, firstname: e.target.value })} |
56 | | - /> |
57 | | - </Label> |
58 | | - <Label className="mb-3 d-block"> |
59 | | - <span className="mb-2 d-inline-block">Last Name</span> |
60 | | - <Input |
61 | | - id="lastname" |
62 | | - name="lname" |
63 | | - maxLength={40} |
64 | | - required |
65 | | - autoComplete="family-name" |
66 | | - type="text" |
67 | | - title="last name" |
68 | | - placeholder="Doe" |
69 | | - value={formData.lastname || ''} |
70 | | - disabled={formState.submitted} |
71 | | - onChange={(e) => setFormData({ ...formData, lastname: e.target.value })} |
72 | | - /> |
73 | | - </Label> |
74 | | - <Label className="mb-3 d-block"> |
75 | | - <span className="mb-2 d-inline-block">Email</span> |
76 | | - <Input |
77 | | - id="email" |
78 | | - autoComplete="email" |
79 | | - name="email" |
80 | | - maxLength={80} |
81 | | - required |
82 | | - className="mb-2" |
83 | | - type="text" |
84 | | - title="email" |
85 | | - placeholder="jane.doe@harperdb.io" |
86 | | - value={formData.email || ''} |
87 | | - disabled={formState.submitted} |
88 | | - onChange={(e) => setFormData({ ...formData, email: e.target.value.toLowerCase() })} |
89 | | - /> |
90 | | - </Label> |
91 | | - <Label className="mb-3 d-block"> |
92 | | - <Row> |
93 | | - <span className="mb-2 d-inline-block">Subdomain</span> |
94 | | - <Col className="subdomain-form"> |
95 | | - <Input |
96 | | - id="subdomain" |
97 | | - name="subdomain" |
98 | | - required |
99 | | - className="" |
100 | | - type="text" |
101 | | - title="subdomain" |
102 | | - placeholder="janedev" |
103 | | - value={formData.subdomain || ''} |
104 | | - disabled={formState.submitted} |
105 | | - onChange={(e) => |
106 | | - setFormData({ ...formData, subdomain: e.target.value.substring(0, 14).toLowerCase() }) |
107 | | - } |
108 | | - /> |
109 | | - </Col> |
110 | | - <Col className="subdomain-label"> |
111 | | - .harperdbcloud.com{' '} |
112 | | - <Button color="link" onClick={() => setShowToolTip(!showToolTip)}> |
113 | | - <i className="fa fa-question-circle" /> |
114 | | - </Button> |
115 | | - </Col> |
116 | | - </Row> |
117 | | - </Label> |
118 | | - {showToolTip && <i className="subdomain-explanation">The URL of your Harper Cloud Instances</i>} |
119 | | - <Label className="mb-3 d-block"> |
120 | | - <span className="mb-2 d-inline-block">Coupon Code (Optional)</span> |
121 | | - <Input |
122 | | - id="coupon_code" |
123 | | - type="text" |
124 | | - className="mb-2" |
125 | | - name="coupon_code" |
126 | | - title="coupon code" |
127 | | - placeholder="XXXXXXXXX" |
128 | | - value={formData.coupon_code || ''} |
129 | | - onChange={(e) => setFormData({ ...formData, coupon_code: e.target.value })} |
130 | | - disabled={formState.submitted} |
131 | | - /> |
132 | | - </Label> |
133 | | - |
134 | | - <div className="mt-3 mb-3 d-block"> |
135 | | - <div className="disclaimer"> |
136 | | - By creating an account, you agree to the |
137 | | - <a href="https://harperdb.io/legal/privacy-policy/" target="_blank" rel="noopener noreferrer"> |
138 | | - Privacy Policy |
139 | | - </a> |
140 | | - and |
141 | | - <a |
142 | | - href="https://harperdb.io/legal/harperdb-cloud-terms-of-service/" |
143 | | - target="_blank" |
144 | | - rel="noopener noreferrer" |
145 | | - > |
146 | | - Terms of Service |
147 | | - </a> |
148 | | - </div> |
149 | | - </div> |
| 6 | + window.location.replace('https://fabric.harper.fast/#/sign-up'); |
| 7 | + }, []); |
150 | 8 |
|
151 | | - <Button |
152 | | - id="sign-up" |
153 | | - block |
154 | | - type="submit" |
155 | | - className="border-0 rounded-pill btn-gradient-blue" |
156 | | - disabled={formState.submitted} |
157 | | - onClick={() => setFormState({ submitted: true })} |
158 | | - > |
159 | | - {formState.submitted ? <i className="text-white fa fa-spinner fa-spin" /> : <span>Sign Up For Free</span>} |
160 | | - </Button> |
161 | | - </Form> |
162 | | - <div className="px-4 mt-3"> |
163 | | - <NavLink to="/" className="login-nav-link d-inline-block"> |
164 | | - Already Have An Account? Sign In Instead. |
165 | | - </NavLink> |
166 | | - </div> |
167 | | - </> |
168 | | - )} |
169 | | - </div> |
170 | | - ); |
| 9 | + return <Loader spinner relative />; |
171 | 10 | } |
172 | 11 |
|
173 | 12 | export default SignUp; |
0 commit comments