From 6970acfaa4d1179b2ce02b85186b92a6cd2c64d3 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Thu, 19 Jun 2014 15:52:57 -0400
Subject: [PATCH] AngularJS-based templates

---
 UI/Templates/ContactsUI/UIxContactEditor.wox  | 399 +----------
 .../ContactsUI/UIxContactFoldersView.wox      | 631 ++++++++++++++----
 UI/Templates/MainUI/SOGoRootPage.wox          | 105 ++-
 UI/Templates/UIxPageFrame.wox                 | 306 +++++----
 4 files changed, 718 insertions(+), 723 deletions(-)

diff --git a/UI/Templates/ContactsUI/UIxContactEditor.wox b/UI/Templates/ContactsUI/UIxContactEditor.wox
index 893b94ddd..b3b134750 100644
--- a/UI/Templates/ContactsUI/UIxContactEditor.wox
+++ b/UI/Templates/ContactsUI/UIxContactEditor.wox
@@ -1,400 +1,11 @@
 <?xml version='1.0'?>
-<!DOCTYPE var:component>
-<var:component
+<!DOCTYPE container>
+<container
   xmlns="http://www.w3.org/1999/xhtml"
   xmlns:var="http://www.skyrix.com/od/binding"
   xmlns:const="http://www.skyrix.com/od/constant"
-  xmlns:uix="OGo:uix"
-  xmlns:label="OGo:label"
-  className="UIxPageFrame"
-  title="name"
-  const:userDefaultsKeys="SOGoRefreshViewCheck, SOGoContactsCategories"
-  const:popup="YES"
-  const:cssFiles="datepicker.css"
-  const:jsFiles="datepicker.js">
+  xmlns:label="OGo:label">
 
-  <div class="menu" id="categoriesMenu">
-  </div>
+<div>foo</div>
 
-  <form var:href="saveURL" name="editform" id="mainForm">
-    <var:if condition="isNew">
-      <div id="addressBookSelector">
-        <style type="text/css">DIV#editorTabs { top: 30px; };</style>
-        <var:string label:value="Add to:"/>
-        <var:popup const:id="addressBooksList"
-          list="addressBooksList" item="addressBookItem"
-          string="addressBookDisplayName"
-          var:selection="componentAddressBook"/>
-      </div>
-    </var:if>
-
-    <div class="tabsContainer" id="editorTabs">
-      <ul>
-        <li target="baseInfos">
-          <span><var:string label:value="Contact" /></span>
-        </li>
-        <var:if condition="supportCategories">
-          <li target="categoryInfos">
-            <span><var:string label:value="Categories" /></span>
-          </li>
-        </var:if>
-        <li target="addressesInfos">
-          <span><var:string label:value="Address" /></span>
-        </li>
-        <var:if condition="supportPhotos">
-          <li target="photos">
-            <span><var:string label:value="Photos" /></span>
-          </li>
-        </var:if>
-        <li target="otherInfos">
-          <span><var:string label:value="Other" /></span>
-        </li>
-      </ul>
-      
-      <div class="tabs">
-        <div id="baseInfos" class="tab">
-          <span class="caption"><var:string label:value="Name" /></span>
-          <table class="frame">
-            <tr>
-              <td>
-                <label><var:string label:value="First:" />
-                  <input type="text" class="textField" name="givenname"
-                    id="givenname"
-                    var:value="ldifRecord.givenname"
-                    /></label>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <label><var:string label:value="Last:" />
-                  <input type="text" class="textField" name="sn" id="sn"
-                    var:value="ldifRecord.sn"
-                    /></label>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <label><var:string label:value="Display:" />
-                  <input type="text" class="textField" name="displayname" id="displayname"
-                    var:value="ldifRecord.displayname"
-                    /></label>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <label><var:string label:value="Nickname:" />
-                  <input type="text" class="textField" name="mozillanickname" id="mozillanickname"
-                    var:value="ldifRecord.mozillanickname"
-                    /></label>
-              </td>
-            </tr>
-          </table>
-          <span class="caption"><var:string label:value="Internet" /></span>
-          <table class="frame" id="emailInfos">
-            <tr>
-              <td>
-                <label><var:string label:value="Email:" />
-                  <input type="text" class="textField" name="mail" id="mail"
-                    var:value="ldifRecord.mail"
-                    /></label>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <label><var:string label:value="Additional Email:" />
-                  <input type="text" class="textField" name="mozillasecondemail"
-                    id="mozillasecondemail" var:value="ldifRecord.mozillasecondemail"
-                    /></label>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <label><var:string label:value="Screen Name:"
-                    />
-                  <input type="text" class="textField" name="nsaimid"
-                    id="nsaimid" var:value="ldifRecord.nsaimid"
-                    /></label>
-              </td>
-            </tr> 
-            <tr>
-              <td id="htmlMailFormat">
-                <label><var:string
-                    label:value="Prefers to receive messages formatted as:" />
-                  <var:popup list="htmlMailFormatList" item="item"
-                    label:noSelectionString="htmlMailFormat_UNKNOWN"
-                    string="itemHtmlMailFormatText"
-                    selection="ldifRecord.mozillausehtmlmail"
-                   /></label>
-              </td>
-            </tr>
-          </table>
-          <span class="caption"><var:string label:value="Phones" /></span>
-          <table class="frame">
-            <tr>
-              <td>
-                <label><var:string label:value="Work:" />
-                  <input type="text" class="textField"
-                    name="telephonenumber"
-                    id="telephonenumber"
-                    var:value="ldifRecord.telephonenumber"
-                    /></label>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <label><var:string label:value="Home:" />
-                  <input type="text" class="textField"
-                    name="homephone" id="homephone"
-                    var:value="ldifRecord.homephone"
-                    /></label>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <label><var:string label:value="Fax:" />
-                  <input type="text" class="textField"
-                    name="facsimiletelephonenumber"
-                    id="facsimiletelephonenumber"
-                    var:value="ldifRecord.facsimiletelephonenumber"
-                    /></label>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <label><var:string label:value="Pager:" />
-                  <input type="text" class="textField"
-                    name="pager"
-                    id="pager"
-                    var:value="ldifRecord.pager"
-                    /></label>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <label><var:string label:value="Mobile:" />
-                  <input type="text" class="textField" name="mobile" id="mobile"
-                    var:value="ldifRecord.mobile"
-                    /></label>
-              </td>
-            </tr>
-          </table>
-        </div>
-        
-        <var:if condition="supportCategories">
-          <div id="categoryInfos" class="tab">
-            <div id="categoryContainer"><!-- spacer --></div>
-            <var:if condition="canCreateOrModify">
-              <input type="text" class="textField" id="emptyCategory"
-              const:readonly="readonly"
-              const:name="emptyCategory"
-              const:value="" />
-            </var:if>
-            <script type="text/javascript">
-              var gCategories = <var:string value="contactCategoriesList" const:escapeHTML="NO" />;
-            </script>
-          <input type="hidden" id="jsonContactCategories"
-              const:name="jsonContactCategories"
-              var:value="jsonContactCategories" />
-          </div></var:if>
-
-        <div id="addressesInfos" class="tab">
-          <span class="caption"><var:string label:value="Home"/></span>
-          <table class="frame">
-            <tr>
-              <td colspan="2">
-                <label><var:string label:value="Address:" />
-                  <input type="text" class="textField" name="mozillahomestreet"
-                    id="mozillahomestreet"
-                    var:value="ldifRecord.mozillahomestreet"
-                    /></label>
-              </td>
-            </tr>
-            <tr>
-              <td colspan="2">
-                <label>
-                  <input type="text" class="textField" namCe="mozillahomestreet2"
-                    id="mozillahomestreet2"
-                    var:value="ldifRecord.mozillahomestreet2"
-                    /></label>
-              </td>
-            </tr>
-            <tr>
-              <td colspan="2">
-                <label><var:string label:value="City:" />
-                  <input type="text" class="textField" name="mozillahomelocalityname"
-                    id="mozillahomelocalityname"
-                    var:value="ldifRecord.mozillahomelocalityname"
-                    /></label>
-              </td>
-            </tr>
-            <tr>
-              <td class="firstColumn">
-                <label><var:string label:value="State_Province:" />
-                  <input type="text" class="textField" name="mozillahomestate"
-                    id="mozillahomestate"
-                    var:value="ldifRecord.mozillahomestate"
-                    /></label>
-              </td>
-              <td class="secondColumn">
-                <label><var:string
-                    label:value="ZIP_Postal Code:"
-                    />
-                  <input type="text" class="textField" name="mozillahomepostalcode"
-                    id="mozillahomepostalcode"
-                    var:value="ldifRecord.mozillahomepostalcode"
-                    /></label>
-              </td>
-            </tr>
-            <tr>
-              <td colspan="2">
-                <label><var:string label:value="Country:" />
-                  <input type="text" class="textField" name="mozillahomecountryname"
-                    id="mozillahomecountryname"
-                    var:value="ldifRecord.mozillahomecountryname"
-                    /></label>
-              </td>
-            </tr>
-            <tr>
-              <td colspan="2">
-                <label>
-                  <var:string label:value="Web Page:" />
-                  <input type="text" class="textField" name="mozillahomeurl"
-                    var:value="ldifRecord.mozillahomeurl"
-                    /></label>
-              </td>
-            </tr>
-          </table> 
-          <span class="caption"><var:string label:value="Work" /></span>
-          <table class="frame">
-            <tr>
-              <td colspan="2">
-                <label>
-                  <var:string label:value="Title:" />
-                  <input type="text" class="textField" name="title"
-                    id="title"
-                    var:value="ldifRecord.title"
-                    /></label>
-              </td>
-            </tr>
-            <tr>
-              <td colspan="2">
-                <label>
-                  <var:string label:value="Department:" />
-                  <input type="text" class="textField" name="ou"
-                    id="ou"
-                    var:value="ldifRecord.ou"
-                    /></label>
-              </td>
-            </tr>
-            <tr>
-              <td colspan="2">
-                <label><var:string label:value="Organization:" />
-                  <input type="text" class="textField" name="o"
-                    id="o" var:value="ldifRecord.o"
-                    /></label>
-              </td>
-            </tr>
-            <tr>
-              <td colspan="2">
-                <label><var:string label:value="Address:" />
-                  <input type="text" class="textField" name="street"
-                    id="street"
-                    var:value="ldifRecord.street"
-                    /></label>
-              </td>
-            </tr>
-            <tr>
-              <td colspan="2">
-                <label>
-                  <input type="text" class="textField" name="mozillaworkstreet2"
-                    id="mozillaworkstreet2" var:value="ldifRecord.mozillaworkstreet2"
-                    /></label>
-              </td>
-            </tr>
-            <tr>
-              <td colspan="2">
-                <label><var:string label:value="City:" />
-                  <input type="text" class="textField" name="l"
-                    id="l" var:value="ldifRecord.l"
-                    /></label>
-              </td>
-            </tr>
-            <tr>
-              <td class="firstColumn">
-                <label><var:string label:value="State_Province:" />
-                  <input type="text" class="textField" name="st"
-                    id="st" var:value="ldifRecord.st"
-                    /></label>
-              </td>
-              <td class="secondColumn">
-                <label><var:string
-                    label:value="ZIP_Postal Code:"
-                    />
-                  <input type="text" class="textField" name="postalcode"
-                    id="postalcode" var:value="ldifRecord.postalcode"
-                    /></label>
-              </td>
-            </tr>
-            <tr>
-              <td colspan="2">
-                <label><var:string label:value="Country:" />
-                  <input type="text" class="textField" name="c"
-                    id="c" var:value="ldifRecord.c"
-                    /></label>
-              </td>
-            </tr>
-            <tr>
-              <td colspan="2">
-                <label><var:string label:value="Web Page:" />
-                  <input type="text" class="textField" name="mozillaworkurl"
-                    var:value="ldifRecord.mozillaworkurl"/>
-                </label>
-              </td>
-            </tr>
-          </table>
-        </div>
-
-        <var:if condition="supportPhotos">
-          <div id="photos" class="tab">
-            <var:if condition="hasPhoto">
-              <img var:src="photoURL" class="contactPhoto"/>
-            </var:if>
-          </div>
-        </var:if>
-        
-        <div id="otherInfos" class="tab">
-          <table class="framenocaption">
-            <tr>
-              <td>
-                <div>
-                  <label id="birthdayLabel"><var:string label:value="Birthday (yyyy-mm-dd):"/></label>
-                  <var:component className="UIxDatePicker"
-                    const:dateID="birthdayDate"
-                    day="ldifRecord.birthday"
-                    month="ldifRecord.birthmonth"
-                    year="ldifRecord.birthyear"
-                    label:label="browse birthday"/>
-                </div>
-              </td>
-            </tr>
-           <tr>
-              <td>
-                <label><var:string label:value="Note:" /></label>
-                <textarea rows="23" var:value="ldifRecord.description" name="note" id="note"></textarea>
-              </td>
-            </tr>
-          </table>
-        </div>
-      </div>
-    </div>
-    <div id="buttons">
-      <var:if condition="canCreateOrModify">
-        <a class="button" name="submit" id="submitButton">
-          <span><var:string label:value="Save" /></span>
-        </a></var:if>
-      <a id="cancelButton" class="button" name="cancel">
-        <span><var:string label:value="Cancel"/></span>
-      </a>
-    </div>
-  </form>
-</var:component>
+</container>
diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
index 323badb7d..edbbd06b8 100644
--- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox
+++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -1,173 +1,536 @@
 <?xml version='1.0' standalone='yes'?>
 <!DOCTYPE var:component>
 <var:component
-  xmlns="http://www.w3.org/1999/xhtml"
-  xmlns:var="http://www.skyrix.com/od/binding"
-  xmlns:const="http://www.skyrix.com/od/constant"
-  xmlns:uix="OGo:uix"
-  xmlns:label="OGo:label"
-  xmlns:rsrc="OGo:url"
-  const:userDefaultsKeys="SOGoContactsCategories"
-  const:jsFiles="jquery-ui.js"
-  className="UIxPageFrame"
-  title="name"
-  var:popup="isPopup">
-  <style type="text/css">
+    xmlns="http://www.w3.org/1999/xhtml"
+    xmlns:var="http://www.skyrix.com/od/binding"
+    xmlns:const="http://www.skyrix.com/od/constant"
+    xmlns:uix="OGo:uix"
+    xmlns:label="OGo:label"
+    xmlns:rsrc="OGo:url"
+    const:userDefaultsKeys="SOGoContactsCategories"
+    const:jsFiles="SOGo/resource.js, Contacts/contact-model.js, Contacts/addressbook-model.js"
+    className="UIxPageFrame"
+    title="name"
+    var:popup="isPopup">
+  <!--<style type="text/css">
     <var:if condition="horizontalDragHandleStyle">
       DIV#dragHandle, DIV#rightPanel
       { left: <var:string value="horizontalDragHandleStyle" />; }
       DIV#contactFoldersList
       { width: <var:string value="horizontalDragHandleStyle" />; }
-    </var:if><var:if condition="verticalDragHandleStyle">
+      </var:if><var:if condition="verticalDragHandleStyle">
       DIV#rightDragHandle, DIV#contactView
       { top: <var:string value="verticalDragHandleStyle" />; }
-    </var:if><var:if condition="contactsListContentStyle">
+      </var:if><var:if condition="contactsListContentStyle">
       DIV#contactsListContent
       { height: <var:string value="contactsListContentStyle" />; }
-    </var:if><var:if condition="isPopup">
+      </var:if><var:if condition="isPopup">
     </var:if>
-  </style>
+  </style>-->
+  <script type="text/javascript">
+    var contactFolders = <var:string value="contactFolders" const:escapeHTML="NO"/>;
+  </script>
 
   <div id="uploadDialog" style="display: none" class="dialog left">
     <div>
       <h3><var:string label:value="Import Cards"/></h3>
       <p class="prompt"><var:string label:value="Select a vCard or LDIF file."/></p>
       <form const:href="" name="uploadForm" id="uploadForm" method="post"
-        enctype="multipart/form-data"
-        onsubmit="return AIM.submit(this, {'onStart' : validateUploadForm, 
-        'onComplete' : uploadCompleted})">
-        <p class="prompt"><input type="file" name="contactsFile" id="contactsFile" class="textField" />
-          <a href="#" class="button actionButton" id="uploadSubmit"
-            onclick="if($('uploadForm').onsubmit()) $('uploadForm').submit()">
-            <span><var:string label:value="Upload" /></span></a>
-          <a href="#" class="button" const:id="uploadCancel">
-            <span><var:string label:value="Cancel" /></span></a></p>
+            enctype="multipart/form-data"
+            onsubmit="return AIM.submit(this, {'onStart' : validateUploadForm,
+                      'onComplete' : uploadCompleted})">
+        <p class="prompt"><input type="file" name="contactsFile" id="contactsFile" class="textField" required="required" />
+        <a href="#" class="button actionButton" id="uploadSubmit"
+           onclick="if($('uploadForm').onsubmit()) $('uploadForm').submit()">
+        <span><var:string label:value="Upload" /></span></a>
+        <a href="#" class="button" const:id="uploadCancel">
+        <span><var:string label:value="Cancel" /></span></a></p>
       </form>
       <hr/>
     </div>
   </div>
 
-  <div id="uploadResults" style="display: none" class="dialog left">
+  <div id="uploadResults" data-dropdown-content="dropdown-content" class="f-dropdown content">
     <div>
       <h3><var:string label:value="Import Cards"/></h3>
       <p id="uploadResultsContent"><!-- empty --></p>
       <p><a href="#" class="button" const:id="uploadOK">
-          <span><var:string label:value="Done" /></span></a></p>
+      <span><var:string label:value="Done" /></span></a></p>
       <hr/>
     </div>
   </div>
-  
-  <div class="menu" id="contactFoldersMenu">
-    <ul>
-      <li><var:string label:value="Properties" /></li>
-      <li><!-- separator --></li>
-      <li><var:string label:value="New Card" /></li>
-      <li><var:string label:value="New List" /></li>
-      <li><!-- separator --></li>
-      <li><var:string label:value="Delete" /></li>
-      <li><!-- separator --></li>
-      <li><var:string label:value="Export Address Book..."/></li>
-      <li><var:string label:value="Import Cards" /></li>
-      <li><!-- separator --></li>
-      <li><var:string label:value="Sharing..." /></li>
-    </ul>
-  </div>
 
-  <div class="menu" id="contactMenu">
-    <ul>
-      <li><var:string label:value="Edit" /></li>
-      <li><var:string label:value="Categories" /></li>
-      <li><!-- separator --></li>
-      <li><var:string label:value="Write" /></li>
-      <li><var:string label:value="Instant Message" /></li>
-      <li><!-- separator --></li>
-      <li><var:string label:value="Delete" /></li>
-      <li><!-- separator --></li>
-      <li><var:string label:value="Move To" /></li>
-      <li><var:string label:value="Copy To" /></li>
-      <li><var:string label:value="Export" /></li>
-      <li><var:string label:value="View Raw Source" /></li>
-    </ul>
-  </div>
+  <ul class="f-dropdown" data-dropdown-content="dropdown-content" id="contactFoldersMenu">
+    <li><var:string label:value="Properties" /></li>
+    <li><!-- separator --></li>
+    <li><var:string label:value="New Card" /></li>
+    <li><var:string label:value="New List" /></li>
+    <li><!-- separator --></li>
+    <li><var:string label:value="Delete" /></li>
+    <li><!-- separator --></li>
+    <li><var:string label:value="Export Address Book..."/></li>
+    <li><var:string label:value="Import Cards" /></li>
+    <li><!-- separator --></li>
+    <li><var:string label:value="Sharing..." /></li>
+  </ul>
 
-  <div id="contactFoldersList">
-    <h6><var:string label:value="Address Books" /></h6>
-    <div id="abToolbar">
-      <a href="#" class="smallToolbarButton"
-         ><span><img rsrc:src="add-addressbook.png" label:title="New Addressbook..."
-         /></span></a>
-      <a href="#" class="smallToolbarButton"
-         ><span><img rsrc:src="add-user-addressbook.png" label:title="Subscribe to an Addressbook..."
-         /></span></a>
-      <a href="#" class="smallToolbarButton"
-         ><span><img rsrc:src="remove-addressbook.png" label:title="Remove the selected Addressbook"
-         /></span></a>
-    </div>
-    <ul id="contactFolders">
-      <var:foreach list="contactFolders" item="currentFolder"
-        ><li var:id="currentContactFolderId"
-          var:owner="currentContactFolderOwner"
-          var:class="currentContactFolderClass"
-          var:acl-editing="currentContactFolderAclEditing"
-          var:list-editing="currentContactFolderListEditing"
-          ><span><var:string value="currentContactFolderName"/></span></li
-          ></var:foreach
-        >
-    </ul>
-    <var:if condition="hasContactSelectionButtons">
-      <div class="contactSelection">
-        <var:component value="selectorComponent" />
+  <ul class="f-dropdown" data-dropdown-content="dropdown-content" id="contactMenu">
+    <li><var:string label:value="Properties" /></li>
+    <li><var:string label:value="Categories" /></li>
+    <li><!-- separator --></li>
+    <li><var:string label:value="Write" /></li>
+    <li><var:string label:value="Instant Message" /></li>
+    <li><!-- separator --></li>
+    <li><var:string label:value="Delete" /></li>
+    <li><!-- separator --></li>
+    <li><var:string label:value="Move To" /></li>
+    <li><var:string label:value="Copy To" /></li>
+    <li><var:string label:value="Export" /></li>
+    <li><var:string label:value="View Raw Source" /></li>
+  </ul>
+
+  <div data-ng-app="SOGo">
+        <!--<tabset>
+          <tab heading="info" id="addressBook_info">
+            <form name="addressbookForm" href="" data-ng-show="addressbook.isEditable" data-ng-submit="save()">
+              <label>Addressbook name
+              <input type="text" data-ng-model="addressbook.name"/>
+              </label>
+              <input type="submit" class="button tiny" label:value="Save"/>
+            </form>
+          </tab>
+          <tab heading="links">
+            <label>CardDAV
+            <span>http..</span></label>
+          </tab>
+        </tabset>-->
+    <div data-ng-controller="addressbooksList">
+      <div id="addressbookProperties" class="f-dropdown icons-dropdown" data-dropdown-content="dropdown-content">
+        <ul class="button-group">
+          <li><span class="button"><i class="icon-hyperlink"><!-- links --></i></span></li>
+          <li><span class="button"><i class="icon-pencil" data-ng-click="rename()"><!-- rename --></i></span></li>
+          <li><span class="button" data-ng-click="sharing()"><i class="icon-earth"><!-- share --></i></span></li>
+          <li><span class="button"><i class="icon-trash"><!-- delete --></i></span></li>
+        </ul>
       </div>
-    </var:if>
-  </div>
-
-  <div class="dragHandle" id="dragHandle"><!-- space --></div>
-
-  <div id="rightPanel">
-    <var:component className="UIxContactsFilterPanel" qualifier="qualifier" />
-
-    <div id="contactsListContent">
-      <table id="contactsList" cellspacing="0">
-	<thead>
-	  <tr class="tableview">
-	    <!-- localize -->
-	    <td class="tbtv_headercell sortableTableHeader" id="nameHeader"
-		><img id="messageSortImage" class="sortImage" rsrc:src="arrow-up.png"
-		/><var:string label:value="Name"
-	    /></td
-	    ><td class="tbtv_headercell sortableTableHeader" id="mailHeader"
-	    ><var:string label:value="Email"/></td
-	    ><td class="tbtv_headercell sortableTableHeader" id="screenNameHeader"
-	    ><var:string label:value="Screen Name" /></td
-	    ><td class="tbtv_headercell sortableTableHeader" id="orgHeader"
-	    ><var:string label:value="Organization" /></td
-	    ><td class="tbtv_headercell sortableTableHeader" id="phoneHeader"
-	    ><var:string label:value="Preferred Phone" /></td
-	    ></tr>
-	</thead>
-	<tbody id="contactsListTbody">
-
-      <var:foreach list="personalContactInfos" item="currentContact">
-        <tr var:class="currentContactClasses"
-          var:categories="currentContact.c_categories.asSafeJSString"
-          var:id="currentContact.c_name.asCSSIdentifier"
-          var:contactname="currentContact.c_cn.asSafeJSString">
-          <td class="displayName" var:title="currentContact.c_cn.asSafeJSString"><var:string value="currentContact.c_cn" const:escapeHTML="YES" /></td>
-          <td var:title="currentContact.c_mail.asSafeJSString"><var:string value="currentContact.c_mail"/></td>
-          <td><var:string value="currentContact.c_screenname"/></td>
-          <td><var:string value="currentContact.c_o"/></td>
-          <td><var:string value="currentContact.c_telephonenumber"/></td>
-        </tr>
-      </var:foreach>
-
-	</tbody>
-      </table>
+      <script type="text/ng-template" id="addressbookSharing.html">
+        <h2>Awesome. I have it.</h2>
+        <p class="lead">Your couch.  It is mine.</p>
+        <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
+        <span class="close-reveal-modal" data-ng-click="closeModal()"><i class="icon-close"><!-- close --></i></span>
+      </script>
+    <div id="addressbooksList" class="folders-list">
+      <div class="newItemsToolbar">
+        <a href="#" class="button tiny radius split"><var:string label:value="New Card"/><span data-dropdown="newListDrop"></span></a><br/>
+        <ul id="newListDrop" class="f-dropdown" data-dropdown-content="dropdown-content">
+          <li><a href="#"><var:string label:value="New List"/></a></li>
+        </ul>
+      </div>
+      <!--<h6><var:string label:value="Address Books" /></h6>-->
+      <ul id="contactFolders">
+        <!--<li data-ng-repeat="folder in addressbooks"
+            data-ng-class="{local: !folder.isRemote, remote: folder.isRemote, _selected: addressbook.id==folder.id}"
+            data-ng-dblclick="rename($index)">
+          <a href="#" data-dropdown-toggle="#addressbookProperties" data-options="align:right" data-ng-show="addressbook.id==folder.id"><i class="icon-more"> more </i></a>
+          <a href="#/{{folder.id}}"
+             data-ng-click="select($index)"
+             data-ng-show="editMode!=folder.id"
+             data-ng-cloak="ng-cloak"><i data-ng-class="{'icon-earth': folder.isRemote, 'icon-address-book': folder.isEditable}"> remote </i> {{folder.name}}</a>
+          <input type="text" name="folderName" data-ng-model="folder.name" data-ng-show="editMode==folder.id" data-sg-focus-on="folderName"/>
+        </li>-->
+        <li data-ng-repeat="folder in addressbooks"
+            data-ng-class="{local: !folder.isRemote, remote: folder.isRemote, _selected: addressbook.id==folder.id}"
+            data-ng-dblclick="rename($index)">
+          <div>
+            <span class="folder">
+              <a href="#/{{folder.id}}"
+                 data-ng-click="select($index)"
+                 data-ng-show="editMode!=folder.id"
+                 data-ng-cloak="ng-cloak"><i class="inline" data-ng-class="{'icon-earth': folder.isRemote, 'icon-address-book': folder.isEditable}"><!-- remote --></i> {{folder.name}}</a>
+              <input type="text" data-ng-model="folder.name" data-ng-show="editMode==folder.id"/>
+            </span>
+            <span class="actions">
+              <a href="#" data-dropdown-toggle="#addressbookProperties" data-options="align:right" data-ng-show="addressbook.id==folder.id"><i class="icon-cog"><!-- options --></i></a>
+            </span>
+          </div>
+        </li>
+        <!--<var:foreach list="contactFolders" item="currentFolder"
+            ><li var:id="currentContactFolderId"
+            var:owner="currentContactFolderOwner"
+            var:class="currentContactFolderClass"
+            var:acl-editing="currentContactFolderAclEditing"
+            var:list-editing="currentContactFolderListEditing"
+            ><var:string value="currentContactFolderName"/></li
+            ></var:foreach
+            >-->
+      </ul>
+      <div class="buttonsToolbar">
+        <a href="#" class="button small" label:title="New Addressbook..."><i class="icon-plus"><!-- new --></i></a>
+        <a href="#" class="button small" label:title="Subscribe to an Addressbook..."><i class="icon-earth"><!-- subscribe --></i></a>
+      </div>
+      <var:if condition="hasContactSelectionButtons">
+        <div class="contactSelection">
+          <var:component value="selectorComponent" />
+        </div>
+      </var:if>
+    </div>
     </div>
 
-    <div class="dragHandle" id="rightDragHandle"><!-- space --></div>
+    <div class="dragHandle" id="dragHandle"><!-- space --></div>
 
-    <div id="contactView"><!-- space --></div>
+    <div id="rightPanel">
+      <!--<var:component className="UIxContactsFilterPanel" qualifier="qualifier" />-->
+
+      <div data-ng-view="view"><!-- ngView --></div>
+
+      <script type="text/ng-template" id="rightPanel.html">
+        <div id="contactsList">
+          <form>
+            <div class="buttonsToolbar searchToolbar">
+              <div class="inputField">
+                <input type="text" class="radius" placeholder="Search" />
+              </div>
+              <div class="optionsButton">
+                <a href="#" class="button"><i class="icon-cog"><!-- options --></i></a>
+              </div>
+            </div>
+          </form>
+          <ul>
+            <li data-ng-repeat="contact in addressbook.contacts"
+                data-ng-class="{_selected: addressbook.contact.id==contact.c_name}">
+              <a href="#/{{addressbook.id}}/{{contact.c_name}}">
+                <span class="contact-picture">
+                  <i data-ng-show="contact.c_component == 'vcard'" class="icon-ion-ios7-person"><!-- contact --></i>
+                  <i data-ng-show="contact.c_component == 'vlist'" class="icon-ion-ios7-people"><!-- list --></i>
+                </span>
+                <div class="name" data-ng-bind="contact.c_cn"><!-- cn --></div>
+                <div><span data-ng-show="contact.c_mail"><i class="icon-ion-ios7-email-outline"><!-- email --></i> {{contact.c_mail}}</span><var:entity const:name="nbsp" /></div>
+              </a>
+            </li>
+          </ul>
+        </div>
+        <div id="contactView">
+          <div class="viewer" data-ng-show="addressbook.$viewerIsActive(editMode)">
+            <div class="header">
+              <h1 data-ng-bind-html="addressbook.contact.$fullname()"><!-- fullname --></h1>
+              <h6>{{addressbook.contact.$description()}}
+              <span class="label radius" data-ng-repeat="category in addressbook.contact.categories">{{category.value}}</span>
+              </h6>
+            </div>
+            <div data-ng-show="addressbook.isEditable" class="buttonsToolbar">
+              <span class="button tiny radius" data-ng-click="edit()"><i class="icon-pencil"><!-- edit --></i></span>
+              <span class="button tiny radius alert"><i class="icon-trash"><!-- delete --></i></span>
+            </div>
+            <div class="attr" data-ng-show="addressbook.contact.birthday">
+              <div class="key">
+                <label class="right"><var:string label:value="Birthday"/></label>
+              </div>
+              <div class="value">
+                <span>{{addressbook.contact.$birthday()}}</span>
+              </div>
+            </div>
+            <div class="section" data-ng-show="addressbook.contact.refs.length > 0">
+              <div class="attr" data-ng-repeat="ref in addressbook.contact.refs">
+                <div class="value single">
+                  <a href="mailto:{{ref.email}}">{{ref.fn}}</a>
+                </div>
+              </div>
+            </div>
+            <div class="section" data-ng-show="addressbook.contact.emails.length > 0">
+              <div class="attr" data-ng-repeat="email in addressbook.contact.emails">
+                <div class="key">
+                  <label class="right"><var:entity const:name="nbsp" />{{email.type}}</label>
+                </div>
+                <div class="value">
+                  <a href="mailto:{{email.value}}">{{email.value}}</a>
+                </div>
+              </div>
+            </div>
+            <div class="section" data-ng-show="addressbook.contact.phones.length > 0">
+              <div class="attr" data-ng-repeat="phone in addressbook.contact.phones">
+                <div class="key">
+                  <label class="right">{{phone.type}}</label>
+                </div>
+                <div class="value">
+                  <a href="tel:{{phone.value}}">{{phone.value}}</a>
+                </div>
+              </div>
+            </div>
+            <div class="section" data-ng-show="addressbook.contact.urls">
+              <div class="attr" data-ng-repeat="url in addressbook.contact.urls">
+                <div class="key">
+                  <label class="right"><var:entity const:name="nbsp" />{{url.type}}</label>
+                </div>
+                <div class="value">
+                  <a href="#" data-ng-href="{{url.value}}">{{url.value}}</a>
+                </div>
+              </div>
+            </div>
+            <div class="section" data-ng-show="addressbook.contact.addresses">
+              <div class="attr" data-ng-repeat="address in addressbook.contact.addresses">
+                <div class="key">
+                  <label class="right">{{address.type}}</label>
+                </div>
+                <div class="value">
+                  <ul class="no-bullet">
+                    <li data-ng-show="address.street" data-ng-bind-html="address.street"><!-- street --></li>
+                    <li data-ng-show="address.street2" data-ng-bind-html="address.street2"><!-- street2 --></li>
+                    <li data-ng-show="address.locality || address.region">{{address.locality}} {{address.region}}</li>
+                    <li data-ng-show="address.country" data-ng-bind-html="address.country"><!-- country --></li>
+                    <li data-ng-show="address.postalcode" data-ng-bind-html="address.postalcode"><!-- postalcode --></li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+            <div class="attr" data-ng-show="addressbook.contact.note">
+              <div class="key">
+                <label class="right"><var:string label:value="Note"/></label>
+              </div>
+              <div class="value">
+                <div data-ng-bind-html="addressbook.contact.note"><!-- note --></div>
+              </div>
+            </div>
+          </div><!-- .viewer -->
+
+          <div class="editor" data-ng-show="editMode">
+            <form name="contactForm" href="" data-ng-show="addressbook.contact.$isContact()"
+                  data-ng-submit="save(contactForm)">
+              <div class="buttonsToolbar">
+                <span class="button tiny radius secondary" data-ng-click="cancel()"><i class="icon-arrow-left"><!-- cancel --></i></span>
+                <span class="button tiny radius secondary" data-ng-click="reset()"><i class="icon-undo"><!-- reset --></i></span>
+                <button class="button tiny radius" type="submit"><i class="icon-checkmark"><!-- save --></i></button>
+              </div>
+              <div class="attr">
+                <div class="action"><var:entity const:name="nbsp"/></div>
+                <div class="key">
+                  <label class="right inline"><var:string label:value="Display"/></label>
+                </div>
+                <div class="value">
+                  <input type="text" data-ng-model="addressbook.contact.fn"/>
+                </div>
+              </div>
+              <div class="attr">
+                <div class="action"><var:entity const:name="nbsp"/></div>
+                <div class="key">
+                  <label class="right inline"><var:string label:value="Firstname"/></label>
+                </div>
+                <div class="value">
+                  <input type="text" data-ng-model="addressbook.contact.givenname"/>
+                </div>
+              </div>
+              <div class="attr">
+                <div class="action"><var:entity const:name="nbsp"/></div>
+                <div class="key">
+                  <label class="right inline"><var:string label:value="Lastname"/></label>
+                </div>
+                <div class="value">
+                  <input type="text" data-ng-model="addressbook.contact.sn"/>
+                </div>
+              </div>
+              <div class="attr">
+                <div class="action"><var:entity const:name="nbsp"/></div>
+                <div class="key">
+                  <label class="right inline"><var:string label:value="Nickname"/></label>
+                </div>
+                <div class="value">
+                  <input type="text" data-ng-model="addressbook.contact.nickname"/>
+                </div>
+              </div>
+              <div class="attr">
+                <div class="action"><var:entity const:name="nbsp"/></div>
+                <div class="key">
+                  <label class="right inline"><var:string label:value="Organization"/></label>
+                </div>
+                <div class="value">
+                  <input type="text" data-ng-model="addressbook.contact.org"/>
+                </div>
+              </div>
+              <div class="attr">
+                <div class="action"><var:entity const:name="nbsp"/></div>
+                <div class="key">
+                  <label class="right inline"><var:string label:value="Title"/></label>
+                </div>
+                <div class="value">
+                  <input type="text" data-ng-model="addressbook.contact.title"/>
+                </div>
+              </div>
+              <!-- org units -->
+              <div class="section">
+                <div class="attr" data-ng-repeat="unit in addressbook.contact.orgUnits">
+                  <div class="action">
+                    <span class="button alert icon" data-ng-click="addressbook.contact.$delete('orgUnits', $index)"><i class="icon-minus"><!-- remove --></i></span>
+                  </div>
+                  <div class="key">
+                    <label class="right inline"><var:string label:value="Organization Unit"/></label>
+                  </div>
+                  <div class="value">
+                    <input type="text" label:placeholder="unit" data-ng-model="unit.value" data-sg-focus-on="orgUnit_{{$index}}"/>
+                  </div>
+                </div>
+                <div class="attr">
+                  <div class="value single">
+                    <span class="button secondary tiny" data-ng-click="addOrgUnit()"><i class="icon-plus"><!-- new --></i> <var:string label:value="New Organizational Unit"/></span>
+                  </div>
+                </div>
+              </div>
+              <!-- birthday -->
+              <div class="attr">
+                <div class="action"><var:entity const:name="nbsp"/></div>
+                <div class="key">
+                  <label class="right inline"><var:string label:value="Birthday"/></label>
+                </div>
+                <div class="value">
+                  <input type="text" data-ng-model="addressbook.contact.birthday"/>
+                </div>
+              </div>
+              <!-- categories -->
+              <div class="section">
+                <div class="attr" data-ng-repeat="category in addressbook.contact.categories">
+                  <div class="action">
+                    <span class="button alert icon" data-ng-click="addressbook.contact.$delete('categories', $index)"><i class="icon-minus"><!-- remove --></i></span>
+                  </div>
+                  <div class="key">
+                    <label class="right inline"><var:string label:value="Category"/></label>
+                  </div>
+                  <div class="value">
+                    <input type="text" label:placeholder="category" data-ng-model="category.value" data-sg-focus-on="category_{{$index}}" data-typeahead="cat for cat in addressbook.contact.allCategories"/>
+                  </div>
+                </div>
+                <div class="attr">
+                  <div class="value single">
+                    <span class="button secondary tiny" data-ng-click="addCategory()"><i class="icon-plus"><!-- new --></i> <var:string label:value="New Category"/></span>
+                  </div>
+                </div>
+              </div>
+              <!-- emails -->
+              <div class="section">
+                <div class="attr" data-ng-repeat="email in addressbook.contact.emails">
+                  <div class="action">
+                    <span class="button alert icon" data-ng-click="addressbook.contact.$delete('emails', $index)"><i class="icon-minus"><!-- remove --></i></span>
+                  </div>
+                  <div class="key">
+                    <select class="text-right" data-ng-model="email.type" data-ng-options="type for type in allEmailTypes">
+                      <!-- email types -->
+                    </select>
+                  </div>
+                  <div class="value">
+                    <input type="email" label:placeholder="email address" data-ng-model="email.value" data-sg-focus-on="email_{{$index}}"/>
+                  </div>
+                </div>
+                <div class="attr">
+                  <div class="value single">
+                    <span class="button secondary tiny" data-ng-click="addEmail()"><i class="icon-plus"><!-- new --></i> <var:string label:value="New Email Address"/></span>
+                  </div>
+                </div>
+              </div>
+              <!-- phones -->
+              <div class="section">
+                <div class="attr" data-ng-repeat="phone in addressbook.contact.phones">
+                  <div class="action">
+                    <span class="button alert icon" data-ng-click="addressbook.contact.$delete('phones', $index)"><i class="icon-minus"><!-- remove --></i></span>
+                  </div>
+                  <div class="key">
+                    <select class="text-right" data-ng-model="phone.type" data-ng-options="type for type in allTelTypes">
+                      <!-- phone types -->
+                    </select>
+                  </div>
+                  <div class="value">
+                    <input type="text" label:placeholder="phone number" data-ng-model="phone.value" data-sg-focus-on="phone_{{$index}}"/>
+                  </div>
+                </div>
+                <div class="attr">
+                  <div class="value single">
+                    <span class="button secondary tiny" data-ng-click="addPhone()"><i class="icon-plus"><!-- new --></i> <var:string label:value="New Phone Number"/></span>
+                  </div>
+                </div>
+              </div>
+              <!-- urls -->
+              <div class="section">
+                <div class="attr" data-ng-repeat="url in addressbook.contact.urls">
+                  <div class="action">
+                    <span class="button alert icon" data-ng-click="addressbook.contact.$delete('urls', $index)"><i class="icon-minus"><!-- remove --></i></span>
+                  </div>
+                  <div class="key">
+                    <select class="text-right" data-ng-model="url.type" data-ng-options="type for type in allUrlTypes">
+                      <!-- url types -->
+                    </select>
+                  </div>
+                  <div class="value">
+                    <input type="url" label:placeholder="URL" data-ng-model="url.value" data-sg-focus-on="url_{{$index}}"/>
+                  </div>
+                </div>
+                <div class="attr">
+                  <div class="value single">
+                    <span class="button secondary tiny" data-ng-click="addUrl()"><i class="icon-plus"><!-- new --></i> <var:string label:value="New URL"/></span>
+                  </div>
+                </div>
+              </div>
+              <!-- addresses -->
+              <div class="section">
+                <div class="attr" data-ng-repeat="address in addressbook.contact.addresses">
+                  <div class="action">
+                    <span class="button alert icon" data-ng-click="addressbook.contact.$delete('addresses', $index)"><i class="icon-minus"><!-- remove --></i></span>
+                  </div>
+                  <div class="key">
+                    <select class="text-right" data-ng-model="address.type" data-ng-options="type for type in allAddressTypes">
+                      <!-- address types -->
+                    </select>
+                  </div>
+                  <div class="value compact">
+                    <input type="text" label:placeholder="street" data-ng-model="address.street" data-sg-focus-on="address_{{$index}}"/>
+                    <input type="text" data-ng-model="address.street2"/>
+                    <input type="text" label:placeholder="Postoffice" data-ng-model="address.postoffice"/>
+                    <input type="text" label:placeholder="City" data-ng-model="address.locality"/>
+                    <input type="text" label:placeholder="Region" data-ng-model="address.region"/>
+                    <input type="text" label:placeholder="Country" data-ng-model="address.country"/>
+                    <input type="text" label:placeholder="Postal Code" data-ng-model="address.postalcode"/>
+                  </div>
+                </div>
+                <div class="attr">
+                  <div class="value single">
+                    <span class="button secondary tiny" data-ng-click="addAddress()"><i class="icon-plus"><!-- new --></i> <var:string label:value="New Address"/></span>
+                  </div>
+                </div>
+              </div>
+              <!-- note -->
+              <div class="attr">
+                <div class="action"><var:entity const:name="nbsp"/></div>
+                <div class="key">
+                  <label class="right inline"><var:string label:value="Note"/></label>
+                </div>
+                <div class="value">
+                  <textarea data-ng-model="addressbook.contact.note"><!-- note --></textarea>
+                </div>
+              </div>
+            </form>
+            <form name="contactForm" href="" data-ng-show="addressbook.contact.$isList()" data-ng-submit="save()">
+              <div class="attr">
+                <div class="action"><var:entity const:name="nbsp"/></div>
+                <div class="key">
+                  <label class="right inline"><var:string label:value="Display"/></label>
+                </div>
+                <div class="value">
+                  <input type="text" data-ng-model="addressbook.contact.fn"/>
+                </div>
+              </div>
+              <div class="attr">
+                <div class="action"><var:entity const:name="nbsp"/></div>
+                <div class="key">
+                  <label class="right inline"><var:string label:value="Firstname"/></label>
+                </div>
+                <div class="value">
+                  <input type="text" data-ng-model="addressbook.contact.givenname"/>
+                </div>
+              </div>
+            </form>
+          </div><!-- .editor -->
+
+        </div>
+      </script>
+
+      <!--<div class="dragHandle" id="rightDragHandle"></div>-->
+
+      <var:string value="errorAlertJavaScript" const:escapeHTML="NO" />
+    </div>
   </div>
-
-  <var:string value="errorAlertJavaScript" const:escapeHTML="NO" />
 </var:component>
diff --git a/UI/Templates/MainUI/SOGoRootPage.wox b/UI/Templates/MainUI/SOGoRootPage.wox
index 85a4e1e3b..33f6cb891 100644
--- a/UI/Templates/MainUI/SOGoRootPage.wox
+++ b/UI/Templates/MainUI/SOGoRootPage.wox
@@ -7,70 +7,69 @@
   xmlns:const="http://www.skyrix.com/od/constant"
   xmlns:rsrc="OGo:url"
   xmlns:label="OGo:label"
-  const:jsFiles="PasswordPolicy.js"
+  const:jsFiles="SOGo/SOGoAuthentication.js"
   const:popup="YES"
   ><var:string var:value="doctype" const:escapeHTML="NO"/>
+  <div data-ng-app="SOGoRootPage">
   <div id="aboutBox" style="display:none;">
     <div>
       <p class="logo"><img const:alt="SOGo" rsrc:src="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="inverse.png"/>
-      <p class="links"><a href="http://www.sogo.nu/" target="_new">www.sogo.nu</a> / 
-      <a href="http://www.inverse.ca/" target="_new">www.inverse.ca</a></p>
+      <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>
-  <div id="linkBanner" class="linkbanner">
-    <a id="about" href="#"><var:string label:value="About" /></a>
-  </div>
-  <form id="connectForm" var:href="connectURL">
-    <div id="loginScreen">
-      <var:if condition="hasLoginSuffix"><script
-	 type="text/javascript">var loginSuffix = '<var:string value="loginSuffix"/>';</script
-	></var:if>
-      <table width="560">
-	<tr>
-	  <td>
-	    <img const:alt="*" id="splash" rsrc:src="sogo-logo.png"/>
-	  </td>
-	  <td id="loginCell" width="230">
-	    <label><var:string label:value="Username:"/><br/>
-	    <input class="textField" id="userName" name="userName"
-		   type="text" var:value="cookieUsername" /></label>
-	    <label><var:string label:value="Password:"/><br/>
-	    <input class="textField" id="password"
-		   name="password" type="password" var:value="password" /></label>
-	    <label><var:string label:value="Language:"/><br/>
-	    <var:popup const:id="language" const:name="language"
-		       list="languages"
-		       item="item"
-		       var:value="item"
-		       string="languageText"
-		       label:noSelectionString="choose"
-		       /></label>
-            <var:if condition="hasLoginDomains">
-	    <label><var:string label:value="Domain:"/><br/>
-	    <var:popup const:id="domain" const:name="domain"
-		       list="loginDomains"
-		       item="item"
-		       var:selection="item"
-		       var:value="item"
-		       string="item"
-		       /></label>
-            </var:if>
-	    <label><input id="rememberLogin" type="checkbox" class="checkBox" var:checked="rememberLogin"/> <var:string label:value="Remember username"/></label>
-	    <label>
-	      <a href="#" class="button" id="submit" name="submit">
-	      <span><var:string label:value="Connect" /></span></a>
-	    </label>
-	  </td>
-	</tr>
-        <tr><td colspan="2"><label id="animation"><!-- busy.gif! --></label></td></tr>
-      </table>
-      <p id="errorMessage"><!-- space --></p>
+  <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-logo.png"/>
     </div>
-  </form
-  ><img const:alt="*" id="preparedAnimation" rsrc:src="busy.gif"/>
+    <form name="loginForm" data-ng-controller="loginController" data-ng-submit="login($event)">
+      <var:if condition="hasLoginSuffix"><input type="hidden" data-ng-model="loginSuffix" var:value="loginSuffix"/></var:if>
+      <div data-ng-show="warning" data-ng-cloak="ng-cloak" data-alert="data-alert" class="alert-box radius warning">{{warning}}</div>
+	<label><var:string label:value="Username:"/>
+	<input type="text" data-ng-model="username" var:data-ng-init="cookieUsername" required="required" />
+        </label>
+	<label><var:string label:value="Password:"/>
+	<input type="password" data-ng-model="password" required="required" />
+        </label>
+	<label><var:string label:value="Language:"/>
+	<var:popup const:name="language"
+		   list="languages"
+		   item="item"
+		   var:value="item"
+		   string="languageText"
+		   label:noSelectionString="choose"
+		   />
+        </label>
+      <var:if condition="hasLoginDomains">
+	  <label><var:string label:value="Domain:"/><br/>
+	  <var:popup const:name="domain"
+		     list="loginDomains"
+		     item="item"
+		     var:selection="item"
+		     var:value="item"
+		     string="item"
+		     />
+          </label>
+      </var:if>
+	<label><input id="rememberLogin" type="checkbox" class="checkBox" var:checked="rememberLogin"/> <var:string label:value="Remember username"/></label>
+	<label>
+	  <button type="submit" class="small" data-ng-disabled='!loginForm.$valid'>
+	  <var:string label:value="Connect" /></button>
+	</label>
+      <label id="animation"><!-- busy.gif! --></label>
+    </form>
+  </div>
+  </div>
 </var:component>
diff --git a/UI/Templates/UIxPageFrame.wox b/UI/Templates/UIxPageFrame.wox
index a85a2b493..06cfa1f1a 100644
--- a/UI/Templates/UIxPageFrame.wox
+++ b/UI/Templates/UIxPageFrame.wox
@@ -6,156 +6,178 @@
   xmlns:var="http://www.skyrix.com/od/binding"
   xmlns:const="http://www.skyrix.com/od/constant"
   xmlns:rsrc="OGo:url"
-  xmlns:label="OGo:label">
-  <var:string var:value="doctype" const:escapeHTML="NO" />
-  <var:if condition="hideFrame" const:negate="YES">
-    <html const:xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" const:lang="en">
-
-<!-- head -->
+  xmlns:label="OGo:label"
+  ><var:string var:value="doctype" const:escapeHTML="NO" />
+  <var:if condition="hideFrame" const:negate="YES"
+    ><html const:xmlns="http://www.w3.org/1999/xhtml"
+      xml:lang="en" const:lang="en">
       <head>
-        <title>
-          <var:string value="title"/></title>
-        <meta name="hideFrame" var:content="hideFrame" />
-        <meta name="description" content="SOGo Web Interface" />
-        <meta name="author" content="SKYRIX Software AG/Inverse inc." />
-        <meta name="robots" content="stop" />
-        <meta name="build" var:content="buildDate" />
-        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-        <link href="mailto:support@inverse.ca" rev="made" />
-        <link rel="shortcut icon" var:href="siteFavicon" type="image/x-icon" />
-        <link type="text/css" rel="stylesheet" rsrc:href="generic.css" />
-        <link type="text/css" rel="stylesheet" rsrc:href="dtree.css" />
-        <var:if condition="hasProductSpecificCSS">
-          <link type="text/css" rel="stylesheet" var:href="productCSSURL"/></var:if>
-        <var:if condition="hasPageSpecificCSS">
-          <link type="text/css" rel="stylesheet" var:href="pageCSSURL"/></var:if>
-        <var:foreach list="additionalCSSFiles" item="item">
-          <link type="text/css" rel="stylesheet" var:href="item"/></var:foreach>
-        <var:if-ie const:lte="9">
-          <link type="text/css" rel="stylesheet" rsrc:href="iefixes.css"/>
+	<title>
+	  <var:string value="title"/>
+	</title>
+	<meta name="hideFrame" var:content="hideFrame" />
+	<meta name="description" content="SOGo Web Interface" />
+	<meta name="author" content="SKYRIX Software AG/Inverse inc." />
+	<meta name="robots" content="stop" />
+	<meta name="build" var:content="buildDate" />
+	<link href="mailto:support@inverse.ca" rev="made" />
+	<link rel="shortcut icon" var:href="siteFavicon" type="image/x-icon" />
+	<link type="text/css" rel="stylesheet" rsrc:href="css/app.css" />
+	<link type="text/css" rel="stylesheet" rsrc:href="css/icons.css"/>
+	<var:if condition="hasProductSpecificCSS"
+	  ><link type="text/css" rel="stylesheet" var:href="productCSSURL"
+	    /></var:if>
+	<var:if condition="hasPageSpecificCSS"
+	  ><link type="text/css" rel="stylesheet" var:href="pageCSSURL"
+	    /></var:if>
+	<var:foreach list="additionalCSSFiles" item="item"
+	  ><link type="text/css" rel="stylesheet" var:href="item"
+	    />
+	</var:foreach>
+	<var:if-ie const:lte="9"
+	  ><link type="text/css" rel="stylesheet" rsrc:href="iefixes.css"/>
           <script type="text/javascript" rsrc:src="XMLHttpRequest.js"><!-- space --></script>
-        </var:if-ie>
+           </var:if-ie>
       </head>
-      
-<!-- Body -->
-      <body var:class="bodyClasses">
-        <var:if condition="isCompatibleBrowser">
-          <var:if condition="singleWindowModeEnabled">
-            <div id="popupFrame" style="display: none;">
-              <iframe width="100%" height="100%" src="/SOGo/loading"><!-- space --></iframe></div></var:if>
-          
-          <var:if condition="shortUserNameForDisplay" const:value="anonymous" const:negate="YES">
-            <var:if condition="hasUserSettingsKeys">
-              <script type="text/javascript">
-                var UserSettings = <var:string value="userSettings" const:escapeHTML="NO"/>;</script></var:if>
-            <var:if condition="hasUserDefaultsKeys">
-              <script type="text/javascript">
-                var UserDefaults = <var:string value="userDefaults" const:escapeHTML="NO"/>;</script></var:if></var:if>
-          
-          <var:if condition="isPopup" const:negate="YES">
-            <var:if condition="isUIxDebugEnabled">
-              <div id="logConsole"><!-- space --></div></var:if>
 
-<!-- Link banner -->
-            <div id="linkBanner" class="linkbanner">
+      <body var:class="bodyClasses"
+	><var:if condition="isCompatibleBrowser"
+	  ><var:if condition="singleWindowModeEnabled"
+          ><div id="popupFrame" style="display: none;"><iframe width="100%" height="100%" src="/SOGo/loading"><!-- space --></iframe></div></var:if
+          ><var:if condition="shortUserNameForDisplay" const:value="anonymous"
+            const:negate="YES"><var:if condition="hasUserSettingsKeys"
+              ><script type="text/javascript">
+                var UserSettings = <var:string value="userSettings" const:escapeHTML="NO"/>;
+              </script
+                ></var:if><var:if condition="hasUserDefaultsKeys">
+              <script type="text/javascript">
+                var UserDefaults = <var:string value="userDefaults" const:escapeHTML="NO"/>;
+              </script
+                ></var:if
+              ></var:if
+            ><var:if condition="isPopup" const:negate="YES"
+	    ><var:if condition="isUIxDebugEnabled"
+	      ><div id="logConsole"><!-- space --></div></var:if>
+              <nav class="top-bar">
+                <section class="top-bar-section">
               <var:if condition="canLogoff">
-                <a id="logoff" var:href="logoffPath">
-                  <var:string label:value="Disconnect"/></a>
-                <span id="userIdentificationDisplay">
-                  <var:if condition="userHasVacationEnabled">
-                    <img rsrc:src="status.vacation-msg.png" label:title="Vacation message is enabled" /></var:if>
-                  <var:string var:value="userIdentification"/></span></var:if>
-              
-              <var:if condition="userHasCalendarAccess">
-                <var:if condition="isCalendar">
-                  <span class="active"><var:string label:value="Calendar"/><!-- space --></span></var:if>
-                <var:if condition="isCalendar" const:negate="YES">
-                  <a id="calendarBannerLink" var:href="relativeCalendarPath">
-                    <var:string label:value="Calendar" /></a></var:if></var:if>
-              
-              <var:if condition="isContacts">
-                <span class="active"><var:string label:value="Address Book"/><!-- space --></span></var:if>
-              <var:if condition="isContacts" const:negate="YES">
-                <a id="contactsBannerLink" var:href="relativeContactsPath">
-                  <var:string label:value="Address Book" /></a></var:if>
-              <var:if condition="userHasMailAccess">
-                
-                <var:if condition="isMail">
-                  <span class="active"><var:string label:value="Mail"/><!-- space --></span></var:if>
-                <var:if condition="isMail" const:negate="YES">
-                  <a id="mailBannerLink" var:href="relativeMailPath">
-                    <var:string label:value="Mail" /></a></var:if></var:if>
-              
-              <a id="preferencesBannerLink" var:href="relativePreferencesPath">
-                <var:string label:value="Preferences" /></a>
-              <var:if condition="isSuperUser">
-                <var:if condition="isAdministration">
-                  <span class="active"><var:string label:value="Administration"/></span></var:if>
-                <var:if condition="isAdministration" const:negate="YES">
-                  <a id="administrationBannerLink" var:href="relativeAdministrationPath">
-                    <var:string label:value="Administration" /></a></var:if></var:if>
-              <var:if condition="isUIxDebugEnabled">
-                <a id="consoleBannerLink" href="#">
-                  <var:string label:value="Log Console (dev.)" /></a></var:if></div></var:if>
-          
-<!-- ToolBar -->
-          <var:component className="UIxToolbar" var:toolbar="toolbar" />
+                <ul class="right">
+                  <li class="name">
+                    <a href="#"><var:if condition="userHasVacationEnabled">
+                      <img rsrc:src="status.vacation-msg.png" label:title="Vacation message is enabled" />
+                    </var:if>
+                    <var:string var:value="userIdentification"/></a>
+                  </li>
+                  <li>
+                    <a id="logoff" var:href="logoffPath"><var:string label:value="Disconnect"/></a>
+                  </li>
+                </ul>
+              </var:if>
+              <ul>
+	      <var:if condition="userHasCalendarAccess">
+		<var:if condition="isCalendar">
+		  <li class="active"><a href="#"><var:string label:value="Calendar" /></a></li>
+		</var:if>
+		<var:if condition="isCalendar" const:negate="YES">
+		  <li><a var:href="relativeCalendarPath"><var:string label:value="Calendar" /></a></li>
+		</var:if>
+	      </var:if>
+	      <var:if condition="isContacts">
+		<li class="active"><a href="#"><var:string label:value="Address Book"/></a></li>
+	      </var:if>
+	      <var:if condition="isContacts" const:negate="YES">
+		<li><a var:href="relativeContactsPath"><var:string label:value="Address Book" /></a></li>
+	      </var:if>	      
+	      <var:if condition="userHasMailAccess">
+		<var:if condition="isMail">
+		    <li class="active"><var:string label:value="Mail"/></li>
+		</var:if>
+		<var:if condition="isMail" const:negate="YES">
+		  <li><a var:href="relativeMailPath"><var:string label:value="Mail" /></a></li>
+		</var:if>
+	      </var:if>
+	      <li><a var:href="relativePreferencesPath"><var:string label:value="Preferences" /></a></li>
+	      <var:if condition="isSuperUser">		
+		<var:if condition="isAdministration">
+		  <li class="active"><var:string label:value="Administration"/></li>
+		</var:if>
+		<var:if condition="isAdministration" const:negate="YES">
+		  <li><a var:href="relativeAdministrationPath"><var:string label:value="Administration" /></a></li>
+		</var:if>
+	      </var:if>
+	      <var:if condition="isUIxDebugEnabled">
+                <li><a href="#"><var:string label:value="Log Console (dev.)" /></a></li>
+              </var:if>
+            </ul>
+          </section>
+	    </nav>
+	  </var:if>
+          <!-- <var:component className="UIxToolbar" var:toolbar="toolbar"/>-->
 
-<!-- Page Content -->
-          <div id="pageContent"><var:component-content/><!-- space --></div>
-          <div id="javascriptSafetyNet"><!-- space --></div>
-          <script type="text/javascript">
-            var ApplicationBaseURL = '<var:string value="modulePath"/>';
-            var ResourcesURL = '<var:string value="applicationPath"/>.woa/WebServerResources';
-            var minimumSearchLength = <var:string value="minimumSearchLength"/>;
-            <var:if condition="isSuperUser">
-              var IsSuperUser = true;</var:if>
-            <var:if condition="isSuperUser" const:negate="YES">
-              var IsSuperUser = false;</var:if>
-            <var:if condition="usesCASAuthentication">
-              var usesCASAuthentication = true;</var:if>
-            <var:if condition="usesCASAuthentication" const:negate="YES">
-              var usesCASAuthentication = false;</var:if>
-            <var:if condition="shortUserNameForDisplay" const:value="anonymous" const:negate="YES">
-              var UserFolderURL = '<var:string value="userFolderPath" const:escapeHTML="NO"/>';
-              var UserLogin = '<var:string value="shortUserNameForDisplay" const:escapeHTML="NO"/>';
-              var UserLanguage = '<var:string value="userLanguage" const:escapeHTML="NO"/>'; </var:if>
-            <var:string value="commonLocalizableStrings" const:escapeHTML="NO"/>
-            <var:string value="productLocalizableStrings" const:escapeHTML="NO"/></script>
-          
-          <script type="text/javascript" rsrc:src="prototype.js"><!-- space --></script>
-          <script type="text/javascript" rsrc:src="jquery.js"><!-- space --></script>
-          <script>jQuery.noConflict();</script>
-          <script type="text/javascript" rsrc:src="tablekit.js"><!-- space --></script>
-          <script type="text/javascript" rsrc:src="tablekit-trueresize.js"><!-- space --></script>
-          <script type="text/javascript" rsrc:src="tablekit-sogo.js"><!-- space --></script>
-          <script type="text/javascript" rsrc:src="JavascriptAPIExtensions.js"><!-- space --></script>
-          <script type="text/javascript" rsrc:src="HTMLElement.js"><!-- space --></script>
-          <script type="text/javascript" rsrc:src="HTMLInputElement.js"><!-- space --></script>
-          <script type="text/javascript" rsrc:src="HTMLTableElement.js"><!-- space --></script>
-          <script type="text/javascript" rsrc:src="generic.js"><!-- space --></script>
-          <script type="text/javascript" rsrc:src="SOGoDragHandles.js"><!-- space --></script>
-          <script type="text/javascript" rsrc:src="SOGoTabsController.js"><!-- space --></script>
-          <var:if condition="hasProductSpecificJavaScript">
-            <script type="text/javascript" var:src="productJavaScriptURL"><!-- space --></script></var:if>
-          <var:if condition="hasPageSpecificJavaScript">
-            <script type="text/javascript" var:src="pageJavaScriptURL"><!-- space --></script></var:if>
-          <var:foreach list="additionalJSFiles" item="item">
-            <script type="text/javascript" var:src="item"><!-- space --></script></var:foreach>
-          <var:foreach list="systemAdditionalJSFiles" item="item">
-            <script type="text/javascript" var:src="item"><!-- space --></script></var:foreach></var:if>
-        <var:if condition="isCompatibleBrowser" const:negate="YES">
-          <var:component className="SOGoBrowsersPanel"/></var:if>
-        
-        <noscript>
-          <div class="javascriptPopupBackground"><!-- space --></div>
-          <div class="javascriptMessagePseudoWindow noJavascriptErrorMessage">
-            <var:string label:value="noJavascriptError"/><br /><br/>
-            <a class="button" var:href="page.context.uri">
-              <var:string label:value="noJavascriptRetry"/></a></div></noscript>
+	  <div id="pageContent"><var:component-content/></div>
+
+	  <script type="text/javascript">
+	    var ApplicationBaseURL = '<var:string value="modulePath"/>';
+	    var ResourcesURL = '<var:string value="applicationPath"/>.woa/WebServerResources';
+	    var minimumSearchLength = <var:string value="minimumSearchLength"/>;
+	    <var:if condition="isSuperUser"
+	      >var IsSuperUser = true;
+	    </var:if>
+	    <var:if condition="isSuperUser" const:negate="YES"
+	      >var IsSuperUser = false;
+	    </var:if>
+	    <var:if condition="usesCASAuthentication"
+	      >var usesCASAuthentication = true;
+	    </var:if>
+	    <var:if condition="usesCASAuthentication" const:negate="YES"
+	      >var usesCASAuthentication = false;
+	    </var:if>
+	    <var:if condition="shortUserNameForDisplay" const:value="anonymous"
+	      const:negate="YES"
+	      >var UserFolderURL = '<var:string value="userFolderPath" const:escapeHTML="NO"/>';
+	      var UserLogin = '<var:string value="shortUserNameForDisplay" const:escapeHTML="NO"/>';
+	      var UserLanguage = '<var:string value="userLanguage" const:escapeHTML="NO"/>';
+            </var:if>
+	    <var:string value="commonLocalizableStrings" const:escapeHTML="NO"/>
+	    <var:string value="productLocalizableStrings" const:escapeHTML="NO"/>
+	  </script>
+	  <script type="text/javascript" rsrc:src="js/vendor/underscore-min.js"><!-- space --></script>
+	  <script type="text/javascript" rsrc:src="js/vendor/angular.js"><!-- space --></script>
+	  <script type="text/javascript" rsrc:src="js/vendor/angular-route.js"><!-- space --></script>
+	  <script type="text/javascript" rsrc:src="js/vendor/angular-sanitize.js"><!-- space --></script>
+	  <script type="text/javascript" rsrc:src="js/vendor/mm-foundation.js"><!-- space --></script>
+          <script type="text/javascript" rsrc:src="js/app.js"><!-- space --></script>
+          <script type="text/javascript" rsrc:src="js/SOGo.js"><!-- space --></script>
+	  <var:if condition="hasProductSpecificJavaScript"><script type="text/javascript"
+	      var:src="productJavaScriptURL"><!-- space --></script></var:if>
+	  <var:if condition="hasPageSpecificJavaScript"><script type="text/javascript"
+	      var:src="pageJavaScriptURL"><!-- space --></script></var:if>
+	  <var:foreach list="additionalJSFiles" item="item"
+	    ><script type="text/javascript" var:src="item"><!-- space --></script>
+	  </var:foreach>
+	  <var:foreach list="systemAdditionalJSFiles" item="item"
+	    ><script type="text/javascript" var:src="item"><!-- space --></script>
+	  </var:foreach>
+        </var:if>
+        <var:if condition="isCompatibleBrowser" const:negate="YES"
+	  ><var:component className="SOGoBrowsersPanel"
+	    /></var:if>
+	<noscript>
+	  <div class="javascriptPopupBackground">
+	  </div>
+	  <div class="javascriptMessagePseudoWindow noJavascriptErrorMessage">
+	    <var:string label:value="noJavascriptError"
+	      /><br /><br
+	      /><a class="button" var:href="page.context.uri"
+	      ><var:string label:value="noJavascriptRetry"
+		/></a>
+	  </div>
+	</noscript>
       </body>
     </html>
   </var:if>
+
   <var:if condition="hideFrame">
-    <var:component-content /></var:if>
+    <var:component-content />
+  </var:if>
 </container>