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

login button for redirect when no user

Browse source
This commit is contained in:
svetlagasheva 2019-11-19 17:41:20 +02:00
parent 7c421d2d6e
commit fb0ec7583a
2 changed files with 57 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/routes/Library/Library.js
View file

@ -1,5 +1,6 @@
const React = require('react');
const { Multiselect, MainNavBar, MetaItem } = require('stremio/common');
const classnames = require('classnames');
const { Button, Multiselect, MainNavBar, MetaItem } = require('stremio/common');
const useUser = require('stremio/common/useUser');
const useLibrary = require('./useLibrary');
const useSort = require('./useSort');
@ -9,22 +10,30 @@ const Library = ({ urlParams, queryParams }) => {
const user = useUser();
const [metaItems, selectTypeInput, error] = useLibrary(urlParams);
const [selectSortInput, sortFunction] = useSort(urlParams, queryParams);
const loginButtonOnClick = React.useCallback(() => {
window.location.replace('#/intro');
}, []);
return (
<div className={styles['library-container']}>
<MainNavBar className={styles['nav-bar']} />
<div className={styles['library-content']}>
<div className={styles['controls-container']}>
<Multiselect {...selectTypeInput} className={styles['select-input-container']} />
<Multiselect {...selectSortInput} className={styles['select-input-container']} />
</div>
{
user ?
<div className={styles['controls-container']}>
<Multiselect {...selectTypeInput} className={styles['select-input-container']} />
<Multiselect {...selectSortInput} className={styles['select-input-container']} />
</div>
:
null
}
<div className={styles['type-content-container']}>
{
!user ?
<div className={styles['message-container']}>
<div className={classnames(styles['message-container'], styles['anonymous-user-message-container'])}>
Please log into this app
{
window.location.replace('#/intro')
}
<Button className={styles['login-button']} onClick={loginButtonOnClick}>
<div className={styles['label']}>LOG IN</div>
</Button>
</div>
:
error !== null ?

39
src/routes/Library/styles.less
View file

@ -59,6 +59,45 @@
font-size: 2rem;
color: var(--color-surfacelighter);
}
.anonymous-user-message-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
.login-button {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 20rem;
min-height: 4rem;
margin-top: 2rem;
padding: 0.5rem 1rem;
background-color: var(--color-primarydark);
.label {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
font-size: 1.1rem;
font-weight: 700;
color: var(--color-surfacelighter);
text-align: center;
}
&:hover {
background-color: var(--color-primary);
}
.label {
font-size: 1.2rem;
}
}
}
}
}
}