Skip to content

Commit b0c1890

Browse files
lucuilearningpoollucuilearningpool
authored
feat(Registration): Add open source registrations (LLC-1294) (#1592)
1 parent 594ef49 commit b0c1890

10 files changed

Lines changed: 272 additions & 123 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,5 @@
88
*Learning Locker is copyright [Learning Pool](https://learningpool.com/)*
99

1010
Please see our [documentation](http://docs.learninglocker.net) for installation, configuration, and usage instructions.
11+
12+
You can also [register your Learning Locker](https://learningpool.com/register-locker) or get [Learning Locker Data Cloud](https://learningpool.com/solutions/learning-record-store-learning-locker).

‎lib/constants/siteSettings.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
// eslint-disable-next-line import/prefer-default-export
22
export const SITE_SETTINGS_ID = '111111111111111111111111';
3+
export const SITE_SETTINGS_OS_REG_CODE = 'LLOSREG2021';

‎ui/src/components/FullPageBackground/index.js‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,6 @@ const Centered = styled.div`
3535
}
3636
`;
3737

38-
const Underline = styled.div`
39-
height: 0;
40-
border-bottom: 2px solid #DDA476;
41-
width: 250px;
42-
`;
4338

4439
const Headline = styled.span`
4540
text-transform: uppercase;
@@ -85,12 +80,11 @@ const versionDisplay = (version) => {
8580
return <p title={longDisplay}>{display}</p>;
8681
};
8782

88-
const FullPageBackground = ({ version, children, width = 600 }) => (
83+
const FullPageBackground = ({ version, children, width = 800 }) => (
8984
<Background>
9085
<Centered>
9186
<img alt="logo" src={logoImg} />
9287
<Headline>making learning measurable</Headline>
93-
<Underline />
9488
<div style={{ width }}>
9589
{children}
9690
</div>

‎ui/src/pages/HomePage/Register/CardContainer.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import styled from 'styled-components';
22
import { CardText } from 'react-toolbox/lib/card';
33

44
export const CardContainer = styled(CardText)`
5-
color: white;
6-
background-color: #f5aa34;
5+
color: #687B88;
6+
background-color: white;
77
background-image: url("../../../assets/geometric-pattern.png");
88
background-repeat: no-repeat;
99
background-position: center;

ui/src/pages/HomePage/Register/DontShowAgainText.js renamed to ui/src/pages/HomePage/Register/NotNowText.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import styled from 'styled-components';
22

3-
export const DontShowAgainText = styled.span`
3+
export const NotNowText = styled.span`
44
color: #8d5e28;
55
margin-top: 12px;
66
cursor: pointer;
7+
width: 100%;
78
89
:hover {
910
color: #8d5e28;

‎ui/src/pages/HomePage/Register/RegistrationLink.js‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,23 @@
1-
import styled from 'styled-components';
1+
import styled, { css } from 'styled-components';
22

3-
export const RegistrationLink = styled.a`
3+
const baseInputStyles = css`
44
display: block;
5-
background: #276CDA !important;
6-
width: 80px;
5+
text-align: center;
6+
width: 100%;
7+
color: #333;
8+
background: #f5aa34 !important;
79
margin-left: 12px;
10+
&:hover, &:focus {
11+
color: #333 !important;
12+
}
13+
margin-top: 20px;
14+
`;
15+
16+
export const RegistrationLink = styled.a`
17+
${baseInputStyles}
18+
`;
19+
20+
export const RegistrationLinkAccented = styled.a`
21+
${baseInputStyles}
22+
font-weight: 700;
823
`;

‎ui/src/pages/HomePage/Register/RegistrationLogo.js‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎ui/src/pages/HomePage/Register/RegistrationText.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,8 @@ export const RegistrationText = styled.div`
55
font-size: 28px;
66
font-weight: bold;
77
`;
8+
9+
export const RegistrationInfoText = styled.div`
10+
font-size: 15px;
11+
text-align: left;
12+
`;

‎ui/src/pages/HomePage/Register/index.js‎

Lines changed: 152 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,168 @@
1-
import React from 'react';
1+
import React, { useState, useRef } from 'react';
2+
import { fromJS } from 'immutable';
3+
import uuid from 'uuid';
4+
import Portal from 'react-portal';
5+
import classNames from 'classnames';
26
import { Card } from 'react-toolbox/lib/card';
37
import { withModel } from 'ui/utils/hocs';
48
import {
59
compose,
610
withProps,
7-
withHandlers,
8-
withState
11+
withHandlers
912
} from 'recompose';
10-
import { SITE_SETTINGS_ID } from 'lib/constants/siteSettings';
11-
import registerLogo from 'ui/static/register-logo.png';
13+
import { SITE_SETTINGS_ID, SITE_SETTINGS_OS_REG_CODE } from 'lib/constants/siteSettings';
14+
import ValidationList from 'ui/components/ValidationList';
1215
import { CardContainer } from './CardContainer';
1316
import { Divider } from './Divider';
14-
import { DontShowAgainText } from './DontShowAgainText';
15-
import { RegistrationLink } from './RegistrationLink';
16-
import { RegistrationLogo } from './RegistrationLogo';
17-
import { RegistrationText } from './RegistrationText';
17+
import { NotNowText } from './NotNowText';
18+
import { RegistrationLink, RegistrationLinkAccented } from './RegistrationLink';
19+
import { RegistrationText, RegistrationInfoText } from './RegistrationText';
1820

19-
const Register = ({
20-
model,
21-
setRegistered,
22-
ok,
23-
}) => {
24-
if (model.size === 0 || model.get('dontShowRegistration') === true || ok === true) {
25-
return <div />;
26-
}
21+
const Register = ({ setRegistered }) => {
22+
const [modalOpen, setModalOpen] = useState(false);
23+
const [error, setError] = useState(false);
24+
const codeRef = useRef();
2725

28-
return (<Card>
29-
<CardContainer>
30-
<div>
31-
<RegistrationLogo role="presentation" src={registerLogo} />
32-
<RegistrationText>REGISTER YOUR LOCKER</RegistrationText>
33-
<Divider />
34-
<div style={{ fontSize: 16 }}>
35-
Get helpdesk access and help promote the Open Source project
36-
</div>
26+
const onSubmit = (event) => {
27+
event.preventDefault();
3728

38-
<div style={{ marginTop: 20 }}>
39-
<RegistrationLink
40-
className="btn btn-primary pull-right"
41-
href="https://www.ht2labs.com/learning-locker/register-installation/#register"
42-
target="_blank"
43-
onClick={setRegistered}
44-
rel="noopener noreferrer">
45-
Register
46-
</RegistrationLink>
29+
if (SITE_SETTINGS_OS_REG_CODE === codeRef.current.value) {
30+
setModalOpen(false);
31+
setRegistered();
32+
} else {
33+
setError('Incorrect code, please try again.');
34+
}
35+
};
4736

48-
<DontShowAgainText
49-
className="pull-left"
50-
onClick={setRegistered}>
51-
Don&#39;t show again
52-
</DontShowAgainText>
37+
const renderInviteModal = () => {
38+
const codeId = uuid.v4();
5339

54-
</div>
55-
</div>
56-
</CardContainer>
57-
</Card>);
40+
return (
41+
<Portal isOpened={modalOpen}>
42+
<span>
43+
<div className="modal animated fast fadeIn">
44+
<div className="modal-dialog">
45+
<div className="modal-content">
46+
<div className="modal-header modal-header-bg">
47+
<button type="button" className="close" aria-label="Close" onClick={() => setModalOpen(false)}><span aria-hidden="true">&times;</span></button>
48+
<h4 className="modal-title">Enter Code</h4>
49+
</div>
50+
<form onSubmit={onSubmit}>
51+
<div className="modal-body clearfix">
52+
<div
53+
className={classNames({
54+
'form-group': true,
55+
'has-error': error
56+
})} >
57+
<label htmlFor={codeId}>Registration Code</label>
58+
<input
59+
autoFocus
60+
id={codeId}
61+
className="form-control"
62+
type="text"
63+
ref={codeRef} />
64+
{error &&
65+
(<span className="help-block">
66+
<ValidationList errors={fromJS([error])} />
67+
</span>
68+
)
69+
}
70+
</div>
71+
</div>
72+
<div className="modal-footer">
73+
<div className="col-xs-12 clearfix">
74+
<button className="btn btn-primary btn-sm pull-right">
75+
Confirm
76+
</button>
77+
</div>
78+
</div>
79+
</form>
80+
</div>
81+
</div>
82+
<div className="modal-backdrop" onClick={() => setModalOpen(false)} />
83+
</div>
84+
</span>
85+
</Portal>
86+
);
87+
};
88+
89+
const setProceedOnce = () => {
90+
sessionStorage.setItem('proceedOnce', true);
91+
document.dispatchEvent(new Event('setProceedOnce'));
92+
};
93+
94+
return (<div>
95+
{ renderInviteModal() }
96+
<div className="col-md-7" style={{ marginTop: 10 }}>
97+
<Card>
98+
<CardContainer>
99+
<div>
100+
<RegistrationText>Learning Locker Data Cloud</RegistrationText>
101+
<Divider />
102+
<RegistrationInfoText>
103+
<p>Feeling the strain of hosting your own?</p>
104+
<br />
105+
<p>Learning Locker Data Cloud is our fully managed option for Learning Locker, including a range of feature enhancing plugins only available to paying customers.</p>
106+
<ul>
107+
<li><p>Fully managed, auto-scaling, single tenant hosting in a range of AWS data locations</p></li>
108+
<li><p>World-class customer support, on the phone and online</p></li>
109+
<li><p>Secure to ISO 27001 certification standards</p></li>
110+
<li><p>Plug and play integrations with platforms such as Degreed, Cornerstone and Credly</p></li>
111+
<li><p>Data lake and BI integrations such as Tableau, SiSense and Power BI</p></li>
112+
</ul>
113+
<p>Unique plugin features including journeys, GDPR request management, semantic analysis, and statement forwarding.</p>
114+
</RegistrationInfoText>
115+
116+
<RegistrationLinkAccented
117+
className="btn btn-primary pull-right"
118+
href="https://learningpool.com/solutions/learning-record-store-learning-locker"
119+
target="_blank"
120+
rel="noopener noreferrer">
121+
Get Learning Locker Data Cloud
122+
</RegistrationLinkAccented>
123+
124+
</div>
125+
</CardContainer>
126+
</Card>
127+
</div>
128+
<div className="col-md-5" style={{ marginTop: 10 }}>
129+
<Card>
130+
<CardContainer>
131+
<div>
132+
<RegistrationText>Register</RegistrationText>
133+
<Divider />
134+
<RegistrationInfoText>
135+
<p>
136+
By registering, you help the Learning Locker team understand more about who is adopting xAPI, how Learning Locker is being used and gives us a feedback channel to reach out for input on our next features and releases.
137+
</p>
138+
</RegistrationInfoText>
139+
140+
<RegistrationLink
141+
className="btn btn-primary pull-right"
142+
href="https://learningpool.com/register-locker"
143+
target="_blank"
144+
rel="noopener noreferrer">
145+
Register
146+
</RegistrationLink>
147+
148+
<RegistrationLink
149+
className="btn btn-primary pull-right"
150+
onClick={() => setModalOpen(true)}
151+
rel="noopener noreferrer">
152+
Enter a Registration Code
153+
</RegistrationLink>
154+
155+
<NotNowText
156+
className="pull-left"
157+
onClick={setProceedOnce}>
158+
Not now
159+
</NotNowText>
160+
161+
</div>
162+
</CardContainer>
163+
</Card>
164+
</div>
165+
</div>);
58166
};
59167

60168
export default compose(
@@ -69,5 +177,4 @@ export default compose(
69177
value: true
70178
})
71179
}),
72-
withState('ok', 'setOk', false)
73180
)(Register);

0 commit comments

Comments
 (0)