Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #628 from influxdata/fancy-auth-page 

Fancy Auth Page
pull/10616/head
Nathan Haugo 2016-11-29 13:22:36 -08:00 committed by GitHub
parent 6a348d0dd4 c1e6c568de
commit c7c2ada152
6 changed files with 2335 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2213
ui/assets/images/auth-bg.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 269 KiB

21
ui/assets/images/auth-logo.svg Normal file
View File

@ -0,0 +1,21 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 140 140" style="enable-background:new 0 0 140 140;" xml:space="preserve">
<style type="text/css">
.st0{fill:url(#SVGID_1_);}
</style>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="63.1656" y1="62.6278" x2="107.6656" y2="110.6278">
<stop offset="0" style="stop-color:#22ADF6"/>
<stop offset="1" style="stop-color:#9394FF"/>
</linearGradient>
<path class="st0" d="M136.7,90.2c0-0.1,0-0.2,0-0.3l-15.5-67c0-0.1-0.1-0.2-0.1-0.3c0,0,0,0,0-0.1c-0.1-0.1-0.2-0.2-0.3-0.2
c0,0,0,0,0,0c0,0,0,0,0,0c-0.1,0-0.2-0.1-0.2-0.1L54.8,2c-0.1,0-0.2,0-0.3,0c0,0,0,0,0,0c0,0,0,0,0,0c-0.1,0-0.2,0-0.4,0.1
c0,0,0,0,0,0c-0.1,0-0.2,0.1-0.3,0.2L3.6,49.2c-0.1,0.1-0.2,0.2-0.2,0.3c0,0,0,0,0,0.1c0,0.1-0.1,0.2-0.1,0.3c0,0,0,0,0,0
c0,0,0,0,0,0c0,0.1,0,0.2,0,0.3l15.5,67c0,0.1,0.1,0.2,0.1,0.2c0,0,0,0,0,0c0.1,0.1,0.1,0.2,0.2,0.3c0,0,0,0,0.1,0.1
c0.1,0.1,0.2,0.1,0.3,0.2L85.2,138c0.1,0,0.2,0,0.3,0c0.1,0,0.2,0,0.3-0.1c0,0,0.1,0,0.1,0c0.1,0,0.1-0.1,0.2-0.1c0,0,0,0,0,0
l50.3-46.9c0.1-0.1,0.1-0.1,0.2-0.2c0,0,0,0,0,0c0,0,0,0,0,0C136.7,90.5,136.7,90.4,136.7,90.2C136.7,90.3,136.7,90.3,136.7,90.2z
M21,116.2l11-36.1l63.8,19.5l-11,36.1L21,116.2z M6.1,53.3l24.1,25.9L19.8,113L6.1,53.3z M95.7,97.6L33.3,78.5L81,33.9l10.7,46.5
L95.7,97.6z M31.4,77.5L5.7,49.9L54.5,4.4L80.2,32L31.4,77.5z M97.8,97.8l-15-65.1l36.7-8.5l15,65.1L97.8,97.8z M81.9,30.9L57.8,5
L116.4,23L81.9,30.9z M97.9,99.9l34.5-8l-44.8,41.8L97.9,99.9z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

11
ui/src/auth/Login.js
View File

@ -4,7 +4,16 @@ import {withRouter} from 'react-router';
const Login = React.createClass({
render() {
return (
<a className="btn btn-primary" href="/oauth/github">Click me to log in</a>
<div className="auth-page">
<div className="auth-box">
<div className="auth-logo"></div>
<h1 className="auth-text-logo">Chronograf</h1>
<p><strong>v1.1</strong> / Time-Series Data Visualization</p>
<a className="btn btn-primary" href="/oauth/github"><span className="icon github"></span> Login with GitHub</a>
</div>
<p className="auth-credits">Made by <span className="icon cubo-uniform"></span>InfluxData</p>
<div className="auth-image"></div>
</div>
);
},
});

8
ui/src/style/enterprise_style/_enterprise-custom.scss
View File

@ -10,7 +10,8 @@ body {
position: absolute;
align-items: stretch;
/* Ensures sidebar and page-wrapper go full-height */
overflow: auto; /* plz halp alex I need this 4 the signup pages */
overflow: hidden;
background-color: $g0-obsidian;
}
/*
@ -19,6 +20,11 @@ body {
*/
body > #react-root {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
.container {
margin-top: 60px;
}

1
ui/src/style/enterprise_style/application.scss
View File

@ -13,6 +13,7 @@
@import 'modals';
@import 'enterprise-custom';
@import 'dygraph-override';
@import 'auth-page';
@import 'hosts';
@import 'kapacitor';
@import 'influx-tooltips';

83
ui/src/style/enterprise_style/auth-page.scss Normal file
View File

@ -0,0 +1,83 @@
/*
Styles for Authorization Page
----------------------------------------------
*/
.auth-page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
@include custom-scrollbar($g3-castle, $c-pool);
@include gradient-v($g3-castle, $g0-obsidian);
padding: $sidebar-width;
}
.auth-image {
background-image: url(assets/images/auth-bg.svg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
}
.auth-box {
z-index: 90;
position: absolute;
top: 43%;
left: 50%;
transform: translate(-50%,-50%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
h1 {
color: $g20-white;
font-weight: 200;
font-size: 52px;
letter-spacing: -2px;
}
p {
color: $g11-sidewalk;
}
.btn {
margin-top: ($sidebar-width / 2);
margin-bottom: $sidebar-width;
> .icon {
font-size: 20px;
margin-right: 8px;
}
}
}
.auth-logo {
background-image: url(assets/images/auth-logo.svg);
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
width: 100px;
height: 100px;
}
.auth-credits {
z-index: 90;
position: absolute;
bottom: ($sidebar-width / 4);
left: 50%;
transform: translateX(-50%);
font-size: 12px;
color: $g11-sidewalk;
.icon {
display: inline-block;
vertical-align: middle;
position: relative;
top: -1px;
margin-right: 1px;
}
}