update it
This commit is contained in:
parent
001138dc7a
commit
33a4c1d5af
|
@ -10,12 +10,12 @@ import ThumbnailIcon from './Thumbnail';
|
||||||
import Session from '../lib/session';
|
import Session from '../lib/session';
|
||||||
|
|
||||||
const Wrapper = styled.div`
|
const Wrapper = styled.div`
|
||||||
height: 4rem;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
|
line-height: 4rem;
|
||||||
|
|
||||||
background: ${oc.indigo[6]};
|
background: ${oc.indigo[6]};
|
||||||
color: white;
|
color: white;
|
||||||
|
@ -31,12 +31,16 @@ const Menu = styled.div`
|
||||||
|
|
||||||
const Title = styled.div`
|
const Title = styled.div`
|
||||||
padding-left: 1.5rem;
|
padding-left: 1.5rem;
|
||||||
padding-top: 0.2rem;
|
|
||||||
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Thumbnail = styled.div`
|
const Thumbnail = styled.div`
|
||||||
|
display: flext;
|
||||||
|
justify-content: center;
|
||||||
|
padding-top: 1rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 1rem;
|
right: 1rem;
|
||||||
`;
|
`;
|
||||||
|
|
|
@ -6,6 +6,8 @@ import Head from 'next/head';
|
||||||
import Router from 'next/router';
|
import Router from 'next/router';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
|
import NProgress from 'nprogress';
|
||||||
|
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import oc from 'open-color';
|
import oc from 'open-color';
|
||||||
import { media, transitions} from '../lib/style-utils';
|
import { media, transitions} from '../lib/style-utils';
|
||||||
|
@ -109,6 +111,7 @@ const Input = styled.input`
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
|
|
||||||
|
transition: all .25s;
|
||||||
&:focus {
|
&:focus {
|
||||||
border: 1px solid ${oc.blue[7]};
|
border: 1px solid ${oc.blue[7]};
|
||||||
}
|
}
|
||||||
|
@ -137,11 +140,12 @@ const Button = styled.button`
|
||||||
background: ${props => oc[props.color][7]};
|
background: ${props => oc[props.color][7]};
|
||||||
border: 1px solid ${props => oc[props.color][10]};
|
border: 1px solid ${props => oc[props.color][10]};
|
||||||
|
|
||||||
|
transition: all .3s;
|
||||||
&:hover {
|
&:hover {
|
||||||
background: ${props => oc[props.color][6]};
|
background: ${props => oc[props.color][6]};
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:active {
|
||||||
background: ${props => oc[props.color][8]};
|
background: ${props => oc[props.color][8]};
|
||||||
border: 1px solid ${oc.blue[7]};
|
border: 1px solid ${oc.blue[7]};
|
||||||
}
|
}
|
||||||
|
@ -193,20 +197,27 @@ class Login extends Component {
|
||||||
password
|
password
|
||||||
} = this.state.account;
|
} = this.state.account;
|
||||||
|
|
||||||
|
NProgress.configure({ showSpinner: false });
|
||||||
|
NProgress.start();
|
||||||
|
|
||||||
const session = new Session()
|
const session = new Session()
|
||||||
session.signin(username, password)
|
session.signin(username, password)
|
||||||
.then(() => {
|
.then(() => {
|
||||||
|
NProgress.done();
|
||||||
|
|
||||||
Router.push('/');
|
Router.push('/');
|
||||||
})
|
})
|
||||||
.catch(err => {
|
.catch(err => {
|
||||||
|
NProgress.done();
|
||||||
|
|
||||||
|
this.input.focus();
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
error: {
|
error: {
|
||||||
status: true,
|
status: true,
|
||||||
message: err.message
|
message: err.message
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
// @FIXME Handle error
|
|
||||||
console.log(err)
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,26 +0,0 @@
|
||||||
/* global window */
|
|
||||||
import React from 'react'
|
|
||||||
import Session from '../lib/session'
|
|
||||||
|
|
||||||
async function logout (event) {
|
|
||||||
event.preventDefault()
|
|
||||||
|
|
||||||
const session = new Session()
|
|
||||||
await session.signout()
|
|
||||||
|
|
||||||
// @FIXME next/router not working reliably so using window.location
|
|
||||||
window.location = '/'
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ({ session, children }) => {
|
|
||||||
if (!session || !session.user) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<form id='signout' method='post' action='/api/auth/signout' onSubmit={logout}>
|
|
||||||
<input name='_csrf' type='hidden' value={session.csrfToken} />
|
|
||||||
<button type='submit'>{children}</button>
|
|
||||||
</form>
|
|
||||||
)
|
|
||||||
}
|
|
|
@ -16,6 +16,7 @@
|
||||||
"express-session": "^1.15.2",
|
"express-session": "^1.15.2",
|
||||||
"lusca": "^1.4.1",
|
"lusca": "^1.4.1",
|
||||||
"next": "^2.3.1",
|
"next": "^2.3.1",
|
||||||
|
"nprogress": "^0.2.0",
|
||||||
"open-color": "^1.5.1",
|
"open-color": "^1.5.1",
|
||||||
"passport": "^0.3.2",
|
"passport": "^0.3.2",
|
||||||
"passport-local": "^1.0.0",
|
"passport-local": "^1.0.0",
|
||||||
|
|
|
@ -23,6 +23,7 @@ export default class MyDocument extends Document {
|
||||||
<meta name="description" content={description} />
|
<meta name="description" content={description} />
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="/static/index.css" />
|
<link rel="stylesheet" type="text/css" href="/static/index.css" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="/static/nprogress.css" />
|
||||||
{styleTags}
|
{styleTags}
|
||||||
</Head>
|
</Head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
@ -1,23 +0,0 @@
|
||||||
import Link from 'next/prefetch'
|
|
||||||
import React from 'react'
|
|
||||||
import withSession from '../lib/with-session'
|
|
||||||
import LogoutButton from '../components/logout-button'
|
|
||||||
|
|
||||||
const About = ({ session, isLoggedIn }) => {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<h1>Welcome to the Next.js auth example</h1>
|
|
||||||
{!isLoggedIn && <p><Link href='/login'><a>Login</a></Link></p>}
|
|
||||||
{isLoggedIn && (
|
|
||||||
<div>
|
|
||||||
<p>Welcome back {session.user.username}</p>
|
|
||||||
<LogoutButton session={session}>Log out</LogoutButton>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<p><Link href='/secret'><a>Restricted page</a></Link></p>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// withSession can only be used on top level components (routes inside the pages directory)
|
|
||||||
export default withSession(About)
|
|
|
@ -0,0 +1,74 @@
|
||||||
|
/* Make clicks pass-through */
|
||||||
|
#nprogress {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nprogress .bar {
|
||||||
|
background: #29d;
|
||||||
|
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1031;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fancy blur effect */
|
||||||
|
#nprogress .peg {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
right: 0px;
|
||||||
|
width: 100px;
|
||||||
|
height: 100%;
|
||||||
|
box-shadow: 0 0 10px #29d, 0 0 5px #29d;
|
||||||
|
opacity: 1.0;
|
||||||
|
|
||||||
|
-webkit-transform: rotate(3deg) translate(0px, -4px);
|
||||||
|
-ms-transform: rotate(3deg) translate(0px, -4px);
|
||||||
|
transform: rotate(3deg) translate(0px, -4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove these to get rid of the spinner */
|
||||||
|
#nprogress .spinner {
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1031;
|
||||||
|
top: 15px;
|
||||||
|
right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nprogress .spinner-icon {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
border: solid 2px transparent;
|
||||||
|
border-top-color: #29d;
|
||||||
|
border-left-color: #29d;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
-webkit-animation: nprogress-spinner 400ms linear infinite;
|
||||||
|
animation: nprogress-spinner 400ms linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nprogress-custom-parent {
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nprogress-custom-parent #nprogress .spinner,
|
||||||
|
.nprogress-custom-parent #nprogress .bar {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes nprogress-spinner {
|
||||||
|
0% { -webkit-transform: rotate(0deg); }
|
||||||
|
100% { -webkit-transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
@keyframes nprogress-spinner {
|
||||||
|
0% { transform: rotate(0deg); }
|
||||||
|
100% { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
|
@ -1116,8 +1116,8 @@ camelcase@^3.0.0:
|
||||||
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
|
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
|
||||||
|
|
||||||
caniuse-db@^1.0.30000639:
|
caniuse-db@^1.0.30000639:
|
||||||
version "1.0.30000674"
|
version "1.0.30000676"
|
||||||
resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000674.tgz#d78e99a3291341f53830e96ad2f12921b9715e8d"
|
resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000676.tgz#82ea578237637c8ff34a28acaade373b624c4ea8"
|
||||||
|
|
||||||
case-sensitive-paths-webpack-plugin@2.0.0:
|
case-sensitive-paths-webpack-plugin@2.0.0:
|
||||||
version "2.0.0"
|
version "2.0.0"
|
||||||
|
@ -2077,8 +2077,8 @@ is-date-object@^1.0.1:
|
||||||
resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16"
|
resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16"
|
||||||
|
|
||||||
is-dotfile@^1.0.0:
|
is-dotfile@^1.0.0:
|
||||||
version "1.0.2"
|
version "1.0.3"
|
||||||
resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.2.tgz#2c132383f39199f8edc268ca01b9b007d205cc4d"
|
resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.3.tgz#a6a2f32ffd2dfb04f5ca25ecd0f6b83cf798a1e1"
|
||||||
|
|
||||||
is-equal-shallow@^0.1.3:
|
is-equal-shallow@^0.1.3:
|
||||||
version "0.1.3"
|
version "0.1.3"
|
||||||
|
@ -2139,8 +2139,8 @@ is-path-inside@^1.0.0:
|
||||||
path-is-inside "^1.0.1"
|
path-is-inside "^1.0.1"
|
||||||
|
|
||||||
is-plain-object@^2.0.1:
|
is-plain-object@^2.0.1:
|
||||||
version "2.0.2"
|
version "2.0.3"
|
||||||
resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.2.tgz#1d9ab795669937de31998071ca1f701770b375a4"
|
resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.3.tgz#c15bf3e4b66b62d72efaf2925848663ecbc619b6"
|
||||||
dependencies:
|
dependencies:
|
||||||
isobject "^3.0.0"
|
isobject "^3.0.0"
|
||||||
|
|
||||||
|
@ -2605,8 +2605,8 @@ node-libs-browser@^2.0.0:
|
||||||
vm-browserify "0.0.4"
|
vm-browserify "0.0.4"
|
||||||
|
|
||||||
node-pre-gyp@^0.6.29, node-pre-gyp@~0.6.31:
|
node-pre-gyp@^0.6.29, node-pre-gyp@~0.6.31:
|
||||||
version "0.6.34"
|
version "0.6.36"
|
||||||
resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.34.tgz#94ad1c798a11d7fc67381b50d47f8cc18d9799f7"
|
resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.36.tgz#db604112cb74e0d477554e9b505b17abddfab786"
|
||||||
dependencies:
|
dependencies:
|
||||||
mkdirp "^0.5.1"
|
mkdirp "^0.5.1"
|
||||||
nopt "^4.0.1"
|
nopt "^4.0.1"
|
||||||
|
@ -2655,6 +2655,10 @@ npmlog@^4.0.2:
|
||||||
gauge "~2.7.3"
|
gauge "~2.7.3"
|
||||||
set-blocking "~2.0.0"
|
set-blocking "~2.0.0"
|
||||||
|
|
||||||
|
nprogress@^0.2.0:
|
||||||
|
version "0.2.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
|
||||||
|
|
||||||
number-is-nan@^1.0.0:
|
number-is-nan@^1.0.0:
|
||||||
version "1.0.1"
|
version "1.0.1"
|
||||||
resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
|
resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
|
||||||
|
|
Loading…
Reference in New Issue