forked from acouzens/open5gs
update it
This commit is contained in:
Sukchan Lee
parent
001138dc7a
commit
33a4c1d5af
|
|
@ -10,12 +10,12 @@ import ThumbnailIcon from './Thumbnail';
|
|||
import Session from '../lib/session';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
height: 4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 2;
|
||||
|
||||
font-size: 1.5rem;
|
||||
line-height: 4rem;
|
||||
|
||||
background: ${oc.indigo[6]};
|
||||
color: white;
|
||||
|
|
@ -31,12 +31,16 @@ const Menu = styled.div`
|
|||
|
||||
const Title = styled.div`
|
||||
padding-left: 1.5rem;
|
||||
padding-top: 0.2rem;
|
||||
|
||||
font-weight: 500;
|
||||
`;
|
||||
|
||||
const Thumbnail = styled.div`
|
||||
display: flext;
|
||||
justify-content: center;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@ import Head from 'next/head';
|
|||
import Router from 'next/router';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import NProgress from 'nprogress';
|
||||
|
||||
import styled from 'styled-components';
|
||||
import oc from 'open-color';
|
||||
import { media, transitions} from '../lib/style-utils';
|
||||
|
|
@ -109,6 +111,7 @@ const Input = styled.input`
|
|||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
|
||||
transition: all .25s;
|
||||
&:focus {
|
||||
border: 1px solid ${oc.blue[7]};
|
||||
}
|
||||
|
|
@ -137,11 +140,12 @@ const Button = styled.button`
|
|||
background: ${props => oc[props.color][7]};
|
||||
border: 1px solid ${props => oc[props.color][10]};
|
||||
|
||||
transition: all .3s;
|
||||
&:hover {
|
||||
background: ${props => oc[props.color][6]};
|
||||
}
|
||||
|
||||
&:focus {
|
||||
&:active {
|
||||
background: ${props => oc[props.color][8]};
|
||||
border: 1px solid ${oc.blue[7]};
|
||||
}
|
||||
|
|
@ -193,20 +197,27 @@ class Login extends Component {
|
|||
password
|
||||
} = this.state.account;
|
||||
|
||||
NProgress.configure({ showSpinner: false });
|
||||
NProgress.start();
|
||||
|
||||
const session = new Session()
|
||||
session.signin(username, password)
|
||||
.then(() => {
|
||||
NProgress.done();
|
||||
|
||||
Router.push('/');
|
||||
})
|
||||
.catch(err => {
|
||||
NProgress.done();
|
||||
|
||||
this.input.focus();
|
||||
|
||||
this.setState({
|
||||
error: {
|
||||
status: true,
|
||||
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",
|
||||
"lusca": "^1.4.1",
|
||||
"next": "^2.3.1",
|
||||
"nprogress": "^0.2.0",
|
||||
"open-color": "^1.5.1",
|
||||
"passport": "^0.3.2",
|
||||
"passport-local": "^1.0.0",
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ export default class MyDocument extends Document {
|
|||
<meta name="description" content={description} />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/static/index.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/static/nprogress.css" />
|
||||
{styleTags}
|
||||
</Head>
|
||||
<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"
|
||||
|
||||
caniuse-db@^1.0.30000639:
|
||||
version "1.0.30000674"
|
||||
resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000674.tgz#d78e99a3291341f53830e96ad2f12921b9715e8d"
|
||||
version "1.0.30000676"
|
||||
resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000676.tgz#82ea578237637c8ff34a28acaade373b624c4ea8"
|
||||
|
||||
case-sensitive-paths-webpack-plugin@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"
|
||||
|
||||
is-dotfile@^1.0.0:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.2.tgz#2c132383f39199f8edc268ca01b9b007d205cc4d"
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.3.tgz#a6a2f32ffd2dfb04f5ca25ecd0f6b83cf798a1e1"
|
||||
|
||||
is-equal-shallow@^0.1.3:
|
||||
version "0.1.3"
|
||||
|
|
@ -2139,8 +2139,8 @@ is-path-inside@^1.0.0:
|
|||
path-is-inside "^1.0.1"
|
||||
|
||||
is-plain-object@^2.0.1:
|
||||
version "2.0.2"
|
||||
resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.2.tgz#1d9ab795669937de31998071ca1f701770b375a4"
|
||||
version "2.0.3"
|
||||
resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.3.tgz#c15bf3e4b66b62d72efaf2925848663ecbc619b6"
|
||||
dependencies:
|
||||
isobject "^3.0.0"
|
||||
|
||||
|
|
@ -2605,8 +2605,8 @@ node-libs-browser@^2.0.0:
|
|||
vm-browserify "0.0.4"
|
||||
|
||||
node-pre-gyp@^0.6.29, node-pre-gyp@~0.6.31:
|
||||
version "0.6.34"
|
||||
resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.34.tgz#94ad1c798a11d7fc67381b50d47f8cc18d9799f7"
|
||||
version "0.6.36"
|
||||
resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.36.tgz#db604112cb74e0d477554e9b505b17abddfab786"
|
||||
dependencies:
|
||||
mkdirp "^0.5.1"
|
||||
nopt "^4.0.1"
|
||||
|
|
@ -2655,6 +2655,10 @@ npmlog@^4.0.2:
|
|||
gauge "~2.7.3"
|
||||
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:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
|
||||
|
|
|
|||
Loading…
Reference in New Issue