liz/wikijs-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: login UI - vector + dynamic colors

Browse Source
This commit is contained in:
NGPixel
2017-09-22 21:33:09 -04:00
parent cbe39102c3
commit 16a47e46ce
5 changed files with 65 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
assets/svg/login-bg-dark.svg Normal file
View File

@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 1500 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<path d="M1500,543c0,0 -135.753,54.677 -252.197,101.577c-106.023,42.702 -223.596,47.2 -332.571,12.724c-56.088,-17.745 -118.404,-37.46 -173.999,-55.048c-103.773,-32.831 -216.376,-22.709 -312.631,28.103c0,0 0,0.001 0,0.001c-94.821,50.055 -206.441,57.476 -307.053,20.415c-63.317,-23.322 -121.549,-44.772 -121.549,-44.772l0,417l1500,0l0,-480Z" style="fill:#2d2d2d;fill-opacity:0.282609;"/>
<path d="M1510,580c0,0 -144.155,47.882 -252.311,83.806c-74.651,24.796 -156.199,17.958 -225.679,-18.923c0,0 0,0 0,0c-62.207,-33.021 -133.629,-44.415 -203.023,-32.389c-98.381,17.051 -244.859,42.438 -352.664,61.121c-92.259,15.99 -187.076,8.079 -275.41,-22.977c-93.342,-32.818 -200.913,-70.638 -200.913,-70.638l0,466l1500,0l10,-466Z" style="fill:#2d2d2d;fill-opacity:0.550725;"/>
<path d="M1500,650c0,0 -143.367,28.581 -239.425,47.731c-56.087,11.181 -113.694,12.508 -170.237,3.922c-74.75,-11.351 -183.318,-27.838 -261.719,-39.743c-65.252,-9.909 -131.707,-8.759 -196.577,3.4c-49.655,9.308 -109.704,20.564 -158.992,29.803c-63.125,11.833 -127.839,12.479 -191.188,1.911c-111.875,-18.665 -281.862,-47.024 -281.862,-47.024l0,430l1500,0l0,-430Z" style="fill:#2d2d2d;"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

7
assets/svg/login-bg.svg Normal file
View File

@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 1500 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<path d="M1500,543c0,0 -135.753,54.677 -252.197,101.577c-106.023,42.702 -223.596,47.2 -332.571,12.724c-56.088,-17.745 -118.404,-37.46 -173.999,-55.048c-103.773,-32.831 -216.376,-22.709 -312.631,28.103c0,0 0,0.001 0,0.001c-94.821,50.055 -206.441,57.476 -307.053,20.415c-63.317,-23.322 -121.549,-44.772 -121.549,-44.772l0,417l1500,0l0,-480Z" style="fill:#fff;fill-opacity:0.282609;"/>
<path d="M1510,580c0,0 -144.155,47.882 -252.311,83.806c-74.651,24.796 -156.199,17.958 -225.679,-18.923c0,0 0,0 0,0c-62.207,-33.021 -133.629,-44.415 -203.023,-32.389c-98.381,17.051 -244.859,42.438 -352.664,61.121c-92.259,15.99 -187.076,8.079 -275.41,-22.977c-93.342,-32.818 -200.913,-70.638 -200.913,-70.638l0,466l1500,0l10,-466Z" style="fill:#fff;fill-opacity:0.550725;"/>
<path d="M1500,650c0,0 -143.367,28.581 -239.425,47.731c-56.087,11.181 -113.694,12.508 -170.237,3.922c-74.75,-11.351 -183.318,-27.838 -261.719,-39.743c-65.252,-9.909 -131.707,-8.759 -196.577,3.4c-49.655,9.308 -109.704,20.564 -158.992,29.803c-63.125,11.833 -127.839,12.479 -191.188,1.911c-111.875,-18.665 -281.862,-47.024 -281.862,-47.024l0,430l1500,0l0,-430Z" style="fill:#fff;"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

69
client/scss/pages/_login.scss
View File

@@ -1,22 +1,41 @@
.login { .login {
background-size: cover; background-image: linear-gradient(to right, mc('blue', '400'), mc('blue', '600'));
background-position: center center;
background-image: url('../images/bg.jpg');
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
&.is-error {
background-image: linear-gradient(to right, mc('red', '400'), mc('red', '600'));
}
&::before {
content: '';
position: absolute;
background-image: url('../svg/login-bg.svg');
background-position: center bottom;
background-size: cover;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
&-container { &-container {
position: relative; position: relative;
display: flex; display: flex;
width: 450px; width: 400px;
align-items: stretch; align-items: stretch;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); box-shadow: 0 14px 28px rgba(0,0,0,0.2);
border-radius: 6px;
&.is-expanded { &.is-expanded {
width: 650px; width: 650px;
.login-frame {
border-radius: 0 6px 6px 0;
}
} }
@include until($tablet) { @include until($tablet) {
@@ -30,22 +49,24 @@
&-error { &-error {
position: absolute; position: absolute;
bottom: 100%; bottom: 105%;
width: 100%; width: 100%;
min-height: 50px; min-height: 50px;
background-image: radial-gradient(ellipse at top left, rgba(mc('red', '900'),.9) 0%,rgba(mc('red', '400'),.8) 100%); background-image: radial-gradient(ellipse at top left, rgba(255,255,255,.9) 0%,rgba(255,255,255,.8) 100%);
border: 1px solid #FFF; box-shadow: 0 5px 10px rgba(0,0,0,0.2);
color: #FFF; border-radius: 6px;
color: mc('red', '800');
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 1rem;
strong { strong {
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
display: block; display: block;
padding: 0 1rem 0 0; padding: 0 1rem 0 0;
border-right: 1px solid #FFF; border-right: 1px solid mc('red', '200');
} }
span { span {
padding: 0 0 0 1rem; padding: 0 0 0 1rem;
@@ -57,9 +78,12 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 250px; width: 250px;
border: 1px solid #FFF;
border-right: none;
border-radius: 6px 0 0 6px;
background-color: mc('grey', '900'); background-color: mc('grey', '900');
z-index: 1; z-index: 1;
overflow: hidden;
@include until($tablet) { @include until($tablet) {
width: 50px; width: 50px;
@@ -70,8 +94,8 @@
padding: 5px 15px; padding: 5px 15px;
border: none; border: none;
color: #FFF; color: #FFF;
background-color: mc('grey', '800'); background-color: mc('light-blue', '800');
border-top: 1px solid mc('grey', '900'); border-top: 1px solid mc('light-blue', '900');
font-family: $core-font-standard; font-family: $core-font-standard;
font-weight: 600; font-weight: 600;
text-align: left; text-align: left;
@@ -86,7 +110,7 @@
} }
&:hover { &:hover {
background-color: mc('grey', '600'); background-color: mc('light-blue', '600');
} }
&:first-child { &:first-child {
@@ -96,7 +120,7 @@
&.is-active { &.is-active {
background-color: mc('grey', '100'); background-color: mc('grey', '100');
background-image: radial-gradient(circle at top left, rgba(mc('grey', '200'),1) 0%,rgba(255,255,255,1) 100%); background-image: radial-gradient(circle at top left, rgba(mc('grey', '200'),1) 0%,rgba(255,255,255,1) 100%);
color: mc('grey', '700'); color: mc('light-blue', '700');
} }
i { i {
@@ -137,8 +161,8 @@
} }
&-frame { &-frame {
background-image: radial-gradient(circle at top left, rgba(255,255,255,1) 0%,rgba(240,240,240,.6) 100%); background-image: radial-gradient(circle at top left, rgba(255,255,255,1) 5%,rgba(240,240,240,.6) 100%);
border: 1px solid #FFF; border-radius: 6px;
width: 400px; width: 400px;
padding: 1rem; padding: 1rem;
color: mc('grey', '700'); color: mc('grey', '700');
@@ -154,7 +178,7 @@
h1 { h1 {
font-size: 2rem; font-size: 2rem;
font-weight: 600; font-weight: 600;
color: mc('grey', '700'); color: mc('light-blue', '700');
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
@@ -176,7 +200,7 @@
width: 100%; width: 100%;
border: 1px solid #FFF; border: 1px solid #FFF;
border-radius: 3px; border-radius: 3px;
background-color: rgba(255,255,255,.7); background-color: rgba(255,255,255,.9);
padding: 0 15px; padding: 0 15px;
height: 40px; height: 40px;
margin: 0 0 10px 0; margin: 0 0 10px 0;
@@ -188,7 +212,7 @@
&:focus { &:focus {
outline: none; outline: none;
border-color: mc('grey','400'); border-color: mc('light-blue','500');
} }
} }
@@ -204,13 +228,12 @@
bottom: 10vh; bottom: 10vh;
width: 100%; width: 100%;
z-index: 2; z-index: 2;
color: #FFF; color: mc('grey', '500');
font-weight: 400; font-weight: 400;
text-shadow: 1px 1px 0 #000;
a { a {
font-weight: 600; font-weight: 600;
color: #FFF; color: mc('light-blue', '500');
margin-left: .25rem; margin-left: .25rem;
} }

4
server/controllers/auth.js
View File

@@ -35,8 +35,8 @@ const bruteforce = new ExpressBrute(EBstore, {
*/ */
router.get('/login', function (req, res, next) { router.get('/login', function (req, res, next) {
res.render('auth/login', { res.render('auth/login', {
authStrategies: wiki.auth.strategies, authStrategies: _.reject(wiki.auth.strategies, { key: 'local' }),
hasMultipleStrategies: Object.keys(wiki.config.auth.strategies).length > 0 hasMultipleStrategies: Object.keys(wiki.config.auth.strategies).length > 1
}) })
}) })

6
server/views/auth/login.pug
View File

@@ -2,8 +2,8 @@ extends ../master.pug
block body block body
body body
.login#root .login#root(class={ "is-error": flash.length > 0 })
.login-container(:class={ "is-expanded": hasMultipleStrategies }) .login-container(class={ "is-expanded": hasMultipleStrategies })
if flash.length > 0 if flash.length > 0
.login-error .login-error
strong strong
@@ -25,7 +25,7 @@ block body
form(method='post', action='/login') form(method='post', action='/login')
input#login-user(type='text', name='email', placeholder=t('auth:fields.emailuser')) input#login-user(type='text', name='email', placeholder=t('auth:fields.emailuser'))
input#login-pass(type='password', name='password', placeholder=t('auth:fields.password')) input#login-pass(type='password', name='password', placeholder=t('auth:fields.password'))
button.button.is-light-green.is-fullwidth(type='submit') button.button.is-light-blue.is-fullwidth(type='submit')
span= t('auth:actions.login') span= t('auth:actions.login')
.login-copyright .login-copyright
= t('footer.poweredby') = t('footer.poweredby')