Demo
/
hapi-demo
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

modify login

dev
npmrun 2 years ago
parent
3953a57fa4
commit
02a648d4ff
7 changed files with 480 additions and 288 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      pnpm-lock.yaml
  2. 252
      public/css/page/login copy.css
  3. 398
      public/css/page/login.css
  4. 4
      route.txt
  5. 6
      source/plugins/index.ts
  6. 56
      template/views/login copy.pug
  7. 50
      template/views/login.pug

2
pnpm-lock.yaml
View File

@ -2,7 +2,7 @@ lockfileVersion: 5.4
specifiers: specifiers:
'@hapi/code': ^9.0.1 '@hapi/code': ^9.0.1
'@hapi/cookie': 11.0.2 '@hapi/cookie': ^11.0.2
'@hapi/crumb': ^8.0.1 '@hapi/crumb': ^8.0.1
'@hapi/hapi': ^20.1.2 '@hapi/hapi': ^20.1.2
'@hapi/hoek': ^10.0.0 '@hapi/hoek': ^10.0.0

252
public/css/page/login copy.css
View File

@ -0,0 +1,252 @@
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
* {
box-sizing: border-box;
}
body {
background: #f6f5f7;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: 'Montserrat', sans-serif;
height: 100vh;
/* margin: -20px 0 50px; */
}
h1 {
font-weight: bold;
margin: 0;
}
h2 {
text-align: center;
}
p {
font-size: 14px;
font-weight: 100;
line-height: 20px;
letter-spacing: 0.5px;
margin: 20px 0 30px;
}
span {
font-size: 12px;
}
a {
color: #333;
font-size: 14px;
text-decoration: none;
margin: 15px 0;
}
button {
border-radius: 20px;
border: 1px solid #FF4B2B;
background-color: #FF4B2B;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
text-transform: uppercase;
transition: transform 80ms ease-in;
}
button:active {
transform: scale(0.95);
}
button:focus {
outline: none;
}
button.ghost {
background-color: transparent;
border-color: #FFFFFF;
}
form {
background-color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 50px;
height: 100%;
text-align: center;
}
input {
background-color: #eee;
border: none;
padding: 12px 15px;
margin: 8px 0;
width: 100%;
}
.container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25),
0 10px 10px rgba(0,0,0,0.22);
position: relative;
overflow: hidden;
width: 768px;
max-width: 100%;
min-height: 480px;
}
.form-container {
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}
.sign-in-container {
left: 0;
width: 50%;
z-index: 2;
}
.container.right-panel-active .sign-in-container {
transform: translateX(100%);
}
.sign-up-container {
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
}
.container.right-panel-active .sign-up-container {
transform: translateX(100%);
opacity: 1;
z-index: 5;
animation: show 0.6s;
}
@keyframes show {
0%, 49.99% {
opacity: 0;
z-index: 1;
}
50%, 100% {
opacity: 1;
z-index: 5;
}
}
.overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}
.container.right-panel-active .overlay-container{
transform: translateX(-100%);
}
.overlay {
background: #FF416C;
background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
background: linear-gradient(to right, #FF4B2B, #FF416C);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
color: #FFFFFF;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.container.right-panel-active .overlay {
transform: translateX(50%);
}
.overlay-panel {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
top: 0;
height: 100%;
width: 50%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.overlay-left {
transform: translateX(-20%);
}
.container.right-panel-active .overlay-left {
transform: translateX(0);
}
.overlay-right {
right: 0;
transform: translateX(0);
}
.container.right-panel-active .overlay-right {
transform: translateX(20%);
}
.social-container {
margin: 20px 0;
}
.social-container a {
border: 1px solid #DDDDDD;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 5px;
height: 40px;
width: 40px;
}
footer {
background-color: #222;
color: #fff;
font-size: 14px;
bottom: 0;
position: fixed;
left: 0;
right: 0;
text-align: center;
z-index: 999;
}
footer p {
margin: 10px 0;
}
footer i {
color: red;
}
footer a {
color: #3c97bf;
text-decoration: none;
}

398
public/css/page/login.css
View File

@ -1,252 +1,168 @@
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800'); .btn {
display: inline-block;
* { *display: inline;
box-sizing: border-box; *zoom: 1;
} padding: 4px 10px 4px;
margin-bottom: 0;
body { font-size: 13px;
background: #f6f5f7; line-height: 18px;
display: flex; color: #333333;
justify-content: center; text-align: center;
align-items: center; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
flex-direction: column; vertical-align: middle;
font-family: 'Montserrat', sans-serif; background-color: #f5f5f5;
height: 100vh; background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
/* margin: -20px 0 50px; */ background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
} background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
h1 { background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
font-weight: bold; background-image: linear-gradient(top, #ffffff, #e6e6e6);
margin: 0; background-repeat: repeat-x;
} filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0);
border-color: #e6e6e6 #e6e6e6 #e6e6e6;
h2 { border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
text-align: center; border: 1px solid #e6e6e6;
} -webkit-border-radius: 4px;
-moz-border-radius: 4px;
p { border-radius: 4px;
font-size: 14px; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
font-weight: 100; -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
line-height: 20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
letter-spacing: 0.5px; cursor: pointer;
margin: 20px 0 30px; *margin-left: 0.3em;
} }
.btn:hover,
span { .btn:active,
font-size: 12px; .btn.active,
} .btn.disabled,
.btn[disabled] {
a { background-color: #e6e6e6;
color: #333; }
font-size: 14px; .btn-large {
text-decoration: none; padding: 9px 14px;
margin: 15px 0; font-size: 15px;
} line-height: normal;
-webkit-border-radius: 5px;
button { -moz-border-radius: 5px;
border-radius: 20px; border-radius: 5px;
border: 1px solid #FF4B2B; }
background-color: #FF4B2B; .btn:hover {
color: #FFFFFF; color: #333333;
font-size: 12px; text-decoration: none;
font-weight: bold; background-color: #e6e6e6;
padding: 12px 45px; background-position: 0 -15px;
letter-spacing: 1px; -webkit-transition: background-position 0.1s linear;
text-transform: uppercase; -moz-transition: background-position 0.1s linear;
transition: transform 80ms ease-in; -ms-transition: background-position 0.1s linear;
} -o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
button:active { }
transform: scale(0.95); .btn-primary,
} .btn-primary:hover {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
button:focus { color: #ffffff;
outline: none; }
} .btn-primary.active {
color: rgba(255, 255, 255, 0.75);
button.ghost { }
background-color: transparent; .btn-primary {
border-color: #FFFFFF; background-color: #4a77d4;
} background-image: -moz-linear-gradient(top, #6eb6de, #4a77d4);
background-image: -ms-linear-gradient(top, #6eb6de, #4a77d4);
form { background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6eb6de), to(#4a77d4));
background-color: #FFFFFF; background-image: -webkit-linear-gradient(top, #6eb6de, #4a77d4);
display: flex; background-image: -o-linear-gradient(top, #6eb6de, #4a77d4);
align-items: center; background-image: linear-gradient(top, #6eb6de, #4a77d4);
justify-content: center; background-repeat: repeat-x;
flex-direction: column; filter: progid:dximagetransform.microsoft.gradient(startColorstr=#6eb6de, endColorstr=#4a77d4, GradientType=0);
padding: 0 50px; border: 1px solid #3762bc;
height: 100%; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
text-align: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5);
} }
.btn-primary:hover,
input { .btn-primary:active,
background-color: #eee; .btn-primary.active,
border: none; .btn-primary.disabled,
padding: 12px 15px; .btn-primary[disabled] {
margin: 8px 0; filter: none;
width: 100%; background-color: #4a77d4;
} }
.btn-block {
.container { width: 100%;
background-color: #fff; display: block;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25),
0 10px 10px rgba(0,0,0,0.22);
position: relative;
overflow: hidden;
width: 768px;
max-width: 100%;
min-height: 480px;
}
.form-container {
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}
.sign-in-container {
left: 0;
width: 50%;
z-index: 2;
}
.container.right-panel-active .sign-in-container {
transform: translateX(100%);
}
.sign-up-container {
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
}
.container.right-panel-active .sign-up-container {
transform: translateX(100%);
opacity: 1;
z-index: 5;
animation: show 0.6s;
}
@keyframes show {
0%, 49.99% {
opacity: 0;
z-index: 1;
}
50%, 100% {
opacity: 1;
z-index: 5;
}
}
.overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}
.container.right-panel-active .overlay-container{
transform: translateX(-100%);
}
.overlay {
background: #FF416C;
background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
background: linear-gradient(to right, #FF4B2B, #FF416C);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
color: #FFFFFF;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.container.right-panel-active .overlay {
transform: translateX(50%);
}
.overlay-panel {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
top: 0;
height: 100%;
width: 50%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.overlay-left {
transform: translateX(-20%);
}
.container.right-panel-active .overlay-left {
transform: translateX(0);
}
.overlay-right {
right: 0;
transform: translateX(0);
}
.container.right-panel-active .overlay-right {
transform: translateX(20%);
} }
.social-container { * {
margin: 20px 0; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
} }
.social-container a { html {
border: 1px solid #DDDDDD; width: 100%;
border-radius: 50%; height: 100%;
display: inline-flex; overflow: hidden;
justify-content: center;
align-items: center;
margin: 0 5px;
height: 40px;
width: 40px;
} }
footer { body {
background-color: #222; width: 100%;
height: 100%;
font-family: "Open Sans", sans-serif;
background: #092756;
background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, 0.4) 10%, rgba(138, 114, 76, 0) 40%),
-moz-linear-gradient(top, rgba(57, 173, 219, 0.25) 0%, rgba(42, 60, 87, 0.4) 100%),
-moz-linear-gradient(-45deg, #670d10 0%, #092756 100%);
background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, 0.4) 10%, rgba(138, 114, 76, 0) 40%),
-webkit-linear-gradient(top, rgba(57, 173, 219, 0.25) 0%, rgba(42, 60, 87, 0.4) 100%),
-webkit-linear-gradient(-45deg, #670d10 0%, #092756 100%);
background: -o-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, 0.4) 10%, rgba(138, 114, 76, 0) 40%),
-o-linear-gradient(top, rgba(57, 173, 219, 0.25) 0%, rgba(42, 60, 87, 0.4) 100%),
-o-linear-gradient(-45deg, #670d10 0%, #092756 100%);
background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, 0.4) 10%, rgba(138, 114, 76, 0) 40%),
-ms-linear-gradient(top, rgba(57, 173, 219, 0.25) 0%, rgba(42, 60, 87, 0.4) 100%),
-ms-linear-gradient(-45deg, #670d10 0%, #092756 100%);
background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, 0.4) 10%, rgba(138, 114, 76, 0) 40%),
linear-gradient(to bottom, rgba(57, 173, 219, 0.25) 0%, rgba(42, 60, 87, 0.4) 100%),
linear-gradient(135deg, #670d10 0%, #092756 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3E1D6D', endColorstr='#092756',GradientType=1 );
}
.login {
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
width: 300px;
height: 300px;
}
.login h1 {
color: #fff; color: #fff;
font-size: 14px; text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
bottom: 0; letter-spacing: 1px;
position: fixed;
left: 0;
right: 0;
text-align: center; text-align: center;
z-index: 999;
} }
footer p { input {
margin: 10px 0; width: 100%;
} margin-bottom: 10px;
background: rgba(0, 0, 0, 0.3);
footer i { border: none;
color: red; outline: none;
} padding: 10px;
font-size: 13px;
footer a { color: #fff;
color: #3c97bf; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
text-decoration: none; border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px;
box-shadow: inset 0 -5px 45px rgba(100, 100, 100, 0.2), 0 1px 1px rgba(255, 255, 255, 0.2);
-webkit-transition: box-shadow 0.5s ease;
-moz-transition: box-shadow 0.5s ease;
-o-transition: box-shadow 0.5s ease;
-ms-transition: box-shadow 0.5s ease;
transition: box-shadow 0.5s ease;
}
input:focus {
box-shadow: inset 0 -5px 45px rgba(100, 100, 100, 0.4), 0 1px 1px rgba(255, 255, 255, 0.2);
} }

4
route.txt
View File

@ -1,4 +1,4 @@
D:\@code\project\hapi-demo\source\route\api对应路径： D:\1XYX\demo\hapi-demo\source\route\api对应路径：
不需权限 ： GET /api/{path*} 不需权限 ： GET /api/{path*}
需要权限 ： GET /api/v1/upload 需要权限 ： GET /api/v1/upload
需要权限 ： POST /api/v1/upload/upload 需要权限 ： POST /api/v1/upload/upload
@ -7,7 +7,7 @@ D:\@code\project\hapi-demo\source\route\api对应路径：
不需权限 ： POST /api/v1/user/login 不需权限 ： POST /api/v1/user/login
需要权限 ： DELETE /api/v1/user/del 需要权限 ： DELETE /api/v1/user/del
需要权限 ： GET /api/v1/user/userinfo 需要权限 ： GET /api/v1/user/userinfo
D:\@code\project\hapi-demo\source\route\views对应路径： D:\1XYX\demo\hapi-demo\source\route\views对应路径：
不需权限(提供无需验证)： GET /404 不需权限(提供无需验证)： GET /404
不需权限 ： GET /css 不需权限 ： GET /css
不需权限(提供无需验证)： GET / 不需权限(提供无需验证)： GET /

6
source/plugins/index.ts
View File

@ -35,10 +35,12 @@ export default [
// https://github.com/hks-epod/paydash/blob/master/lib/flash.js // https://github.com/hks-epod/paydash/blob/master/lib/flash.js
register: function (server: Server, options) { register: function (server: Server, options) {
server.ext('onPreResponse', async function(request: Request, h) { server.ext('onPreResponse', async function(request: Request, h) {
// @ts-ignore
if(request.response.variety === "file") return h.continue; // 返回文件时不处理
// 需要设置auth是try或者true才行 // 需要设置auth是try或者true才行
const isLogin = request.auth.isAuthenticated; const isLogin = request.auth.isAuthenticated;
console.log("是否登录：",isLogin, request.path); console.log("是否登录：",isLogin, request.path);
// @ts-ignore // @ts-ignore
// console.log(isLogin, request.path, request.response.variety); // console.log(isLogin, request.path, request.response.variety);
let user; let user;
@ -77,6 +79,7 @@ export default [
storeBlank: false, storeBlank: false,
cookieOptions: { cookieOptions: {
password: "dsRhw1Y5UZqB8SjfClbkrX9PF7yuDMV3JItcW0G4vgpaxONo6mzenHLQET2AiKyPUjjdgjo10amjfghy", password: "dsRhw1Y5UZqB8SjfClbkrX9PF7yuDMV3JItcW0G4vgpaxONo6mzenHLQET2AiKyPUjjdgjo10amjfghy",
path: '/',
isSecure: false isSecure: false
} }
} }
@ -89,6 +92,7 @@ export default [
// return true; // return true;
// }, // },
cookieOptions: { cookieOptions: {
path: '/',
isSecure: false isSecure: false
} }
} }

56
template/views/login copy.pug
View File

@ -0,0 +1,56 @@
extends /layout/layout
block var
-title="登陆" // 网页标题
-hideHeader=true
block head
+css("css/page/login.css")
block content
.container#container
.form-container.sign-up-container
form(action='/login/register' method='post')
h1 创建账户
.social-container
a.social(href='#')
i.fab.fa-facebook-f
a.social(href='#')
i.fab.fa-google-plus-g
a.social(href='#')
i.fab.fa-linkedin-in
span 使用您的邮箱注册
input(type='text', name="username", placeholder='请输入用户名')
input(type='email', name="email",placeholder='请输入邮箱')
input(type='password', name="password",placeholder='请输入密码')
include @/helper/form_security.pug
button 注册
.form-container.sign-in-container
form(action='/login' method='post')
h1 登录
.social-container
a.social(href='#')
i.fab.fa-facebook-f
a.social(href='#')
i.fab.fa-google-plus-g
a.social(href='#')
i.fab.fa-linkedin-in
span 填写您的账户
input(type='text',name="username" , placeholder='请输入邮箱')
input(type='password',name="password" , placeholder='请输入密码')
include @/helper/form_security.pug
a(href='#') 忘记密码?
button 登录
.overlay-container
.overlay
.overlay-panel.overlay-left
h1 欢迎回来!
p 填写您的账户，与我们保持亲密联系吧！
button.ghost#signIn 登录
.overlay-panel.overlay-right
h1 你好朋友!
p 创建您的个人账户，随我们遨游于此吧！
button.ghost#signUp 注册
block script
+script("js/page/login.js")

50
template/views/login.pug
View File

@ -8,49 +8,13 @@ block head
+css("css/page/login.css") +css("css/page/login.css")
block content block content
.container#container .login
.form-container.sign-up-container h1 登录
form(action='/login/register' method='post') form(action='/login' method='post')
h1 创建账户 input(type='text', name='username', placeholder='用户名', required)
.social-container input(type='password', name='password', placeholder='密码', required)
a.social(href='#') include @/helper/form_security.pug
i.fab.fa-facebook-f button.btn.btn-primary.btn-block.btn-large(type='submit') 现在登录！
a.social(href='#')
i.fab.fa-google-plus-g
a.social(href='#')
i.fab.fa-linkedin-in
span 使用您的邮箱注册
input(type='text', name="username", placeholder='请输入用户名')
input(type='email', name="email",placeholder='请输入邮箱')
input(type='password', name="password",placeholder='请输入密码')
include @/helper/form_security.pug
button 注册
.form-container.sign-in-container
form(action='/login' method='post')
h1 登录
.social-container
a.social(href='#')
i.fab.fa-facebook-f
a.social(href='#')
i.fab.fa-google-plus-g
a.social(href='#')
i.fab.fa-linkedin-in
span 填写您的账户
input(type='text',name="username" , placeholder='请输入邮箱')
input(type='password',name="password" , placeholder='请输入密码')
include @/helper/form_security.pug
a(href='#') 忘记密码?
button 登录
.overlay-container
.overlay
.overlay-panel.overlay-left
h1 欢迎回来!
p 填写您的账户，与我们保持亲密联系吧！
button.ghost#signIn 登录
.overlay-panel.overlay-right
h1 你好朋友!
p 创建您的个人账户，随我们遨游于此吧！
button.ghost#signUp 注册
block script block script
+script("js/page/login.js") +script("js/page/login.js")

Write Preview
Loading…
Cancel
Save