From 02110e9e40d40ce39769b1501b7522dc2e4b5d8f Mon Sep 17 00:00:00 2001
From: Olivier Lamy <olamy@apache.org>
Date: Mon, 2 Apr 2012 10:09:40 +0000
Subject: [PATCH] merge template files together

git-svn-id: https://svn.apache.org/repos/asf/archiva/trunk@1308283 13f79535-47bb-0310-9956-ffa450edef68
---
 .../main/webapp/js/redback/redback-tmpl.js    |  17 +-
 .../webapp/js/templates/redback/login.html    | 129 ++++++++++
 .../redback/password-change-form.html         |  55 ----
 .../js/templates/redback/register-form.html   |  53 ----
 .../js/templates/redback/roles-tmpl.html      | 234 ------------------
 .../js/templates/redback/user-edit-form.html  |  72 ------
 .../js/templates/redback/user-edit.html       | 214 ++++++++++++++++
 7 files changed, 344 insertions(+), 430 deletions(-)
 delete mode 100644 archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/templates/redback/password-change-form.html
 delete mode 100644 archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/templates/redback/register-form.html
 delete mode 100644 archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/templates/redback/roles-tmpl.html
 delete mode 100644 archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/templates/redback/user-edit-form.html

diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/redback-tmpl.js b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/redback-tmpl.js
index a7966a815..6e20cb492 100644
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/redback-tmpl.js
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/redback-tmpl.js
@@ -18,29 +18,14 @@
  */
 define("redback.templates",["text!templates/redback/user-edit.html",
           "text!templates/redback/login.html",
-          "text!templates/redback/register-form.html",
-          "text!templates/redback/password-change-form.html",
-          "text!templates/redback/user-edit-form.html",
-          "text!templates/redback/roles-tmpl.html",
           "jquery.tmpl","utils"],
-    function(useredit, login,register,passwordchange,usereditform,roles) {
+    function(useredit, login) {
 
       var htmlFragment=$("#html-fragments");
 
       // template loading
-
       htmlFragment.append(useredit);
-
       $.tmpl(login).appendTo("#html-fragments");
-
-      $.tmpl(register).appendTo("#html-fragments");
-
-      $.tmpl(passwordchange).appendTo("#html-fragments");
-
-      $.tmpl(usereditform).appendTo("#html-fragments");
-
-      htmlFragment.append(roles);
-
       $.log("redback-tmpl.js loaded");
     }
 );
\ No newline at end of file
diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/templates/redback/login.html b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/templates/redback/login.html
index 871d1379e..c2dc12d9f 100644
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/templates/redback/login.html
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/templates/redback/login.html
@@ -46,3 +46,132 @@
   </div>
 </div>
 
+<div id="modal-register" class="modal hide fade">
+  <div class="modal-header">
+    <a href="#" class="close" data-dismiss="modal">&times;</a>
+    <h3>${$.i18n.prop('register.section.title')}</h3>
+  </div>
+  <div class="modal-body" id="modal-register-content">
+      <form id="user-register-form" class="form-horizontal">
+        <div id="modal-register-err-message" class="alert-message error" style="display:none"></div>
+        <fieldset>
+          <div class="control-group">
+            <label class="control-label" for="user-register-form-username">${$.i18n.prop('username')}</label>
+            <div class="controls">
+              <input type="text" id="user-register-form-username" name="user-register-form-username" class="required" />
+            </div>
+          </div>
+          <div class="control-group">
+            <label class="control-label" for="user-register-form-fullname">${$.i18n.prop('full.name')}</label>
+            <div class="controls">
+              <input type="text" id="user-register-form-fullname" name="user-register-form-fullname" class="required" />
+            </div>
+          </div>
+          <div class="control-group">
+            <label class="control-label" for="user-register-form-email">${$.i18n.prop('email')}</label>
+            <div class="controls">
+              <input type="text" id="user-register-form-email" name="user-register-form-email" class="required email" />
+            </div>
+          </div>
+
+        </fieldset>
+      </form>
+  </div>
+  <div class="modal-footer" id="modal-register-footer">
+      <button class="btn btn-primary" id="modal-register-ok">${$.i18n.prop('register')}</button>
+  </div>
+</div>
+
+<div id="modal-password-change" class="modal hide fade">
+  <div class="modal-header">
+    <a href="#" class="close" data-dismiss="modal">&times;</a>
+    <h3>${$.i18n.prop('password.section.title')}</h3>
+  </div>
+  <div class="modal-body" id="modal-password-change-content">
+      <form id="password-change-form" class="form-horizontal">
+        <div id="modal-password-change-err-message" class="alert-message error" style="display:none"></div>
+        <fieldset>
+          <!-- part displayed only when a logged user want to change password will be hide when validate user registration -->
+          <div class="control-group" id="password-change-form-current-password-div">
+            <label class="control-label" for="password-change-form-current-password">${$.i18n.prop('password.existing')}</label>
+            <div class="controls">
+              <input type="password" id="password-change-form-current-password" name="password-change-form-current-password" class="required" value=""/>
+            </div>
+          </div>
+
+          <div class="control-group">
+            <label class="control-label" for="passwordChangeFormNewPassword">${$.i18n.prop('password.new')}</label>
+            <div class="controls">
+              <input type="password" id="passwordChangeFormNewPassword" name="passwordChangeFormNewPassword" class="required" value=""/>
+            </div>
+          </div>
+
+          <div class="control-group">
+            <label class="control-label"  for="passwordChangeFormNewPasswordConfirm">${$.i18n.prop('password.new.confirm')}</label>
+            <div class="controls">
+              <input type="password" id="passwordChangeFormNewPasswordConfirm" name="passwordChangeFormNewPasswordConfirm" class="required" value=""/>
+            </div>
+          </div>
+        </fieldset>
+      </form>
+  </div>
+  <div class="modal-footer" id="modal-password-change-footer">
+    <button class="btn btn-primary" onclick="return" id="modal-change-password-ok">${$.i18n.prop('ok')}</button>
+  </div>
+</div>
+
+<div id="modal-user-edit" class="modal hide fade">
+  <div class="modal-header">
+    <a href="#" class="close" data-dismiss="modal">&times;</a>
+    <h3>${$.i18n.prop('password.section.title')}</h3>
+  </div>
+  <div class="modal-body" id="modal-user-edit-content">
+      <form id="user-edit-form" class="form-horizontal">
+        <div id="modal-user-edit-err-message" class="alert-message error" style="display:none"></div>
+        <fieldset>
+          <div class="control-group">
+            <label class="control-label" for="username">${$.i18n.prop('username')}</label>
+            <div class="controls" id="username-div">
+              <span class="uneditable-input" id="username"></span>
+            </div>
+          </div>
+          <div class="control-group">
+            <label class="control-label" for="fullname">${$.i18n.prop('full.name')}</label>
+            <div class="controls">
+              <input type="text" id="fullname" name="fullname" size="30" class="required"/>
+            </div>
+          </div>
+          <div class="control-group">
+            <label class="control-label" for="email">${$.i18n.prop('email.address')}</label>
+            <div class="controls">
+              <input type="text" id="email" name="email" size="30" class="required email"/>
+            </div>
+          </div>
+          <div class="control-group" id="user-edit-form-current-password-div">
+            <label class="control-label" for="userEditFormCurrentPassword">${$.i18n.prop('password.existing')}</label>
+            <div class="controls">
+              <input type="password" id="userEditFormCurrentPassword" name="userEditFormCurrentPassword" class="required" value=""/>
+            </div>
+          </div>
+
+          <div class="control-group">
+            <label class="control-label" for="userEditFormNewPassword">${$.i18n.prop('password.new')}</label>
+            <div class="controls">
+              <input type="password" id="userEditFormNewPassword" name="userEditFormNewPassword" class="" value=""/>
+            </div>
+          </div>
+
+          <div class="control-group">
+            <label class="control-label" for="userEditFormNewPasswordConfirm">${$.i18n.prop('password.new.confirm')}</label>
+            <div class="controls">
+              <input type="password" id="userEditFormNewPasswordConfirm" name="userEditFormNewPasswordConfirm" class="" value=""/>
+            </div>
+          </div>
+        </fieldset>
+      </form>
+  </div>
+  <div class="modal-footer" id="modal-user-edit-footer">
+    <button class="btn primary" onclick="return" id="modal-user-edit-ok">${$.i18n.prop('ok')}</button>
+  </div>
+</div>
+
diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/templates/redback/password-change-form.html b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/templates/redback/password-change-form.html
deleted file mode 100644
index d682788fa..000000000
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/templates/redback/password-change-form.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!--
-  ~ Licensed to the Apache Software Foundation (ASF) under one
-  ~ or more contributor license agreements.  See the NOTICE file
-  ~ distributed with this work for additional information
-  ~ regarding copyright ownership.  The ASF licenses this file
-  ~ to you under the Apache License, Version 2.0 (the
-  ~ "License"); you may not use this file except in compliance
-  ~ with the License.  You may obtain a copy of the License at
-  ~
-  ~   http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing,
-  ~ software distributed under the License is distributed on an
-  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-  ~ KIND, either express or implied.  See the License for the
-  ~ specific language governing permissions and limitations
-  ~ under the License.
--->
-<div id="modal-password-change" class="modal hide fade">
-  <div class="modal-header">
-    <a href="#" class="close" data-dismiss="modal">&times;</a>
-    <h3>${$.i18n.prop('password.section.title')}</h3>
-  </div>
-  <div class="modal-body" id="modal-password-change-content">
-      <form id="password-change-form" class="form-horizontal">
-        <div id="modal-password-change-err-message" class="alert-message error" style="display:none"></div>
-        <fieldset>
-          <!-- part displayed only when a logged user want to change password will be hide when validate user registration -->
-          <div class="control-group" id="password-change-form-current-password-div">
-            <label class="control-label" for="password-change-form-current-password">${$.i18n.prop('password.existing')}</label>
-            <div class="controls">
-              <input type="password" id="password-change-form-current-password" name="password-change-form-current-password" class="required" value=""/>
-            </div>
-          </div>
-
-          <div class="control-group">
-            <label class="control-label" for="passwordChangeFormNewPassword">${$.i18n.prop('password.new')}</label>
-            <div class="controls">
-              <input type="password" id="passwordChangeFormNewPassword" name="passwordChangeFormNewPassword" class="required" value=""/>
-            </div>
-          </div>
-
-          <div class="control-group">
-            <label class="control-label"  for="passwordChangeFormNewPasswordConfirm">${$.i18n.prop('password.new.confirm')}</label>
-            <div class="controls">
-              <input type="password" id="passwordChangeFormNewPasswordConfirm" name="passwordChangeFormNewPasswordConfirm" class="required" value=""/>
-            </div>
-          </div>
-        </fieldset>
-      </form>
-  </div>
-  <div class="modal-footer" id="modal-password-change-footer">
-    <button class="btn btn-primary" onclick="return" id="modal-change-password-ok">${$.i18n.prop('ok')}</button>
-  </div>
-</div>
\ No newline at end of file
diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/templates/redback/register-form.html b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/templates/redback/register-form.html
deleted file mode 100644
index 931e72d27..000000000
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/templates/redback/register-form.html
+++ /dev/null
@@ -1,53 +0,0 @@
-<!--
-  ~ Licensed to the Apache Software Foundation (ASF) under one
-  ~ or more contributor license agreements.  See the NOTICE file
-  ~ distributed with this work for additional information
-  ~ regarding copyright ownership.  The ASF licenses this file
-  ~ to you under the Apache License, Version 2.0 (the
-  ~ "License"); you may not use this file except in compliance
-  ~ with the License.  You may obtain a copy of the License at
-  ~
-  ~   http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing,
-  ~ software distributed under the License is distributed on an
-  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-  ~ KIND, either express or implied.  See the License for the
-  ~ specific language governing permissions and limitations
-  ~ under the License.
--->
-<div id="modal-register" class="modal hide fade">
-  <div class="modal-header">
-    <a href="#" class="close" data-dismiss="modal">&times;</a>
-    <h3>${$.i18n.prop('register.section.title')}</h3>
-  </div>
-  <div class="modal-body" id="modal-register-content">
-      <form id="user-register-form" class="form-horizontal">
-        <div id="modal-register-err-message" class="alert-message error" style="display:none"></div>
-        <fieldset>
-          <div class="control-group">
-            <label class="control-label" for="user-register-form-username">${$.i18n.prop('username')}</label>
-            <div class="controls">
-              <input type="text" id="user-register-form-username" name="user-register-form-username" class="required" />
-            </div>
-          </div>
-          <div class="control-group">
-            <label class="control-label" for="user-register-form-fullname">${$.i18n.prop('full.name')}</label>
-            <div class="controls">
-              <input type="text" id="user-register-form-fullname" name="user-register-form-fullname" class="required" />
-            </div>
-          </div>
-          <div class="control-group">
-            <label class="control-label" for="user-register-form-email">${$.i18n.prop('email')}</label>
-            <div class="controls">
-              <input type="text" id="user-register-form-email" name="user-register-form-email" class="required email" />
-            </div>
-          </div>
-
-        </fieldset>
-      </form>
-  </div>
-  <div class="modal-footer" id="modal-register-footer">
-      <button class="btn btn-primary" id="modal-register-ok">${$.i18n.prop('register')}</button>
-  </div>
-</div>
\ No newline at end of file
diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/templates/redback/roles-tmpl.html b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/templates/redback/roles-tmpl.html
deleted file mode 100644
index f4fa2cd00..000000000
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/templates/redback/roles-tmpl.html
+++ /dev/null
@@ -1,234 +0,0 @@
-<!--
-  ~ Licensed to the Apache Software Foundation (ASF) under one
-  ~ or more contributor license agreements.  See the NOTICE file
-  ~ distributed with this work for additional information
-  ~ regarding copyright ownership.  The ASF licenses this file
-  ~ to you under the Apache License, Version 2.0 (the
-  ~ "License"); you may not use this file except in compliance
-  ~ with the License.  You may obtain a copy of the License at
-  ~
-  ~   http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing,
-  ~ software distributed under the License is distributed on an
-  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-  ~ KIND, either express or implied.  See the License for the
-  ~ specific language governing permissions and limitations
-  ~ under the License.
--->
-<script id="rolesTabs" type="text/html">
-  <div class="page-header">
-    <h2>${$.i18n.prop('roles.management.header')}</h2>
-  </div>
-
-  <ul id="roles-view-tabs" class="nav nav-tabs" data-target="roles-view-tabs-content">
-    <li class="active" id="roles-view-tabs-li-roles-grid">
-      <a data-toggle="tab" href="#roles-view" id="roles-view-tabs-a-roles-grid">${$.i18n.prop('roles.grid.tab.title')}</a>
-    </li>
-    <li id="roles-view-tabs-li-roles-edit">
-      <a data-toggle="tab" href="#role-edit">${$.i18n.prop('edit')}</a>
-    </li>
-  </ul>
-  <div id="roles-view-tabs-content" class="tab-content">
-    <div id="roles-view" class="tab-pane">
-        <div data-bind="style: { display: bulkSave() ? '' : 'none' }">
-          <a data-bind="click: updateModifiedRoles" class="btn btn-danger" href="#">${$.i18n.prop('save.all')}</a>
-          <br/>
-        </div>
-        <table class="table table-striped table-bordered" id="rolesTable"
-               data-bind="simpleGrid: gridViewModel,simpleGridTemplate:'ko_rolesGrid',pageLinksId:'rolesPagination'">
-        </table>
-        <div id="rolesPagination"></div>
-    </div>
-    <div id="role-edit" class="tab-pane" data-bind="template: {name:'editRoleTab',data: currentRole}"></div>
-  </div>
-
-</script>
-
-<script id="editRoleTab" type="text/html">
-  <div class="accordion" id="edit-role-accordion">
-    <div class="accordion-group">
-      <div class="accordion-heading">
-        <h3>
-          <a class="accordion-toggle" href="#role-collapse" data-parent="#edit-role-accordion" data-toggle="collapse">${$.i18n.prop('role')}</a>
-        </h3>
-      </div>
-      <div id="role-collapse" class="accordion-body collapse in">
-        <table class="table table-bordered" id="editRoleTable">
-          <tbody>
-            <tr>
-              <td>${$.i18n.prop('name')}:</td>
-              <td id="role-edit-name">${$data.name}</td>
-            </tr>
-            <tr>
-              <td>${$.i18n.prop('description')}:</td>
-              <td><input type="text" id="role-edit-description" data-bind="value: description"></td>
-            </tr>
-            <tr>
-              <td colspan="2">
-                <div class="pull-left">
-                  <button class="btn" id="role-edit-description-save" data-bind="click: saveRoleDescription">${$.i18n.prop('save')}</button>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-
-        <div class="page-header">
-          <h3>${$.i18n.prop('role.model.parent.roles')}</h3>
-        </div>
-        {{if $data.parentRoleNames}}
-        <ul>
-          {{each $data.parentRoleNames}}
-            <li>${$value}</li>
-          {{/each}}
-        </ul>
-        {{/if}}
-
-        <div class="page-header">
-          <h3>${$.i18n.prop('role.model.child.roles')}</h3>
-        </div>
-        {{if $data.childRoleNames}}
-        <ul>
-          {{each $data.childRoleNames}}
-            <li>${$value}</li>
-          {{/each}}
-        </ul>
-        {{/if}}
-
-        <div class="page-header">
-          <h3>${$.i18n.prop('permissions')}</h3>
-        </div>
-        {{if $data.permissions}}
-          <table class="table table-striped table-bordered" id="rolePermissionsTable">
-            <thead>
-              <tr>
-                <th>${$.i18n.prop('name')}</th>
-                <th>${$.i18n.prop('role.operation')}</th>
-                <th>${$.i18n.prop('role.resource')}</th>
-              </tr>
-            </thead>
-            <tbody>
-              {{each permissions}}
-              <tr>
-                <td>${$value.name}</td>
-                {{if $value.operation }}
-                  <td>${$value.operation().name}</td>
-                {{else}}
-                  <td></td>
-                {{/if}}
-                {{if $value.resource }}
-                  <td>${$value.resource().identifier}</td>
-                {{else}}
-                  <td></td>
-                {{/if}}
-              </tr>
-             {{/each}}
-            </tbody>
-          </table>
-        {{/if}}
-      </div>
-    </div>
-    <div class="accordion-group>">
-      <div class="accordion-heading">
-        <h3>
-          <a class="accordion-toggle" href="#role-users-collapse" data-parent="#edit-role-accordion" data-toggle="collapse">${$.i18n.prop('role.edit.section.users')}</a>
-        </h3>
-      </div>
-      <div id="role-users-collapse" class="accordion-body collapse">
-        {{if $data.parentsRolesUsers}}
-        <div class="page-header">
-          <h3>${$.i18n.prop('role.edit.users.defined.in.parent.roles')}</h3>
-        </div>
-        <ul>
-        {{each $data.parentsRolesUsers}}
-          <li>${$value.fullName} - ( ${$value.username} - ${$value.email} ) </li>
-        {{/each}}
-        </ul>
-        {{/if}}
-
-        <ul id="role-edit-users-tabs" class="nav nav-tabs">
-          <li class="active" id="role-view-users-li">
-            <a data-toggle="tab" href="#role-view-users">${$.i18n.prop('role.edit.users.list')}</a>
-          </li>
-          <li id="role-edit-users-li">
-            <a data-toggle="tab" href="#role-edit-users">${$.i18n.prop('edit')}</a>
-          </li>
-        </ul>
-
-        <div class="pill-content" id="role-edit-users-tabs-content">
-          <div id="role-view-users" class="active pill-pane">
-            <div class="page-header">
-              <h3>${$.i18n.prop('role.edit.users.defined.in.current.role')}</h3>
-            </div>
-            <div id="role-list-users">
-              {{if users().length>0}}
-              <ul>
-                {{each(j, user) users()}}
-                <li>${user.fullName()} - ( ${user.username()} - ${user.email()} ) </li>
-                {{/each}}
-              </ul>
-              {{else}}
-                ${$.i18n.prop('role.edit.no.user.defined')}
-              {{/if}}
-            </div>
-          </div>
-
-          <div id="role-edit-users" class="clearfix ar-multiselect pill-pane">
-
-            <div class="ar-multiselect-column ar-multiselect-left">
-              <select data-bind="options: otherUsers ,optionsText: 'username',selectedOptions:selectedOtherUsers" multiple="true" id="role-edit-available-users"></select>
-            </div>
-            <div class="ar-multiselect-column ar-multiselect-center">
-              <ul style="list-style: none">
-                <li><input class="btn" id="role-edit-users-add-user" type="button" data-bind="click: addUser" value="&gt;"/></li>
-                <li><input class="btn" id="role-edit-users-remove-user" type="button" data-bind="click: removeUser" value="&lt;"/></li>
-              </ul>
-            </div>
-            <div class="ar-multiselect-column ar-multiselect-right">
-              <select data-bind="options: users ,optionsText: 'username',selectedOptions:selectedUsers" multiple="true" id="role-edit-affected-users"></select>
-            </div>
-            <button class="btn" id="role-edit-users-save" data-bind="click: saveUsers">${$.i18n.prop('save')}</button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</script>
-
-<script id='ko_rolesGrid' type='text/html'>
-  <thead>
-      <tr>
-        {{each(i, columnDefinition) columns}}
-          <th>${ columnDefinition.headerText }</th>
-        {{/each}}
-        <th>${$.i18n.prop('edit')}</th>
-        <th>${$.i18n.prop('save')}</th>
-      </tr>
-  </thead>
-  <tbody>
-      {{each(i, row) itemsOnCurrentPage()}}
-          <tr data-bind="css:{ 'modified': row.modified()||row.usersModified()}">
-              {{each(j, columnDefinition) columns}}
-              {{var val = (typeof columnDefinition.rowText == 'function' ? columnDefinition.rowText(row) : row[columnDefinition.rowText])}}
-              <td id="role-${columnDefinition.rowText}-${row.name()}">
-                ${val}
-              </td>
-              {{/each}}
-              <td>
-                <a id="edit-role-${row.name()}" href="#" data-bind="click: function(){ editRole(row) }">
-                  <span class="btn btn-primary">
-                    <i class="icon-pencil icon-white"/>
-                  </span>
-                </a>
-              </td>
-              <td>
-                {{if row.modified()}}
-                  <a href="#" class="btn btn-warning" data-bind="click: function(){ updateRole(row) }">${$.i18n.prop('save')}</a>
-                {{/if}}
-              </td>
-          </tr>
-      {{/each}}
-</script>
-
-
diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/templates/redback/user-edit-form.html b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/templates/redback/user-edit-form.html
deleted file mode 100644
index 3df4d84fb..000000000
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/templates/redback/user-edit-form.html
+++ /dev/null
@@ -1,72 +0,0 @@
-<!--
-  ~ Licensed to the Apache Software Foundation (ASF) under one
-  ~ or more contributor license agreements.  See the NOTICE file
-  ~ distributed with this work for additional information
-  ~ regarding copyright ownership.  The ASF licenses this file
-  ~ to you under the Apache License, Version 2.0 (the
-  ~ "License"); you may not use this file except in compliance
-  ~ with the License.  You may obtain a copy of the License at
-  ~
-  ~   http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing,
-  ~ software distributed under the License is distributed on an
-  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-  ~ KIND, either express or implied.  See the License for the
-  ~ specific language governing permissions and limitations
-  ~ under the License.
--->
-<div id="modal-user-edit" class="modal hide fade">
-  <div class="modal-header">
-    <a href="#" class="close" data-dismiss="modal">&times;</a>
-    <h3>${$.i18n.prop('password.section.title')}</h3>
-  </div>
-  <div class="modal-body" id="modal-user-edit-content">
-      <form id="user-edit-form" class="form-horizontal">
-        <div id="modal-user-edit-err-message" class="alert-message error" style="display:none"></div>
-        <fieldset>
-          <div class="control-group">
-            <label class="control-label" for="username">${$.i18n.prop('username')}</label>
-            <div class="controls" id="username-div">
-              <span class="uneditable-input" id="username"></span>
-            </div>
-          </div>
-          <div class="control-group">
-            <label class="control-label" for="fullname">${$.i18n.prop('full.name')}</label>
-            <div class="controls">
-              <input type="text" id="fullname" name="fullname" size="30" class="required"/>
-            </div>
-          </div>
-          <div class="control-group">
-            <label class="control-label" for="email">${$.i18n.prop('email.address')}</label>
-            <div class="controls">
-              <input type="text" id="email" name="email" size="30" class="required email"/>
-            </div>
-          </div>
-          <div class="control-group" id="user-edit-form-current-password-div">
-            <label class="control-label" for="userEditFormCurrentPassword">${$.i18n.prop('password.existing')}</label>
-            <div class="controls">
-              <input type="password" id="userEditFormCurrentPassword" name="userEditFormCurrentPassword" class="required" value=""/>
-            </div>
-          </div>
-
-          <div class="control-group">
-            <label class="control-label" for="userEditFormNewPassword">${$.i18n.prop('password.new')}</label>
-            <div class="controls">
-              <input type="password" id="userEditFormNewPassword" name="userEditFormNewPassword" class="" value=""/>
-            </div>
-          </div>
-
-          <div class="control-group">
-            <label class="control-label" for="userEditFormNewPasswordConfirm">${$.i18n.prop('password.new.confirm')}</label>
-            <div class="controls">
-              <input type="password" id="userEditFormNewPasswordConfirm" name="userEditFormNewPasswordConfirm" class="" value=""/>
-            </div>
-          </div>
-        </fieldset>
-      </form>
-  </div>
-  <div class="modal-footer" id="modal-user-edit-footer">
-    <button class="btn primary" onclick="return" id="modal-user-edit-ok">${$.i18n.prop('ok')}</button>
-  </div>
-</div>
\ No newline at end of file
diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/templates/redback/user-edit.html b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/templates/redback/user-edit.html
index 9a0e6fa8d..e06f875cb 100644
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/templates/redback/user-edit.html
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/templates/redback/user-edit.html
@@ -266,5 +266,219 @@
     </div>
 </script>
 
+<script id="rolesTabs" type="text/html">
+  <div class="page-header">
+    <h2>${$.i18n.prop('roles.management.header')}</h2>
+  </div>
+
+  <ul id="roles-view-tabs" class="nav nav-tabs" data-target="roles-view-tabs-content">
+    <li class="active" id="roles-view-tabs-li-roles-grid">
+      <a data-toggle="tab" href="#roles-view" id="roles-view-tabs-a-roles-grid">${$.i18n.prop('roles.grid.tab.title')}</a>
+    </li>
+    <li id="roles-view-tabs-li-roles-edit">
+      <a data-toggle="tab" href="#role-edit">${$.i18n.prop('edit')}</a>
+    </li>
+  </ul>
+  <div id="roles-view-tabs-content" class="tab-content">
+    <div id="roles-view" class="tab-pane">
+        <div data-bind="style: { display: bulkSave() ? '' : 'none' }">
+          <a data-bind="click: updateModifiedRoles" class="btn btn-danger" href="#">${$.i18n.prop('save.all')}</a>
+          <br/>
+        </div>
+        <table class="table table-striped table-bordered" id="rolesTable"
+               data-bind="simpleGrid: gridViewModel,simpleGridTemplate:'ko_rolesGrid',pageLinksId:'rolesPagination'">
+        </table>
+        <div id="rolesPagination"></div>
+    </div>
+    <div id="role-edit" class="tab-pane" data-bind="template: {name:'editRoleTab',data: currentRole}"></div>
+  </div>
+
+</script>
+
+<script id="editRoleTab" type="text/html">
+  <div class="accordion" id="edit-role-accordion">
+    <div class="accordion-group">
+      <div class="accordion-heading">
+        <h3>
+          <a class="accordion-toggle" href="#role-collapse" data-parent="#edit-role-accordion" data-toggle="collapse">${$.i18n.prop('role')}</a>
+        </h3>
+      </div>
+      <div id="role-collapse" class="accordion-body collapse in">
+        <table class="table table-bordered" id="editRoleTable">
+          <tbody>
+            <tr>
+              <td>${$.i18n.prop('name')}:</td>
+              <td id="role-edit-name">${$data.name}</td>
+            </tr>
+            <tr>
+              <td>${$.i18n.prop('description')}:</td>
+              <td><input type="text" id="role-edit-description" data-bind="value: description"></td>
+            </tr>
+            <tr>
+              <td colspan="2">
+                <div class="pull-left">
+                  <button class="btn" id="role-edit-description-save" data-bind="click: saveRoleDescription">${$.i18n.prop('save')}</button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <div class="page-header">
+          <h3>${$.i18n.prop('role.model.parent.roles')}</h3>
+        </div>
+        {{if $data.parentRoleNames}}
+        <ul>
+          {{each $data.parentRoleNames}}
+            <li>${$value}</li>
+          {{/each}}
+        </ul>
+        {{/if}}
+
+        <div class="page-header">
+          <h3>${$.i18n.prop('role.model.child.roles')}</h3>
+        </div>
+        {{if $data.childRoleNames}}
+        <ul>
+          {{each $data.childRoleNames}}
+            <li>${$value}</li>
+          {{/each}}
+        </ul>
+        {{/if}}
+
+        <div class="page-header">
+          <h3>${$.i18n.prop('permissions')}</h3>
+        </div>
+        {{if $data.permissions}}
+          <table class="table table-striped table-bordered" id="rolePermissionsTable">
+            <thead>
+              <tr>
+                <th>${$.i18n.prop('name')}</th>
+                <th>${$.i18n.prop('role.operation')}</th>
+                <th>${$.i18n.prop('role.resource')}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {{each permissions}}
+              <tr>
+                <td>${$value.name}</td>
+                {{if $value.operation }}
+                  <td>${$value.operation().name}</td>
+                {{else}}
+                  <td></td>
+                {{/if}}
+                {{if $value.resource }}
+                  <td>${$value.resource().identifier}</td>
+                {{else}}
+                  <td></td>
+                {{/if}}
+              </tr>
+             {{/each}}
+            </tbody>
+          </table>
+        {{/if}}
+      </div>
+    </div>
+    <div class="accordion-group>">
+      <div class="accordion-heading">
+        <h3>
+          <a class="accordion-toggle" href="#role-users-collapse" data-parent="#edit-role-accordion" data-toggle="collapse">${$.i18n.prop('role.edit.section.users')}</a>
+        </h3>
+      </div>
+      <div id="role-users-collapse" class="accordion-body collapse">
+        {{if $data.parentsRolesUsers}}
+        <div class="page-header">
+          <h3>${$.i18n.prop('role.edit.users.defined.in.parent.roles')}</h3>
+        </div>
+        <ul>
+        {{each $data.parentsRolesUsers}}
+          <li>${$value.fullName} - ( ${$value.username} - ${$value.email} ) </li>
+        {{/each}}
+        </ul>
+        {{/if}}
+
+        <ul id="role-edit-users-tabs" class="nav nav-tabs">
+          <li class="active" id="role-view-users-li">
+            <a data-toggle="tab" href="#role-view-users">${$.i18n.prop('role.edit.users.list')}</a>
+          </li>
+          <li id="role-edit-users-li">
+            <a data-toggle="tab" href="#role-edit-users">${$.i18n.prop('edit')}</a>
+          </li>
+        </ul>
+
+        <div class="pill-content" id="role-edit-users-tabs-content">
+          <div id="role-view-users" class="active pill-pane">
+            <div class="page-header">
+              <h3>${$.i18n.prop('role.edit.users.defined.in.current.role')}</h3>
+            </div>
+            <div id="role-list-users">
+              {{if users().length>0}}
+              <ul>
+                {{each(j, user) users()}}
+                <li>${user.fullName()} - ( ${user.username()} - ${user.email()} ) </li>
+                {{/each}}
+              </ul>
+              {{else}}
+                ${$.i18n.prop('role.edit.no.user.defined')}
+              {{/if}}
+            </div>
+          </div>
+
+          <div id="role-edit-users" class="clearfix ar-multiselect pill-pane">
+
+            <div class="ar-multiselect-column ar-multiselect-left">
+              <select data-bind="options: otherUsers ,optionsText: 'username',selectedOptions:selectedOtherUsers" multiple="true" id="role-edit-available-users"></select>
+            </div>
+            <div class="ar-multiselect-column ar-multiselect-center">
+              <ul style="list-style: none">
+                <li><input class="btn" id="role-edit-users-add-user" type="button" data-bind="click: addUser" value="&gt;"/></li>
+                <li><input class="btn" id="role-edit-users-remove-user" type="button" data-bind="click: removeUser" value="&lt;"/></li>
+              </ul>
+            </div>
+            <div class="ar-multiselect-column ar-multiselect-right">
+              <select data-bind="options: users ,optionsText: 'username',selectedOptions:selectedUsers" multiple="true" id="role-edit-affected-users"></select>
+            </div>
+            <button class="btn" id="role-edit-users-save" data-bind="click: saveUsers">${$.i18n.prop('save')}</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</script>
+
+<script id='ko_rolesGrid' type='text/html'>
+  <thead>
+      <tr>
+        {{each(i, columnDefinition) columns}}
+          <th>${ columnDefinition.headerText }</th>
+        {{/each}}
+        <th>${$.i18n.prop('edit')}</th>
+        <th>${$.i18n.prop('save')}</th>
+      </tr>
+  </thead>
+  <tbody>
+      {{each(i, row) itemsOnCurrentPage()}}
+          <tr data-bind="css:{ 'modified': row.modified()||row.usersModified()}">
+              {{each(j, columnDefinition) columns}}
+              {{var val = (typeof columnDefinition.rowText == 'function' ? columnDefinition.rowText(row) : row[columnDefinition.rowText])}}
+              <td id="role-${columnDefinition.rowText}-${row.name()}">
+                ${val}
+              </td>
+              {{/each}}
+              <td>
+                <a id="edit-role-${row.name()}" href="#" data-bind="click: function(){ editRole(row) }">
+                  <span class="btn btn-primary">
+                    <i class="icon-pencil icon-white"/>
+                  </span>
+                </a>
+              </td>
+              <td>
+                {{if row.modified()}}
+                  <a href="#" class="btn btn-warning" data-bind="click: function(){ updateRole(row) }">${$.i18n.prop('save')}</a>
+                {{/if}}
+              </td>
+          </tr>
+      {{/each}}
+</script>
 
 
-- 
2.39.5