causeway-standard-theme/causeway/docs/login.html

<!--(bake includes/header.html)-->

<div class="container page">
  <div class="content pane single-pane">
    <section>
      <a id="wizard"></a>
      <header class="content-header">
        <h1 class="title">Login Page</h1>
      </header>
      <!--<p>There are two options of login page to choose from.</p>-->
      <!--<p>Click the links to see demo <a href="login_demo.html" target="_blank">Option 1</a> and <a href="login_demo2.html" target="_blank">Option 2</a></p>-->
      <p>Click the links to see demo <a href="login-screen.html" target="_blank">Responsive Login Screen</a></p>

      <p>Code example:</p>
      <pre><code>
  &lt;div class=&quot;container-fluid ctd-login&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;ctd-left-nav&quot;&gt;
        &lt;h1 class=&quot;ctd-title&quot;&gt;Header&lt;/h1&gt;

        &lt;div class=&quot;panel-body&quot;&gt;
          &lt;form accept-charset=&quot;utf-8&quot; action=&quot;#&quot; method=&quot;POST&quot;&gt;
            &lt;div class=&quot;form-group&quot;&gt;
              &lt;input type=&quot;email&quot; class=&quot;form-control&quot; id=&quot;userName&quot; name=&quot;userName&quot; placeholder=&quot;Email address&quot;&gt;
            &lt;/div&gt;
            &lt;div class=&quot;form-group&quot;&gt;
              &lt;input type=&quot;password&quot; class=&quot;form-control&quot; id=&quot;password&quot; name=&quot;password&quot; placeholder=&quot;Password&quot;&gt;
            &lt;/div&gt;
            &lt;div class=&quot;form-group&quot;&gt;
              &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Sign in&lt;/button&gt;
            &lt;/div&gt;
            &lt;div class=&quot;form-group&quot;&gt;
              &lt;div class=&quot;checkbox&quot;&gt;
                &lt;input type=&quot;checkbox&quot; id=&quot;remember&quot;&gt;
                &lt;label for=&quot;remember&quot; class=&quot;&quot;&gt;&lt;span class=&quot;checkbox-icon&quot;&gt;&lt;/span&gt; Remember me&lt;/label&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;form-group ctd-form-links&quot;&gt;
              &lt;a href=&quot;/forgot/&quot;&gt;Forgot password?&lt;/a&gt;
              &lt;span&gt;|&lt;/span&gt;
              &lt;a href=&quot;/register/?loginProcess=registerUser&quot;&gt;Register&lt;/a&gt;
            &lt;/div&gt;
          &lt;/form&gt;

          &lt;p class=&quot;ctd-social-signins&quot;&gt;
            Sign in with
            &lt;a href=&quot;&quot; class=&quot;ctd-facebook fa fa-facebook&quot;&gt;&lt;/a&gt;
            &lt;a href=&quot;&quot; class=&quot;ctd-twitter fa fa-twitter&quot;&gt;&lt;/a&gt;
            &lt;a href=&quot;&quot; class=&quot;ctd-linkedin fa fa-linkedin&quot;&gt;&lt;/a&gt;
          &lt;/p&gt;

        &lt;/div&gt;
        &lt;h2 class=&quot;ctd-logo&quot;&gt;&lt;img src=&quot;../images/causeway_logo_black.svg&quot; alt=&quot;Causeway Logo&quot;&gt;&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class=&quot;ctd-right-content&quot;&gt;
        &lt;h2 class=&quot;ctd-caption&quot;&gt;Putting business content to work&lt;/h2&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
      </code></pre>
      <br/>

      <p>Class <code>.login-image</code> controls the background image of the login page.</p>

      <p>If you need to change this image then define class <code>.login-image</code> in respective application css to
        overrule the default</p>

      <p>Code example: </p>
      <pre><code>
  .login-container .login-image {
    background: url(&quot;image url&quot;) no-repeat scroll center center transparent;;
  }
      </code></pre>

      <header class="content-header">
        <h1 class="title" id="deprecated-login-page">Deprecated Login Page from v1.0.6-0</h1>
      </header>
      <!--<p>Older version of login page <a href="#deprecated-login-page">v1.0.6-0</a> &#45;&#45; <strong>Deprecated</strong></p>-->
      <p>This login page is from the old version and is marked deprecated. We are still supporting it so that upgrading to new version is easier.</p>
      <p>We strongly recommend to migrate to one of the new login page at the earliest.</p>
      <p>Click to see the demo page <a href="login_v1.0.6-0.html" target="_blank">Login_v1.0.6-0</a> <strong>--Deprecated</strong></p>

      <h3 class="title">Code:</h3>
      <pre><code>
  &lt;div class=&quot;login-container login-image&quot;&gt;
    &lt;div class=&quot;login-window&quot;&gt;
      &lt;h2&gt;Log In&lt;/h2&gt;

      &lt;div class=&quot;login-form&quot;&gt;
        &lt;form class=&quot;form-inline&quot;&gt;
          &lt;div class=&quot;form-row&quot;&gt;
            &lt;div class=&quot;form-group&quot;&gt;
              &lt;div class=&quot;control-input&quot;&gt;
                &lt;input type=&quot;email&quot; id=&quot;LoginName&quot; class=&quot;form-control&quot; name=&quot;username&quot; value=&quot;&quot; maxlength=&quot;50&quot; size=&quot;30&quot; placeholder=&quot;Username or Email&quot;&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;form-row&quot;&gt;
            &lt;div class=&quot;form-group&quot;&gt;
              &lt;div class=&quot;control-input&quot;&gt;
                &lt;input type=&quot;password&quot; id=&quot;password&quot; class=&quot;form-control&quot; name=&quot;password&quot; value=&quot;&quot; maxlength=&quot;30&quot; size=&quot;30&quot; placeholder=&quot;Password&quot;&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;form-row&quot;&gt;
            &lt;div class=&quot;form-group clearfix&quot;&gt;
              &lt;div class=&quot;pull-left&quot;&gt;
                &lt;button type=&quot;button&quot; class=&quot;btn btn-text btn-italic has-tooltip&quot; title=&quot;&quot; id=&quot;forgotPasswordButton&quot; data-original-title=&quot;Click here to reset your password&quot;&gt;Forgot Password?&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class=&quot;pull-right&quot;&gt;
                &lt;button type=&quot;button&quot; class=&quot;btn btn-default has-tooltip&quot; title=&quot;&quot; id=&quot;submitButton&quot; data-original-title=&quot;Click here to log in&quot;&gt;Log In&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;form-row&quot;&gt;
            &lt;div class=&quot;form-group&quot;&gt;
              &lt;div class=&quot;control-input&quot;&gt;
                &lt;div class=&quot;checkbox form-group form-group-inline&quot;&gt;
                  &lt;input type=&quot;checkbox&quot; id=&quot;spass&quot;&gt;
                  &lt;label for=&quot;spass&quot; class=&quot;&quot;&gt;&lt;span class=&quot;checkbox-icon&quot;&gt;&lt;/span&gt;Save Password&lt;/label&gt;
                &lt;/div&gt;
                &lt;div class=&quot;checkbox form-group form-group-inline&quot;&gt;
                  &lt;input type=&quot;checkbox&quot; id=&quot;suser&quot;&gt;
                  &lt;label for=&quot;suser&quot;&gt;&lt;span class=&quot;checkbox-icon&quot;&gt;&lt;/span&gt;Save Username&lt;/label&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;

          &lt;div id=&quot;message&quot;&gt;&lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;copyright&quot;&gt;Copyright &copy; 1999-2015 Causeway Software Solutions Limited.&lt;/div&gt;
  &lt;/div&gt;
      </code></pre>
      <p>Please define the application background image in a CSS class <code>.login-image</code> and include in the application css.</p>
      <pre><code>
  .login-image {
    background: url("image url") no-repeat scroll center center transparent;;
  }
      </code></pre>
    </section>
  </div>
</div>

<!--(bake includes/footer.html)-->