pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #247 from dod-ccpo/login-screen

Browse Source 
Login screen
This commit is contained in:
andrewdds
2018-09-05 15:30:06 -04:00
committed by GitHub
parent 4b25cc19d9 bdd1af579f
commit 9a81d2b6d0
3 changed files with 90 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
styles/components/_footer.scss
View File

@@ -1,6 +1,29 @@
.app-footer { .app-footer {
background-color: $color-gray-lightest; background-color: $color-gray-lightest;
border-top: 1px solid $color-gray-lighter; border-top: 1px solid $color-gray-lighter;
padding-left: $gap*4; display: flex;
padding-bottom: $gap*2; flex-direction: row;
justify-content: space-between;
h5,
.browser-support {
margin: 0;
padding: $gap * 2;
}
.browser-support {
color: $color-gray;
text-align: right;
dt, dd {
@include h5;
display: inline-block;
}
dd {
font-weight: normal;
&::before {
content: '・';
}
}
}
} }

25
styles/sections/_login.scss
View File

@@ -1,3 +1,24 @@
.login-area { .login-layout {
text-align: center; display: block;
.login-container {
max-width: 70rem;
margin-left: auto;
margin-right: auto;
.login-banner {
text-align: center;
margin: ($gap * 5) 0 ($gap * 10);
.login-banner__heading {
@include h1;
}
.login-banner__logo {
display: block;
max-width: 15rem;
margin: ($gap * 2) auto;
}
}
}
} }

51
templates/root.html
View File

@@ -1,9 +1,12 @@
{% from "components/alert.html" import Alert %}
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{% block title %}JEDI{% endblock %}</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}JEDI Cloud{% endblock %}</title>
{% assets "css" %} {% assets "css" %}
<link rel="stylesheet" href="{{ ASSET_URL }}" type="text/css"> <link rel="stylesheet" href="{{ ASSET_URL }}" type="text/css">
{% endassets %} {% endassets %}
@@ -11,19 +14,47 @@
</head> </head>
<body> <body>
<main class="usa-grid-full usa-section login-area"> <div id='app-root'>
<img class="logo-img" src="/static/img/logo-alt.png" alt="Defense Digital Service Logo"> <div class='global-layout login-layout'>
<div class='global-panel-container login-container'>
<div class='col'>
<h1 class="usa-display">JEDI</h1> <div class='login-banner'>
<h1 class="login-banner__heading">Access the JEDI Cloud</h1>
<a class="usa-button" href='{{ config.get('CAC_URL','https://cac.atat.codes') }}'><span>Sign In with CAC</span></a> <img class="login-banner__logo" src="/static/img/logo-alt.png" alt="Defense Digital Service Logo">
<button class="usa-button" disabled>Sign In via MFA</button>
{% if g.dev %}
<a class="usa-button usa-button-secondary" href='/login-dev'><span>DEV Login</span></a>
{% endif %}
</main> <a class="usa-button usa-button-big login-banner__button" href='{{ config.get('CAC_URL','https://cac.atat.codes') }}'><span>Sign in with CAC card</span></a>
{% if g.dev %}
<a class="usa-button usa-button-big usa-button-secondary" href='/login-dev'><span>DEV Login</span></a>
{% endif %}
</div>
{{ Alert('Certificate Selection',
message='When you are prompted to select a certificate, please select <strong>E-mail Certificate</strong> from the provided choices.',
actions=[
{
'label': 'Learn More',
'icon': 'help',
'href': '/'
}
]
) }}
</div>
</div>
</div>
<footer class='app-footer'>
<h5>Joint Enterprise Defense Infrastructure</h5>
<dl class='browser-support'>
<dt>JEDI Cloud supported on these web browsers</dt>
<dd>Chrome</dd><dd>Firefox</dd><dd>Safari</dd><dd>Edge</dd><dd>IE11 on Windows 10</dd><dd>IE10 on Windows 7</dd>
</footer>
</div>
</body> </body>
</html> </html>