131 lines
6.2 KiB
HTML
131 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Login Facilitator: OAuth3.org</title>
|
|
<link rel="stylesheet" type="text/css" href="/css/style.css">
|
|
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato:300">
|
|
<script src="https://use.fontawesome.com/3af0faae66.js"></script>
|
|
</head>
|
|
|
|
<body class="fade mock-main">
|
|
|
|
<!-- STEP 1: ask the user where they want to log in -->
|
|
<!-- STEP 2: ask the user for their email -->
|
|
<!-- STEP 3+4: ask for login code and to remember device -->
|
|
<!-- TODO: remember-me-not implementation? -->
|
|
|
|
<!-- <button class="btn btn-secondary js-authz-show js-authz-remember-me-not">Just this once</button>-->
|
|
|
|
<!-- Step 5: ask for permissions -->
|
|
|
|
<div class="dap-bordered js-userid-container" style="display: none;">
|
|
<p class="dap-centered-text dap-normal-text">Please, sign in to Daplie Labs...</p>
|
|
<form method="post" action="">
|
|
<input type="email" class="dap-input js-oauth3-email emailInput" placeholder="Input your e-mail"></input>
|
|
<button class="dap-full-button-green js-authn-show" disabled>CONTINUE</button>
|
|
</form>
|
|
<p class="dap-line-around">or</p>
|
|
<div class="dap-social-media dap-normal-text">
|
|
<span class="fa fa-2x fa-gray fa-facebook-square js-facebook-login"></span>
|
|
<span class="fa fa-2x fa-gray fa-twitter-square js-twitter-login"></span>
|
|
<span class="fa fa-2x fa-gray fa-google-plus-square js-google-login"></span>
|
|
<span class="fa fa-2x fa-gray fa-github-square js-github-login"></span>
|
|
<span class="fa fa-2x fa-gray fa-plus-square js-gitlab-login"></span>
|
|
</div>
|
|
<br>
|
|
<a href="./loginwhatis.html" target="_blank"><p class="dap-centered-text dap-help-text">What is this?</p></a>
|
|
</div>
|
|
|
|
<div class="dap-bordered js-authn">
|
|
<div class="dap-normal-text">
|
|
<span class="fa fa-3x icon-centered-3x fa-purple fa-envelope"></span>
|
|
</div>
|
|
<p class="dap-centered-text dap-scrunch-top dap-normal-text">A special sign-in code was sent to:</p>
|
|
<p class="dap-centered-text dap-scrunch-both dap-purple-text"><span class="js-user-email"> </span></p>
|
|
<p class="dap-centered-text dap-scrunch-bottom dap-med-text">Please enter the code below:</p>
|
|
<form method="post" onsubmit="">
|
|
<input type="hidden" class="js-authn-otp-uuid">
|
|
<input class="dap-input js-authn-otp-code" placeholder="XXXX-XXXX-XXXX"></input>
|
|
<div class="dap-centered-div dap-space-on-top">
|
|
<label class="js-remember-label dap-normal-text">
|
|
<span class="fa fa-2x fa-purple fa-square-o dap-remember-margin js-remember-status"></span>
|
|
<span class="dap-remember-me noselect">Remember this device.</span>
|
|
<input class="js-remember-checkbox" type="checkbox" checked="false"></input>
|
|
</label>
|
|
</div>
|
|
<button class="dap-full-button-green js-remember-btn js-authz-remember-me">SIGN IN ONCE</button>
|
|
</form>
|
|
<a href="./authnocode.html" target="_blank">
|
|
<p class="dap-centered-text dap-help-text">I didn't receive my code...</p>
|
|
</a>
|
|
<a href="./authnopass.html" target="_blank">
|
|
<p class="dap-centered-text dap-help-text">Why am I not using a password?</p>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="dap-bordered dap-normal-text js-authz">
|
|
<br>
|
|
<div class="dap-user-plus-app">
|
|
<span class="fa fa-3x fa-purple fa-user-circle"></span>
|
|
<span class="fa fa-2x fa-gray fa-plus"></span>
|
|
<img class="dap-lab-logo" src="./img/Daplie-Badge-Purple.png" alt="Daplie Labs Logo">
|
|
</div>
|
|
<p class="dap-centered-text dap-normal-text"> OK! Almost done. Allow app to...?</p>
|
|
<br>
|
|
|
|
<form class="js-authorization-decision" action="#">
|
|
<ul class="js-scopes-container dap-app-auth-list">
|
|
<li class="checkbox fa fa-check-square-o dap-purple-text js-auth-li-enabled">
|
|
<span class="dap-small-text js-scope-desc noselect"> </span>
|
|
<input class="checkbox js-scope-toggle js-auth-checkbox" type="checkbox">
|
|
</li>
|
|
</ul>
|
|
|
|
<div>
|
|
<button class="dap-full-button-green js-login-allow" type="button">AUTHORIZE THIS APP</button>
|
|
<button class="dap-full-button-pink js-login-deny" type="button">DENY THIS APP</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- TODO: Remove Inline Style - Hidden until added into process -->
|
|
<div style="display: none" class="dap-bordered dap-normal-text">
|
|
<br>
|
|
<div class="dap-user-plus-app">
|
|
<span class="fa fa-3x fa-purple fa-user-circle"></span>
|
|
<span class="fa fa-2x fa-gray fa-plus"></span>
|
|
<span class="fa fa-3x fa-purple fa-laptop"></span>
|
|
</div>
|
|
<p class="dap-centered-text dap-scrunch-top dap-normal-text">It looks like your user agent is</p>
|
|
<p><span class="js-sniffed-device"></span></p>
|
|
<p class="dap-centered-text dap-scrunch-bottom dap-med-text">How long would you like to trust this device?</p>
|
|
<button class="dap-3-4-button-green js-authz-remember-me">FOREVER</button>
|
|
<button class="dap-1-4-button-purple js-authz-remember-me-not">ONE DAY</button>
|
|
<span class="dap-help-text dap-3-4-span">Great if you aren't paranoid.</span>
|
|
<span class="dap-help-text dap-1-4-span">Great if you're paranoid.</span>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<p class="dap-centered-text dap-help-text">What is this?</p>
|
|
</div>
|
|
|
|
<div class="dap-bordered dap-normal-text js-logout-container">
|
|
<p class="dap-centered-text">Sign out of Daplie and all Applications?</p>
|
|
<button type="button" class="dap-full-button-green js-logout">Sign Out</button>
|
|
</div>
|
|
|
|
|
|
<!--[if IE]><script src="bower_components/rsvp.js/rsvp.js"></script><![endif]-->
|
|
<script src="/assets/com.jquery/jquery-3.1.1.js"></script>
|
|
<script src="./js/issuer.js"></script>
|
|
<script src="./js/script.js"></script>
|
|
<script src="/assets/org.oauth3/oauth3.core.js"></script>
|
|
<script src="/assets/org.oauth3/oauth3.issuer.js"></script>
|
|
<!--script src="/assets/org.oauth3/oauth3.mock.js"></script-->
|
|
|
|
</body>
|
|
</html>
|