SOGoRootPage.wox

<?xml version="1.0" standalone="yes"?>
<!DOCTYPE var:component>
<var:component
    className="UIxPageFrame"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:var="http://www.skyrix.com/od/binding"
    xmlns:const="http://www.skyrix.com/od/constant"
    xmlns:rsrc="OGo:url"
    xmlns:label="OGo:label"
    const:jsFiles="Main.js, Common.js"
    >
  <!--
      MAIN CONTENT ROW
      Content of the application view injected injected in the element bellow
      MUST be the first html element after body
      SHOULD  be a main tag (with role="main")
  -->
  <main class="view md-layout-fill md-layout-padding" ui-view="login" layout="row" layout-align="center start">
    <md-content class="md-padding" md-scroll-y="true">
      <div ng-controller="loginController">

        <script type="text/javascript">
          var cookieUsername = '<var:string var:value="cookieUsername" const:escapeHTML="NO"/>';
        </script>
        <!--   <div id="aboutBox" style="display:none;">
             <div>
             <p class="logo"><img const:alt="SOGo" rsrc:src="img/sogo-logo.png"/></p>
             <p>Version <var:string value="version"/> <span class="buildDate">(<var:string value="buildDate" />)</span></p>
             <p class="scroll"><var:string label:value="AboutBox" const:escapeHTML="NO"/></p>
             <img const:alt="Inverse" rsrc:src="img/inverse.png"/>
             <p class="links"><a href="http://sogo.nu/" target="_new">sogo.nu</a> / 
             <a href="http://inverse.ca/" target="_new">inverse.ca</a></p>
             <p><a id="aboutClose" href="#" class="button">
             <span><var:string label:value="OK" /></span></a></p>
             </div>
             </div> -->
        <!-- <nav class="top-bar">
             <section class="top-bar-section">
             <ul class="right">
             <li><a href="#"><var:string label:value="About" /></a></li>
             </ul>
             </section>
             </nav> -->
        <div id="login">
          <div id="logo">
            <img const:alt="*" id="splash" rsrc:src="img/sogo-full.svg"/>
          </div>

          <form name="loginForm" layout="column"
                ng-cloak="ng-cloak"
                ng-controller="loginController"
                ng-submit="login(creds)">
            <var:if condition="hasLoginSuffix">
              <input type="hidden" ng-model="creds.loginSuffix" var:value="loginSuffix"/>
            </var:if>
            <div ng-show="warning" ng-cloak="ng-cloak" alert="alert" class="alert-box radius warning">{{warning}}</div>
            <md-input-container>
              <label>
                <var:string label:value="Username"/>
              </label>
              <input autocapitalize="off" type="text" ng-model="creds.username" required="required" />
            </md-input-container>
            <md-input-container>
              <label>
                <var:string label:value="Password"/>
              </label>
              <input type="password" ng-model="creds.password" required="required" />
            </md-input-container>

            <!-- CONNECT BUTTON -->
            <div layout="row" layout-align="end center">
              <md-button class="md-raised" type="submit" ng-disabled='!loginForm.$valid'>
                <span>
                  <var:string label:value="Connect"/>
                </span>
              </md-button>
            </div>

            <!-- LANGUAGES SELECT -->
            <div layout="row" layout-align="start end">
              <md-input-container>
                <label class="login-lang">
                  <var:string label:value="Language"/>
                </label>
                <md-select flex="true" ng-model="creds.language">
                  <var:foreach list="languages" item="item">
                    <md-option var:value="item">
                      <var:string value="languageText"/>
                    </md-option>
                  </var:foreach>
                </md-select>
              </md-input-container>
            </div>

            <!-- DOMAINS SELECT -->
            <var:if condition="hasLoginDomains">
              <div layout="row" layout-align="start end">
	        <label>
                <var:string label:value="Domain"/>
              </label>
              <md-select flex="true" ng-model="creds.domain" label:placeholder="choose">
                <var:foreach list="loginDomains" item="item">
                  <md-option var:value="item">
                    <var:string value="item"/>
                  </md-option>
                </var:foreach>
              </md-select>
              </div>
	    </var:if>
            
            <div layout="row" layout-align="center center">
              <md-switch ng-model="creds.rememberLogin" label:arial-label="Remember username">
                <var:string label:value="Remember username"/>
              </md-switch>
            </div>
          </form>
          <div layout="row" layout-align="end end" ng-cloak="ng-cloak">
            <md-button class="sg-icon-button fg-sogoPaper-500"
                       label:aria-label="About"
                       ng-click="showAbout()">
              <md-icon class="material-icons fg-sogoPaper-500">info</md-icon>
            </md-button>
          </div>
        </div>
      </div>
    </md-content>
  </main>

  <script type="text/ng-template" id="aboutBox.html">
    <md-dialog flex="50">
      <md-dialog-content>
        <p><a href="http://sogo.nu/" target="_new">sogo.nu</a></p>
        <p>Version <var:string value="version"/> (<var:string value="buildDate" />)</p>
        <br/>
        <p><var:string label:value="AboutBox" const:escapeHTML="NO"/></p>
        <!--<img class="full-image" const:alt="Inverse" rsrc:src="img/inverse.png"/>-->
      </md-dialog-content>
      <div class="md-actions">
        <md-button ng-click="closeDialog()"><var:string label:value="Close"/></md-button>
      </div>
    </md-dialog>
  </script>

</var:component>