<!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/bootstrap.min.css">
    <!-- <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>
    <link rel="stylesheet" type="text/css" href="/css/daplie-installer-overrides.css">
  </head>

  <body>
  <div 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">
      <p class="org-title">daplie.me</p>
      <p class="dap-centered-text dap-normal-text welcome-text center-it">Welcome to a new way to login. daplie.me 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>
      <form method="post" action="">
        <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>
      </form>
      <img src="./img/sponsored-by.png" class="sponsored-by-logo">
      <!-- <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">
      <p class="org-title">daplie.me</p>
      <!-- <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">&nbsp;</span></p>
      <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>
          <p class="error-msg"></p>
        </div>
        <div class="dap-centered-div dap-space-on-top form-group">
          <label class="js-remember-label dap-normal-text">
            <img src="./img/pressed-check.png" class="check js-remember-status">
            <!-- <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 hidden" type="checkbox"></input>
          </label>
        </div>
        <button type="submit" class="btn btn-primary submit-btn dap-full-button-green js-submit-code-btn" disabled>Submit</button>
        <!-- <a href="./authnocode.html" target="_blank" class="btn btn-primary">Send Code Again</a> -->
        <button class="btn btn-primary js-edit-email-button" type="button">Edit My Email</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> -->
      <img src="./img/sponsored-by.png" class="sponsored-by-logo">
    </div>

    <div class="dap-bordered dap-normal-text js-authz">
      <p class="org-title">daplie.me</p>
      <!-- <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 almost-done-text">Almost done. Now it's time to set your preferences.</p>
      <br>

      <form class="js-authorization-decision" action="#">
        <ul class="js-scopes-container dap-app-auth-list">
          <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">&nbsp;</span>
            <input class="checkbox js-scope-toggle js-auth-checkbox hidden" type="checkbox">
           </li>
         </ul>

        <div>
          <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>
        </div>
      </form>
      <img src="./img/sponsored-by.png" class="sponsored-by-logo">
    </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-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/sponsored-by.png" class="sponsored-by-logo">
    </div>
  </div>

  <div class="fade mock-bare">
    <div class="container">
      <div class="jumbotron">
        <h1>OAuth3 Playground</h1>
      </div>

      <div class="row">
        <div class="col-md-3">
          Login Status:
        </div>
        <div class="col-md-9">
          ...
        </div>
      </div>
      <div class="row">
        <div class="col-md-3">
          Current Sessions:
        </div>
        <div class="col-md-9">
          ...
        </div>
      </div>
      <div class="row">
        <div class="col-md-3">
          Approved Devices:
        </div>
        <div class="col-md-9">
          ...
        </div>
      </div>
      <div class="row">
        <div class="col-md-3">
          Approved Applications:
        </div>
        <div class="col-md-9">
          ...
        </div>
      </div>

    </div>
  </div>


    <!--[if IE]><script src="bower_components/rsvp.js/rsvp.js"></script><![endif]-->
    <script src="./js/jquery-2.2.0.min.js"></script>
    <script src="./js/jquery.mask.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="/assets/oauth3.org/oauth3.core.js"></script>
    <script src="/assets/oauth3.org/oauth3.crypto.js"></script>
    <script src="/assets/oauth3.org/oauth3.issuer.js"></script>
    <script src="./js/issuer.js"></script>
    <script src="./js/script.js"></script>

  </body>
</html>