mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-04-13 20:31:48 +00:00
intro screen implemented
This commit is contained in:
svetlagasheva
parent
496531e630
commit
bcdbd14344
5 changed files with 299 additions and 2 deletions
|
|
@ -1,4 +1,4 @@
|
|||
import { Calendar, Discover, Addons, Settings, Board, Player } from 'stremio-routes';
|
||||
import { Calendar, Discover, Addons, Settings, Board, Player, Intro } from 'stremio-routes';
|
||||
|
||||
const config = {
|
||||
views: [
|
||||
|
|
@ -8,6 +8,10 @@ const config = {
|
|||
path: '/',
|
||||
component: Board
|
||||
},
|
||||
{
|
||||
path: '/intro',
|
||||
component: Intro
|
||||
},
|
||||
{
|
||||
path: '/calendar',
|
||||
component: Calendar
|
||||
|
|
|
|||
132
src/routes/Intro/Intro.js
Normal file
132
src/routes/Intro/Intro.js
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
import React, { Component } from 'react';
|
||||
import Icon from 'stremio-icons/dom';
|
||||
import { Checkbox } from 'stremio-common';
|
||||
import styles from './styles';
|
||||
|
||||
class Intro extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
selectedOption: 'signUp',
|
||||
termsAccepted: false,
|
||||
privacyPolicyAccepted: false,
|
||||
communicationsAccepted: false
|
||||
};
|
||||
}
|
||||
|
||||
changeSelectedOption = (event) => {
|
||||
this.setState({ selectedOption: event.currentTarget.dataset.option });
|
||||
}
|
||||
|
||||
toggleTerms = () => {
|
||||
this.setState(({ termsAccepted }) => {
|
||||
return { termsAccepted: !termsAccepted }
|
||||
});
|
||||
}
|
||||
|
||||
togglePrivacyPolicy = () => {
|
||||
this.setState(({ privacyPolicyAccepted }) => {
|
||||
return { privacyPolicyAccepted: !privacyPolicyAccepted }
|
||||
});
|
||||
}
|
||||
|
||||
toggleCommunications = () => {
|
||||
this.setState(({ communicationsAccepted }) => {
|
||||
return { communicationsAccepted: !communicationsAccepted }
|
||||
});
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps, nextState) {
|
||||
return nextState.selectedOption !== this.state.selectedOption ||
|
||||
nextState.termsAccepted !== this.state.termsAccepted ||
|
||||
nextState.privacyPolicyAccepted !== this.state.privacyPolicyAccepted ||
|
||||
nextState.communicationsAccepted !== this.state.communicationsAccepted;
|
||||
}
|
||||
|
||||
renderAcceptanceOption({ label, href, checked, onClick }) {
|
||||
return (
|
||||
<label className={styles['toggle-option']}>
|
||||
<Checkbox className={styles['checkbox-size']} checked={checked} disabled={false} onClick={onClick} />
|
||||
<div className={styles['accept']}>I accept the
|
||||
<span> </span>
|
||||
<a href={href} target={'_blank'} className={styles['acceptance-label']}>{label}</a>
|
||||
</div>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
renderErrorLabel = () => {
|
||||
return (
|
||||
<div className={styles['error-label']}></div>
|
||||
);
|
||||
}
|
||||
|
||||
renderSignUpForm = () => {
|
||||
return (
|
||||
<div className={styles['login-form']}>
|
||||
<div className={styles['fb-button']}>
|
||||
<Icon className={styles['icon']} icon={'ic_facebook'} />
|
||||
<div className={styles['label']}>Login with Facebook</div>
|
||||
</div>
|
||||
<div className={styles['text']}>We won't post anything on your behalf</div>
|
||||
<div className={styles['or']}>OR</div>
|
||||
<input className={styles['email']} type={'text'} placeholder={'Email'} />
|
||||
<input className={styles['password']} type={'text'} placeholder={'Password'} />
|
||||
<input className={styles['password']} type={'text'} placeholder={'Confirm Password'} />
|
||||
<div className={styles['acceptance-section']}>
|
||||
{this.renderAcceptanceOption({ label: 'Terms and conditions', href: 'https://www.stremio.com/tos', checked: this.state.termsAccepted, onClick: this.toggleTerms })}
|
||||
{this.renderAcceptanceOption({ label: 'Privacy Policy', href: 'https://www.stremio.com/privacy', checked: this.state.privacyPolicyAccepted, onClick: this.togglePrivacyPolicy })}
|
||||
{this.renderAcceptanceOption({ label: 'to receive marketing communications from Stremio', href: 'https://www.stremio.com/privacy', checked: this.state.communicationsAccepted, onClick: this.toggleCommunications })}
|
||||
</div>
|
||||
<div className={styles['login-button']}>
|
||||
<div className={styles['label']}>SIGN UP</div>
|
||||
</div>
|
||||
<div className={styles['option']} data-option={'login'} onClick={this.changeSelectedOption}>LOG IN</div>
|
||||
<div className={styles['option']}>GUEST LOGIN</div>
|
||||
{/* <a href={this.state.termsAccepted ? '#/' : null} className={styles['option']}>GUEST LOGIN</a> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderLoginForm = () => {
|
||||
return (
|
||||
<div className={styles['login-form']}>
|
||||
<div className={styles['fb-button']}>
|
||||
<Icon className={styles['icon']} icon={'ic_facebook'} />
|
||||
<div className={styles['label']}>Login with Facebook</div>
|
||||
</div>
|
||||
<div className={styles['text']}>We won't post anything on your behalf</div>
|
||||
<div className={styles['or']}>OR</div>
|
||||
<input className={styles['email']} type={'text'} placeholder={'Email'} />
|
||||
<input className={styles['password']} type={'text'} placeholder={'Password'} />
|
||||
<div className={styles['login-button']}>
|
||||
<div className={styles['label']}>LOG IN</div>
|
||||
</div>
|
||||
<div className={styles['option']} data-option={'signUp'} onClick={this.changeSelectedOption}>SING UP WITH EMAIL</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderSelectedMenu = () => {
|
||||
switch (this.state.selectedOption) {
|
||||
case 'signUp':
|
||||
return this.renderSignUpForm();
|
||||
case 'login':
|
||||
return this.renderLoginForm();
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className={styles['intro-container']}>
|
||||
<div className={styles['overlay']} />
|
||||
{this.renderSelectedMenu()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Intro;
|
||||
3
src/routes/Intro/index.js
Normal file
3
src/routes/Intro/index.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
import Intro from './Intro';
|
||||
|
||||
export default Intro;
|
||||
156
src/routes/Intro/styles.less
Normal file
156
src/routes/Intro/styles.less
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
.intro-container {
|
||||
--login-form-width: 270px;
|
||||
--spacing: 16px;
|
||||
}
|
||||
|
||||
.intro-container {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('https://www.stremio.com/website/home-testimonials.jpg');
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--color-backgrounddark80);
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: var(--login-form-width);
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
margin: auto;
|
||||
|
||||
.fb-button {
|
||||
width: var(--login-form-width);
|
||||
height: 68px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
padding: 20px 0;
|
||||
background: var(--color-secondarydark);
|
||||
|
||||
.icon {
|
||||
height: 100%;
|
||||
margin-right: 16px;
|
||||
fill: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 15px;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
margin: calc(var(--spacing) * 0.5) 0;
|
||||
font-size: 14px;
|
||||
color: var(--color-surface);
|
||||
}
|
||||
|
||||
.or {
|
||||
margin: calc(var(--spacing) * 3) 0 var(--spacing) 0;
|
||||
font-size: 18px;
|
||||
color: var(--color-surface);
|
||||
}
|
||||
|
||||
.email {
|
||||
width: var(--login-form-width);
|
||||
margin-bottom: var(--spacing);
|
||||
padding: calc(var(--spacing) * 0.5) 0;
|
||||
border-bottom: 1px solid var(--color-surface);
|
||||
font-size: 15px;
|
||||
color: var(--color-surfacelighter);
|
||||
outline: none;
|
||||
background: none;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--color-secondarylighter);
|
||||
}
|
||||
}
|
||||
|
||||
.password {
|
||||
width: var(--login-form-width);
|
||||
margin-bottom: var(--spacing);
|
||||
padding: calc(var(--spacing) * 0.5) 0;
|
||||
border-bottom: 1px solid var(--color-surface);
|
||||
font-size: 15px;
|
||||
color: var(--color-surfacelighter);
|
||||
outline: none;
|
||||
background: none;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--color-secondarylighter);
|
||||
}
|
||||
}
|
||||
|
||||
.acceptance-section {
|
||||
width: var(--login-form-width);
|
||||
|
||||
.toggle-option {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: var(--spacing);
|
||||
|
||||
.checkbox-size {
|
||||
width: var(--spacing);
|
||||
height: var(--spacing);
|
||||
margin-right: calc(var(--spacing) * 0.5);
|
||||
fill: var(--color-surface);
|
||||
}
|
||||
|
||||
.accept {
|
||||
font-size: 14px;
|
||||
color: var(--color-surface);
|
||||
}
|
||||
|
||||
.acceptance-label {
|
||||
font-size: 14px;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-button {
|
||||
width: var(--login-form-width);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
padding: 18px;
|
||||
background: var(--color-primary);
|
||||
|
||||
.label {
|
||||
font-weight: 600;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
|
||||
.option {
|
||||
margin-top: calc(var(--spacing) * 3);
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
color: var(--color-surfacelighter);
|
||||
|
||||
// &:last-child {
|
||||
// margin-top: var(--spacing);
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -8,6 +8,7 @@ import Search from './Search';
|
|||
import Settings from './Settings';
|
||||
import Player from './Player';
|
||||
import Detail from './Detail';
|
||||
import Intro from './Intro';
|
||||
|
||||
export {
|
||||
Addons,
|
||||
|
|
@ -19,5 +20,6 @@ export {
|
|||
Search,
|
||||
Settings,
|
||||
Player,
|
||||
Detail
|
||||
Detail,
|
||||
Intro
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue