From 33a4c1d5afe49a21f830d5fc4c8dda391d126fa4 Mon Sep 17 00:00:00 2001 From: Sukchan Lee Date: Wed, 31 May 2017 10:54:42 +0900 Subject: [PATCH] update it --- webui/components/Header.js | 8 +++- webui/components/Login.js | 17 +++++-- webui/components/logout-button.js | 26 ----------- webui/package.json | 1 + webui/pages/_document.js | 1 + webui/pages/about.js | 23 ---------- webui/static/nprogress.css | 74 +++++++++++++++++++++++++++++++ webui/yarn.lock | 20 +++++---- 8 files changed, 108 insertions(+), 62 deletions(-) delete mode 100644 webui/components/logout-button.js delete mode 100644 webui/pages/about.js create mode 100644 webui/static/nprogress.css diff --git a/webui/components/Header.js b/webui/components/Header.js index 63125dfa99..2a29a9c238 100644 --- a/webui/components/Header.js +++ b/webui/components/Header.js @@ -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; `; diff --git a/webui/components/Login.js b/webui/components/Login.js index e453bad147..2b12132861 100644 --- a/webui/components/Login.js +++ b/webui/components/Login.js @@ -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) }) } diff --git a/webui/components/logout-button.js b/webui/components/logout-button.js deleted file mode 100644 index 68ffda081f..0000000000 --- a/webui/components/logout-button.js +++ /dev/null @@ -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 ( -
- - -
- ) -} \ No newline at end of file diff --git a/webui/package.json b/webui/package.json index 91eef46ef2..c17f74ef81 100644 --- a/webui/package.json +++ b/webui/package.json @@ -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", diff --git a/webui/pages/_document.js b/webui/pages/_document.js index 30adf99149..7e84a12a11 100644 --- a/webui/pages/_document.js +++ b/webui/pages/_document.js @@ -23,6 +23,7 @@ export default class MyDocument extends Document { + {styleTags} diff --git a/webui/pages/about.js b/webui/pages/about.js deleted file mode 100644 index eba8e53dc3..0000000000 --- a/webui/pages/about.js +++ /dev/null @@ -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 ( -
-

Welcome to the Next.js auth example

- {!isLoggedIn &&

Login

} - {isLoggedIn && ( -
-

Welcome back {session.user.username}

- Log out -
- )} -

Restricted page

-
- ) -} - -// withSession can only be used on top level components (routes inside the pages directory) -export default withSession(About) \ No newline at end of file diff --git a/webui/static/nprogress.css b/webui/static/nprogress.css new file mode 100644 index 0000000000..6752d7f4b8 --- /dev/null +++ b/webui/static/nprogress.css @@ -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); } +} + diff --git a/webui/yarn.lock b/webui/yarn.lock index c76572d3fe..fa6bde88f4 100644 --- a/webui/yarn.lock +++ b/webui/yarn.lock @@ -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"