Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Intro screen ui finalized

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-07-22 22:41:17 +03:00
parent 2b8819c04b
commit 103a5ea296
3 changed files with 22 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/routes/Intro/ConsentCheckbox/ConsentCheckbox.js
View file

@ -2,7 +2,7 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { Input } = require('stremio-navigation');
const { Checkbox } = require('stremio-common');
const { Checkbox } = require('stremio/common');
const styles = require('./styles');
const ConsentCheckbox = React.forwardRef(({ className, checked, label, link, href, toggle }, ref) => {

35
src/routes/Intro/Intro.js
View file

@ -76,8 +76,7 @@ class Intro extends React.Component {
this.setState({ email: event.currentTarget.value });
}
emailOnSubmit = (event) => {
event.preventDefault();
emailOnSubmit = () => {
this.passwordRef.current.focus();
}
@ -85,8 +84,7 @@ class Intro extends React.Component {
this.setState({ password: event.currentTarget.value });
}
passwordOnSubmit = (event) => {
event.preventDefault();
passwordOnSubmit = () => {
if (this.state.selectedForm === FORMS.LOGIN) {
this.loginWithEmail();
} else {
@ -98,8 +96,7 @@ class Intro extends React.Component {
this.setState({ confirmPassword: event.currentTarget.value });
}
confirmPasswordOnSubmit = (event) => {
event.preventDefault();
confirmPasswordOnSubmit = () => {
this.termsRef.current.focus();
}
@ -122,12 +119,12 @@ class Intro extends React.Component {
}
loginWithFacebook = () => {
alert('Facebook login');
alert('TODO: Facebook login');
}
loginWithEmail = () => {
if (this.state.email.length < 8) {
this.setState({ error: 'Please enter a valid email' });
if (this.state.email.length === 0) {
this.setState({ error: 'Invalid email' });
return;
}
@ -137,12 +134,12 @@ class Intro extends React.Component {
}
this.setState({ error: '' });
alert('Email login');
alert('TODO: Email login');
}
signup = () => {
if (this.state.email.length < 8) {
this.setState({ error: 'Please enter a valid email' });
if (this.state.email.length === 0) {
this.setState({ error: 'Invalid email' });
return;
}
@ -167,7 +164,7 @@ class Intro extends React.Component {
}
this.setState({ error: '' });
alert('Signup');
alert('TODO: Signup');
}
loginAsGuest = () => {
@ -177,16 +174,16 @@ class Intro extends React.Component {
}
this.setState({ error: '' });
alert('Guest login');
alert('TODO: Guest login');
}
render() {
return (
<div className={styles['intro-container']} tabIndex={-1}>
<div className={styles['form-container']}>
<Input className={classnames(styles['login-form-button'], styles['facebook-button'], 'focusable-with-border')} type={'button'} onClick={this.loginWithFacebook}>
<Input className={classnames(styles['form-button'], styles['facebook-button'], 'focusable-with-border')} type={'button'} onClick={this.loginWithFacebook}>
<Icon className={styles['icon']} icon={'ic_facebook'} />
<div className={styles['label']}>Login with Facebook</div>
<div className={styles['label']}>Continue with Facebook</div>
</Input>
<div className={styles['facebook-statement']}>We won't post anything on your behalf</div>
<Input
@ -256,18 +253,18 @@ class Intro extends React.Component {
:
null
}
<Input className={classnames(styles['login-form-button'], styles['submit-button'], 'focusable-with-border')} type={'button'} onClick={this.state.selectedForm === FORMS.LOGIN ? this.loginWithEmail : this.signup}>
<Input className={classnames(styles['form-button'], styles['submit-button'], 'focusable-with-border')} 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={classnames(styles['login-form-button'], styles['guest-login-button'], 'focusable-with-border')} type={'button'} onClick={this.loginAsGuest}>
<Input className={classnames(styles['form-button'], styles['guest-login-button'], 'focusable-with-border')} type={'button'} onClick={this.loginAsGuest}>
<div className={styles['label']}>GUEST LOGIN</div>
</Input>
:
null
}
<Input className={classnames(styles['login-form-button'], styles['switch-form-button'], 'focusable-with-border')} type={'button'} data-form={this.state.selectedForm === FORMS.SIGN_UP ? FORMS.LOGIN : FORMS.SIGN_UP} onClick={this.changeSelectedForm}>
<Input className={classnames(styles['form-button'], styles['switch-form-button'], 'focusable-with-border')} 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>

8
src/routes/Intro/styles.less
View file

@ -24,7 +24,7 @@
margin: auto;
padding: 4em 0;
.login-form-button {
.form-button {
width: 100%;
padding: 0 1em;
display: flex;
@ -74,6 +74,7 @@
width: 100%;
margin-top: 0.5em;
margin-bottom: 2em;
line-height: 1.1em;
text-align: center;
color: var(--color-surface);
}
@ -102,11 +103,12 @@
.forgot-password-link-container {
margin: 1em 0;
display: flex;
flex-direction: row;
justify-content: flex-end;
text-align: right;
.forgot-password-link {
display: inline-block;
max-width: 100%;
padding: 0.5em 0.3em;
color: var(--color-surfacelight);
cursor: pointer;