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
commit 9a81d2b6d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 90 additions and 15 deletions
Show Stats 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 {
background-color: $color-gray-lightest;
border-top: 1px solid $color-gray-lighter;
padding-left: $gap*4;
padding-bottom: $gap*2;
display: flex;
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: '・';
}
}
}
}

27
styles/sections/_login.scss
View File

@ -1,3 +1,24 @@
.login-area {
text-align: center;
}
.login-layout {
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>
<html>
<head>
<meta charset="utf-8">
<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" %}
<link rel="stylesheet" href="{{ ASSET_URL }}" type="text/css">
{% endassets %}
@ -11,19 +14,47 @@
</head>
<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>
<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 %}
<img class="login-banner__logo" src="/static/img/logo-alt.png" alt="Defense Digital Service Logo">
</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>
</html>