2017-05-22 23:25:43 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > Login Facilitator: OAuth3.org< / title >
2017-06-19 19:53:03 +00:00
< link rel = "stylesheet" type = "text/css" href = "/css/bootstrap.min.css" >
2017-06-19 19:29:44 +00:00
<!-- <link rel="stylesheet" type="text/css" href="/css/style.css"> -->
2017-05-22 23:25:43 +00:00
< link rel = "stylesheet" type = "text/css" href = "https://fonts.googleapis.com/css?family=Lato:300" >
< script src = "https://use.fontawesome.com/3af0faae66.js" > < / script >
2017-06-19 19:29:44 +00:00
< link rel = "stylesheet" type = "text/css" href = "/css/daplie-installer-overrides.css" >
2017-05-22 23:25:43 +00:00
< / 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 -->
2017-06-19 19:53:03 +00:00
< div class = "dap-bordered js-userid-container" >
< p class = "org-title" > Safelogin.org< / p >
< p class = "dap-centered-text dap-normal-text welcome-text center-it" > Welcome to a new way to login. Safelogin.org helps you create an Internet ID that allows you to choose what info is shared about you when you login into a site or app online.< / p >
2017-05-22 23:25:43 +00:00
< form method = "post" action = "" >
2017-06-19 19:53:03 +00:00
< div class = "form-group" >
< input type = "email" class = "form-control dap-input js-oauth3-email emailInput" placeholder = "Enter an email address to start" > < / input >
< / div >
< button class = "dap-full-button-green js-authn-show btn btn-primary" disabled > Send authentication email< / button >
2017-05-22 23:25:43 +00:00
< / form >
2017-06-19 19:53:03 +00:00
< img src = "./img/gray-logo.svg" class = "sponsored-by-logo" >
<!-- <p class="dap - line - around">or</p>
2017-05-22 23:25:43 +00:00
< 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 >
2017-06-19 19:53:03 +00:00
< a href = "./loginwhatis.html" target = "_blank" > < p class = "dap-centered-text dap-help-text" > What is this?< / p > < / a > -->
2017-05-22 23:25:43 +00:00
< / div >
< div class = "dap-bordered js-authn" >
2017-06-19 19:53:03 +00:00
< p class = "org-title" > Safelogin.org< / p >
<!-- <div class="dap - normal - text">
2017-05-22 23:25:43 +00:00
< 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 >
2017-06-19 19:53:03 +00:00
< p class = "dap-centered-text dap-scrunch-bottom dap-med-text" > Please enter the code below:< / p > -->
< p class = "code-sent-text" > Hi, thanks for signing up.< / p >
< p class = "code-sent-text" > Please enter the code sent to:< / p >
< p class = "code-sent-text email-address displayed" > < / p >
< p class = "code-sent-text pb-40" > Be sure to check your spam.< / p >
< form class = "twelve-digit-code" method = "post" onsubmit = "" >
< div class = "form-group" >
< p class = "code-lasts-text" > Code lasts for 15 minutes.< / p >
< input type = "hidden" class = "js-authn-otp-uuid" >
< input class = "dap-input js-authn-otp-code form-control" placeholder = "XXXX-XXXX-XXXX" maxlength = "14" > < / input >
< / div >
< div class = "dap-centered-div dap-space-on-top form-group" >
2017-05-22 23:25:43 +00:00
< label class = "js-remember-label dap-normal-text" >
2017-06-19 19:53:03 +00:00
< img src = "./img/unpressed-check.png" class = "check js-remember-status" >
<!-- <span class="fa fa - 2x fa - purple fa - square - o dap - remember - margin js - remember - status"></span> -->
2017-05-22 23:25:43 +00:00
< span class = "dap-remember-me noselect" > Remember this device.< / span >
2017-06-19 19:53:03 +00:00
< input class = "js-remember-checkbox hidden" type = "checkbox" > < / input >
2017-05-22 23:25:43 +00:00
< / label >
< / div >
2017-06-19 19:53:03 +00:00
<!-- <button class="dap - full - button - green js - remember - btn js - authz - remember - me">SIGN IN ONCE</button> -->
< button type = "button" class = "btn btn-primary" > Send Code Again< / button >
< button type = "button" class = "btn btn-primary" > Edit My Email< / button >
< button type = "button" class = "btn btn-primary submit-btn dap-full-button-green js-remember-btn js-authz-remember-me" disabled > Submit< / button >
2017-05-22 23:25:43 +00:00
< / form >
2017-06-19 19:53:03 +00:00
<!-- <a href="./authnocode.html" target="_blank">
2017-05-22 23:25:43 +00:00
< 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 >
2017-06-19 19:53:03 +00:00
< / a > -->
< img src = "./img/gray-logo.svg" class = "sponsored-by-logo" >
2017-05-22 23:25:43 +00:00
< / div >
< div class = "dap-bordered dap-normal-text js-authz" >
2017-06-19 19:53:03 +00:00
< p class = "org-title" > Safelogin.org< / p >
<!-- <br> -->
<!-- <div class="dap - user - plus - app">
2017-05-22 23:25:43 +00:00
< span class = "fa fa-3x fa-purple fa-user-circle" > < / span >
< span class = "fa fa-2x fa-gray fa-plus" > < / span >
2017-06-19 19:53:03 +00:00
< img class = "dap-lab-logo" src = "./img/Daplie-Badge-Purple.png" alt = "Daplie Labs Logo" >
< / div > -->
< p class = "dap-centered-text dap-normal-text almost-done-text" > Almost done. Now it’ < / p >
2017-05-22 23:25:43 +00:00
< br >
< form class = "js-authorization-decision" action = "#" >
< ul class = "js-scopes-container dap-app-auth-list" >
2017-06-19 19:53:03 +00:00
< li class = "checkbox dap-purple-text js-auth-li-enabled" >
< img src = "./img/pressed-check.png" class = "check" >
< span class = "dap-small-text js-scope-desc noselect" > < / span >
< input class = "checkbox js-scope-toggle js-auth-checkbox hidden" type = "checkbox" >
2017-05-22 23:25:43 +00:00
< / li >
< / ul >
< div >
2017-06-19 19:53:03 +00:00
< button class = "dap-full-button-green js-login-allow btn btn-primary" type = "button" > AUTHORIZE THIS APP< / button >
< button class = "dap-full-button-pink js-login-deny btn btn-primary" type = "button" > Cancel< / button >
2017-05-22 23:25:43 +00:00
< / div >
< / form >
2017-06-19 19:53:03 +00:00
< img src = "./img/gray-logo.svg" class = "sponsored-by-logo" >
2017-05-22 23:25:43 +00:00
< / 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" >
2017-06-19 19:53:03 +00:00
< p class = "dap-centered-text sign-out-text" > Sign out of Daplie and all Applications?< / p >
< button type = "button" class = "dap-full-button-green js-logout btn btn-primary" > Sign Out< / button >
< img src = "./img/gray-logo.svg" class = "sponsored-by-logo" >
2017-05-22 23:25:43 +00:00
< / div >
2017-06-19 19:46:46 +00:00
<!-- [if IE]><script src="bower_components/rsvp.js/rsvp.js"></script><![endif] -->
2017-06-19 19:29:44 +00:00
< script src = "/assets/com.jquery/jquery-2.2.0.min.js" > < / script >
< script src = "./js/bootstrap.min.js" > < / script >
2017-06-19 19:46:46 +00:00
< script src = "./js/issuer.js" > < / script >
2017-05-22 23:25:43 +00:00
< script src = "./js/script.js" > < / script >
< script src = "/assets/org.oauth3/oauth3.core.js" > < / script >
< script src = "/assets/org.oauth3/oauth3.issuer.js" > < / script >
2017-06-19 19:46:46 +00:00
<!-- script src="/assets/org.oauth3/oauth3.mock.js"></script -->
2017-05-22 23:25:43 +00:00
< / body >
< / html >
