mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-04-19 22:12:13 +00:00
intro screen reimplemented
This commit is contained in:
NikolaBorislavovHristov
parent
59722d25c7
commit
be483f8ade
3 changed files with 207 additions and 194 deletions
|
|
@ -3,7 +3,6 @@
|
|||
--icon-color: var(--color-surface);
|
||||
--icon-background-color: transparent;
|
||||
|
||||
padding: calc(var(--spacing) * 0.5);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
|
@ -12,12 +11,11 @@
|
|||
|
||||
.label {
|
||||
flex: 1;
|
||||
margin-left: calc(var(--spacing) * 0.5);
|
||||
margin-left: 0.5em;
|
||||
line-height: 1.2em;
|
||||
color: var(--color-surface);
|
||||
|
||||
.link {
|
||||
line-height: 1.2em;
|
||||
color: var(--color-surfacelight);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,6 +33,10 @@ class Intro extends Component {
|
|||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.emailRef.current.focus();
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps, nextState) {
|
||||
return nextState.selectedForm !== this.state.selectedForm ||
|
||||
nextState.termsAccepted !== this.state.termsAccepted ||
|
||||
|
|
@ -71,14 +75,33 @@ class Intro extends Component {
|
|||
this.setState({ email: event.target.value });
|
||||
}
|
||||
|
||||
emailOnSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
this.passwordRef.current.focus();
|
||||
}
|
||||
|
||||
passwordOnChange = (event) => {
|
||||
this.setState({ password: event.target.value });
|
||||
}
|
||||
|
||||
passwordOnSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
if (this.state.selectedForm === FORMS.LOGIN) {
|
||||
this.loginWithEmail();
|
||||
} else {
|
||||
this.confirmPasswordRef.current.focus();
|
||||
}
|
||||
}
|
||||
|
||||
confirmPasswordOnChange = (event) => {
|
||||
this.setState({ confirmPassword: event.target.value });
|
||||
}
|
||||
|
||||
confirmPasswordOnSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
this.termsRef.current.focus();
|
||||
}
|
||||
|
||||
toggleTerms = () => {
|
||||
this.setState(({ termsAccepted }) => ({
|
||||
termsAccepted: !termsAccepted
|
||||
|
|
@ -97,73 +120,61 @@ class Intro extends Component {
|
|||
}));
|
||||
}
|
||||
|
||||
loginOnSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
if (this.state.email.length < 8) {
|
||||
this.setState({ error: 'Please enter a valid email' });
|
||||
} else {
|
||||
if (this.emailRef.current === document.activeElement) {
|
||||
this.passwordRef.current.focus();
|
||||
}
|
||||
|
||||
if (this.state.password.length === 0) {
|
||||
this.setState({ error: 'Invalid password' });
|
||||
} else {
|
||||
this.setState({ error: '' });
|
||||
}
|
||||
}
|
||||
loginWithFacebook = () => {
|
||||
alert('Facebook login');
|
||||
}
|
||||
|
||||
signUpOnSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
loginWithEmail = () => {
|
||||
if (this.state.email.length < 8) {
|
||||
this.setState({ error: 'Please enter a valid email' });
|
||||
} else {
|
||||
if (this.emailRef.current === document.activeElement) {
|
||||
this.passwordRef.current.focus();
|
||||
}
|
||||
|
||||
if (this.state.password.length === 0) {
|
||||
this.setState({ error: 'Invalid password' });
|
||||
} else {
|
||||
if (this.passwordRef.current === document.activeElement) {
|
||||
this.confirmPasswordRef.current.focus();
|
||||
}
|
||||
|
||||
if (this.state.password !== this.state.confirmPassword) {
|
||||
this.setState({ error: 'Passwords dont match' });
|
||||
} else {
|
||||
if (this.confirmPasswordRef.current === document.activeElement) {
|
||||
this.termsRef.current.focus();
|
||||
}
|
||||
|
||||
if (!this.state.termsAccepted) {
|
||||
this.setState({ error: 'You must accept the Terms of Service' });
|
||||
} else {
|
||||
if (this.termsRef.current === document.activeElement) {
|
||||
this.privacyPolicyRef.current.focus();
|
||||
}
|
||||
|
||||
if (!this.state.privacyPolicyAccepted) {
|
||||
this.setState({ error: 'You must accept the Privacy Policy' });
|
||||
} else {
|
||||
if (this.privacyPolicyRef.current === document.activeElement) {
|
||||
this.marketingRef.current.focus();
|
||||
}
|
||||
|
||||
this.setState({ error: '' });
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.state.password.length === 0) {
|
||||
this.setState({ error: 'Invalid password' });
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState({ error: '' });
|
||||
alert('Email login');
|
||||
}
|
||||
|
||||
guestLoginOnSubmit = () => {
|
||||
signup = () => {
|
||||
if (this.state.email.length < 8) {
|
||||
this.setState({ error: 'Please enter a valid email' });
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.state.password.length === 0) {
|
||||
this.setState({ error: 'Invalid password' });
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.state.password !== this.state.confirmPassword) {
|
||||
this.setState({ error: 'Passwords dont match' });
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.state.termsAccepted) {
|
||||
this.setState({ error: 'You must accept the Terms of Service' });
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.state.privacyPolicyAccepted) {
|
||||
this.setState({ error: 'You must accept the Privacy Policy' });
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState({ error: '' });
|
||||
alert('Signup');
|
||||
}
|
||||
|
||||
loginAsGuest = () => {
|
||||
if (!this.state.termsAccepted) {
|
||||
this.setState({ error: 'You must accept the Terms of Service' });
|
||||
} else {
|
||||
this.setState({ error: '' });
|
||||
alert('Guest login');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -172,44 +183,54 @@ class Intro extends Component {
|
|||
<div className={styles['intro-container']}>
|
||||
<div className={styles['overlay']} />
|
||||
<div className={styles['scroll-content']}>
|
||||
<div className={styles['intro']}>
|
||||
<Input className={styles['facebook-button']} type={'button'} >
|
||||
<div className={styles['form-container']}>
|
||||
<Input className={styles['facebook-button']} type={'button'} onClick={this.loginWithFacebook}>
|
||||
<Icon className={styles['icon']} icon={'ic_facebook'} />
|
||||
<div className={styles['label']}>Login with Facebook</div>
|
||||
</Input>
|
||||
<div className={styles['facebook-statement']}>We won't post anything on your behalf</div>
|
||||
<form className={styles['form-container']} onSubmit={this.state.selectedForm === FORMS.LOGIN ? this.loginOnSubmit : this.signUpOnSubmit}>
|
||||
<form onSubmit={this.emailOnSubmit}>
|
||||
<Input ref={this.emailRef} className={styles['text-input']} type={'email'} placeholder={'Email'} value={this.state.email} onChange={this.emailOnChange} />
|
||||
<Input ref={this.passwordRef} className={styles['text-input']} type={'password'} placeholder={'Password'} value={this.state.password} onChange={this.passwordOnChange} />
|
||||
{
|
||||
this.state.selectedForm === FORMS.LOGIN ?
|
||||
<Input className={styles['forgot-password']} type={'link'} href={'https://www.strem.io/reset-password/'} target={'_blank'}>Forgot password?</Input>
|
||||
:
|
||||
<Fragment>
|
||||
<Input ref={this.confirmPasswordRef} className={styles['text-input']} type={'password'} placeholder={'Confirm Password'} value={this.state.confirmPassword} onChange={this.confirmPasswordOnChange} />
|
||||
<ConsentCheckbox ref={this.termsRef} className={styles['consent-checkbox']} label={'I have read and agree with the Stremio'} link={'Terms and conditions'} href={'https://www.stremio.com/tos'} checked={this.state.termsAccepted} onClick={this.toggleTerms} />
|
||||
<ConsentCheckbox ref={this.privacyPolicyRef} className={styles['consent-checkbox']} label={'I have read and agree with the Stremio'} link={'Privacy Policy'} href={'https://www.stremio.com/privacy'} checked={this.state.privacyPolicyAccepted} onClick={this.togglePrivacyPolicy} />
|
||||
<ConsentCheckbox ref={this.marketingRef} className={styles['consent-checkbox']} label={'I agree to receive marketing communications from Stremio'} checked={this.state.marketingAccepted} onClick={this.toggleMarketing} />
|
||||
</Fragment>
|
||||
}
|
||||
{
|
||||
this.state.error.length > 0 ?
|
||||
<div ref={this.errorRef} className={styles['error']}>{this.state.error}</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
<Input className={styles['submit-button']} type={'submit'} value={this.state.selectedForm === FORMS.LOGIN ? 'LOG IN' : 'SING UP'} />
|
||||
</form>
|
||||
<Input className={styles['switch-form-button']} type={'button'} data-form={this.state.selectedForm === FORMS.SIGN_UP ? FORMS.LOGIN : FORMS.SIGN_UP} onClick={this.changeSelectedForm}>{this.state.selectedForm === FORMS.SIGN_UP ? 'LOG IN' : 'SING UP WITH EMAIL'}</Input>
|
||||
<form onSubmit={this.passwordOnSubmit}>
|
||||
<Input ref={this.passwordRef} className={styles['text-input']} type={'password'} placeholder={'Password'} value={this.state.password} onChange={this.passwordOnChange} />
|
||||
</form>
|
||||
{
|
||||
this.state.selectedForm === FORMS.SIGN_UP ?
|
||||
<Input className={styles['guest-login-button']} type={'button'} onClick={this.guestLoginOnSubmit}>GUEST LOGIN</Input>
|
||||
this.state.selectedForm === FORMS.LOGIN ?
|
||||
<Input className={styles['forgot-password-link']} type={'link'} href={'https://www.strem.io/reset-password/'} target={'_blank'}>Forgot password?</Input>
|
||||
:
|
||||
<Fragment>
|
||||
<form onSubmit={this.confirmPasswordOnSubmit}>
|
||||
<Input ref={this.confirmPasswordRef} className={styles['text-input']} type={'password'} placeholder={'Confirm Password'} value={this.state.confirmPassword} onChange={this.confirmPasswordOnChange} />
|
||||
</form>
|
||||
<ConsentCheckbox ref={this.termsRef} className={styles['consent-checkbox']} label={'I have read and agree with the Stremio'} link={'Terms and conditions'} href={'https://www.stremio.com/tos'} checked={this.state.termsAccepted} onClick={this.toggleTerms} />
|
||||
<ConsentCheckbox ref={this.privacyPolicyRef} className={styles['consent-checkbox']} label={'I have read and agree with the Stremio'} link={'Privacy Policy'} href={'https://www.stremio.com/privacy'} checked={this.state.privacyPolicyAccepted} onClick={this.togglePrivacyPolicy} />
|
||||
<ConsentCheckbox ref={this.marketingRef} className={styles['consent-checkbox']} label={'I agree to receive marketing communications from Stremio'} checked={this.state.marketingAccepted} onClick={this.toggleMarketing} />
|
||||
</Fragment>
|
||||
}
|
||||
{
|
||||
this.state.error.length > 0 ?
|
||||
<div ref={this.errorRef} className={styles['error']}>{this.state.error}</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
<Input className={styles['submit-button']} type={'button'} onClick={this.state.selectedForm === FORMS.LOGIN ? this.loginWithEmail : this.signup}>
|
||||
<div className={styles['label']}>{this.state.selectedForm === FORMS.LOGIN ? 'LOG IN' : 'SING UP'}</div>
|
||||
</Input>
|
||||
{
|
||||
this.state.selectedForm === FORMS.SIGN_UP ?
|
||||
<Input className={styles['guest-login-button']} type={'button'} onClick={this.loginAsGuest}>
|
||||
<div className={styles['label']}>GUEST LOGIN</div>
|
||||
</Input>
|
||||
:
|
||||
null
|
||||
}
|
||||
<Input className={styles['switch-form-button']} type={'button'} data-form={this.state.selectedForm === FORMS.SIGN_UP ? FORMS.LOGIN : FORMS.SIGN_UP} onClick={this.changeSelectedForm}>
|
||||
<div className={styles['label']}>{this.state.selectedForm === FORMS.SIGN_UP ? 'LOG IN' : 'SING UP WITH EMAIL'}</div>
|
||||
</Input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div >
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.intro-container {
|
||||
--login-form-width: 270px;
|
||||
--form-width: 270px;
|
||||
--spacing: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
z-index: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('/images/login_background.jpg');
|
||||
background-image: url('/images/intro_background.jpg');
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
|
||||
|
|
@ -24,44 +24,51 @@
|
|||
}
|
||||
|
||||
.scroll-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
.intro {
|
||||
.form-container {
|
||||
width: var(--form-width);
|
||||
margin: auto;
|
||||
padding: calc(var(--login-form-width) * 0.2) 0;
|
||||
width: var(--login-form-width);
|
||||
padding: 2% 0;
|
||||
|
||||
.facebook-button {
|
||||
width: var(--login-form-width);
|
||||
height: calc(var(--login-form-width) * 0.25);
|
||||
.facebook-button, .submit-button, .switch-form-button, .guest-login-button {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: var(--focusable-border-size) solid transparent;
|
||||
background: var(--color-secondarydark);
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
height: 1.7em;
|
||||
margin-right: var(--spacing);
|
||||
margin-right: 1em;
|
||||
fill: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 1.1em;
|
||||
font-size: 1em;
|
||||
font-weight: 600;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:focus, &:hover {
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--color-surfacelighter);
|
||||
}
|
||||
|
|
@ -71,118 +78,62 @@
|
|||
}
|
||||
}
|
||||
|
||||
.facebook-button {
|
||||
background: var(--color-secondarydark);
|
||||
|
||||
.label {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
&:before {
|
||||
padding-top: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
.facebook-statement {
|
||||
margin: calc(var(--spacing) * 0.5) 0 calc(var(--spacing) * 4) 0;
|
||||
display: block;
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
text-align: center;
|
||||
color: var(--color-surface);
|
||||
}
|
||||
|
||||
.form-container {
|
||||
width: var(--login-form-width);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
.text-input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: var(--spacing) 0;
|
||||
padding: 0.5em 0.2em;
|
||||
font-size: 1em;
|
||||
line-height: 1em;
|
||||
border-bottom: 1px solid var(--color-surface);
|
||||
color: var(--color-surfacelighter);
|
||||
|
||||
.text-input {
|
||||
margin: 0 calc(var(--spacing) * 0.5) var(--spacing) calc(var(--spacing) * 0.5);
|
||||
padding: 0.5em 0;
|
||||
border-bottom: 1px solid var(--color-surface);
|
||||
font-size: 1.1em;
|
||||
color: var(--color-surfacelighter);
|
||||
background: none;
|
||||
&::placeholder {
|
||||
color: var(--color-surfacelight);
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
border-bottom-color: var(--color-surfacelighter);
|
||||
|
||||
&::placeholder {
|
||||
color: var(--color-surfacelight);
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
border-bottom-color: var(--color-surfacelighter);
|
||||
|
||||
&::placeholder {
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.consent-checkbox {
|
||||
width: 100%;
|
||||
margin-bottom: var(--spacing);
|
||||
padding: calc(var(--spacing) * 0.5);
|
||||
border: var(--focusable-border-size) solid transparent;
|
||||
|
||||
&:focus-within {
|
||||
border-color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
align-self: flex-end;
|
||||
margin-bottom: var(--spacing);
|
||||
padding: calc(var(--spacing) * 0.5);
|
||||
border: var(--focusable-border-size) solid transparent;
|
||||
color: var(--color-surfacelight);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
margin-bottom: var(--spacing);
|
||||
text-align: center;
|
||||
color: var(--color-signal1);
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
width: 100%;
|
||||
padding: calc(var(--spacing) * 1.1);
|
||||
font-size: 1.1em;
|
||||
font-weight: 600;
|
||||
border: var(--focusable-border-size) solid transparent;
|
||||
color: var(--color-surfacelighter);
|
||||
background-color: var(--color-primarydark);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch-form-button, .guest-login-button {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
margin-top: var(--spacing);
|
||||
padding: calc(var(--spacing) * 0.5);
|
||||
text-align: center;
|
||||
font-size: 1.1em;
|
||||
font-weight: 600;
|
||||
.forgot-password-link {
|
||||
display: block;
|
||||
margin: var(--spacing) 0;
|
||||
padding: 0.5em;
|
||||
border: var(--focusable-border-size) solid transparent;
|
||||
color: var(--color-surfacelighter);
|
||||
color: var(--color-surfacelight);
|
||||
text-align: right;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--color-surfacelighter);
|
||||
}
|
||||
|
|
@ -191,6 +142,49 @@
|
|||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.consent-checkbox {
|
||||
margin: var(--spacing) 0;
|
||||
padding: 0.5em 0.2em;
|
||||
border: var(--focusable-border-size) solid transparent;
|
||||
|
||||
&:focus-within {
|
||||
border-color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
margin: var(--spacing) 0;
|
||||
padding: 0.5em 0.2em;
|
||||
text-align: center;
|
||||
color: var(--color-signal1);
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
background-color: var(--color-primarydark);
|
||||
|
||||
.label {
|
||||
font-size: 1.2em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&:before {
|
||||
padding-top: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
.switch-form-button, .guest-login-button {
|
||||
margin: var(--spacing) 0;
|
||||
padding: 0.8em 0.2em;
|
||||
|
||||
.label {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue