Update formatting for user pages in web app.

cmd/web-app/handlers/projects.go

@@ -91,7 +91,7 @@ func (h *Projects) Index(ctx context.Context, w http.ResponseWriter, r *http.Req
 					subStatusIcon = "far fa-circle"
 				}
 
-				v.Formatted = fmt.Sprintf("<span class='cell-font-status %s'><i class='%s'></i>%s</span>", subStatusClass, subStatusIcon, web.EnumValueTitle(v.Value))
+				v.Formatted = fmt.Sprintf("<span class='cell-font-status %s'><i class='%s mr-1'></i>%s</span>", subStatusClass, subStatusIcon, web.EnumValueTitle(v.Value))
 			case "created_at":
 				dt := web.NewTimeResponse(ctx, q.CreatedAt)
 				v.Value = dt.Local

cmd/web-app/handlers/users.go

@@ -44,6 +44,10 @@ func urlUsersCreate() string {
 	return fmt.Sprintf("/users/create")
 }
 
+func urlUsersInvite() string {
+	return fmt.Sprintf("/users/invite")
+}
+
 func urlUsersView(userID string) string {
 	return fmt.Sprintf("/users/%s", userID)
 }
@@ -117,7 +121,7 @@ func (h *Users) Index(ctx context.Context, w http.ResponseWriter, r *http.Reques
 					subStatusIcon = "far fa-circle"
 				}
 
-				v.Formatted = fmt.Sprintf("<span class='cell-font-status %s'><i class='%s'></i>%s</span>", subStatusClass, subStatusIcon, web.EnumValueTitle(v.Value))
+				v.Formatted = fmt.Sprintf("<span class='cell-font-status %s'><i class='%s mr-1'></i>%s</span>", subStatusClass, subStatusIcon, web.EnumValueTitle(v.Value))
 			case "created_at":
 				dt := web.NewTimeResponse(ctx, q.CreatedAt)
 				v.Value = dt.Local
@@ -175,6 +179,7 @@ func (h *Users) Index(ctx context.Context, w http.ResponseWriter, r *http.Reques
 	data := map[string]interface{}{
 		"datatable":      dt.Response(),
 		"urlUsersCreate": urlUsersCreate(),
+		"urlUsersInvite": urlUsersInvite(),
 	}
 
 	return h.Renderer.Render(ctx, w, r, TmplLayoutBase, "users-index.gohtml", web.MIMETextHTMLCharsetUTF8, http.StatusOK, data)
@@ -372,6 +377,7 @@ func (h *Users) View(ctx context.Context, w http.ResponseWriter, r *http.Request
 		}
 	}
 
+	data["urlUsersView"] = urlUsersView(userID)
 	data["urlUsersUpdate"] = urlUsersUpdate(userID)
 	data["urlUserVirtualLogin"] = urlUserVirtualLogin(userID)
 
@@ -546,6 +552,8 @@ func (h *Users) Update(ctx context.Context, w http.ResponseWriter, r *http.Reque
 		data["passwordValidationDefaults"] = verr.(*weberror.Error)
 	}
 
+	data["urlUsersView"] = urlUsersView(userID)
+
 	return h.Renderer.Render(ctx, w, r, TmplLayoutBase, "users-update.gohtml", web.MIMETextHTMLCharsetUTF8, http.StatusOK, data)
 }
 

cmd/web-app/templates/content/account-update.gohtml

@@ -4,6 +4,13 @@
 {{end}}
 {{define "content"}}
 
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a href="/account">Account</a></li>
+            <li class="breadcrumb-item active" aria-current="page">Update</li>
+        </ol>
+    </nav>
+
     <div class="d-sm-flex align-items-center justify-content-between mb-4">
         <h1 class="h3 mb-0 text-gray-800">Update Account Settings</h1>
     </div>

cmd/web-app/templates/content/account-view.gohtml

@@ -4,6 +4,13 @@
 {{end}}
 {{define "content"}}
 
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a href="/account">Account</a></li>
+            <li class="breadcrumb-item active" aria-current="page">View</li>
+        </ol>
+    </nav>
+
     <div class="d-sm-flex align-items-center justify-content-between mb-4">
         <h1 class="h3 mb-0 text-gray-800">Account</h1>
         <!-- a href="/account/update" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="far fa-edit fa-sm text-white-50 mr-1"></i>Edit Details</a -->

cmd/web-app/templates/content/user-view.gohtml

@@ -52,7 +52,7 @@
         </div>
         <div class="col-md-5">
             <p>
-                <small>Role</small><br/>
+                <small>Roles</small><br/>
                 {{ if .userAccount }}
                     <b>
                         {{ range $r := .userAccount.Roles }}

cmd/web-app/templates/content/users-create.gohtml

@@ -4,6 +4,13 @@
 {{end}}
 {{define "content"}}
 
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a href="/users">Users</a></li>
+            <li class="breadcrumb-item active" aria-current="page">Create</li>
+        </ol>
+    </nav>
+
     <div class="d-sm-flex align-items-center justify-content-between mb-4">
         <h1 class="h3 mb-0 text-gray-800">Create User</h1>
     </div>
@@ -33,17 +40,6 @@
                                    placeholder="enter email" name="Email" value="{{ .form.Email }}" required>
                             {{template "invalid-feedback" dict "fieldName" "UserCreateRequest.Email" "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors }}
                         </div>
-                        <div class="form-group">
-                            <label for="inputTimezone">Timezone</label>
-                            <select class="form-control {{ ValidationFieldClass $.validationErrors "UserCreateRequest.Timezone" }}"
-                                    id="inputTimezone" name="Timezone">
-                                <option value="">Not set</option>
-                                {{ range $idx, $t := .timezones }}
-                                    <option value="{{ $t }}" {{ if CmpString $t $.form.Timezone }}selected="selected"{{ end }}>{{ $t }}</option>
-                                {{ end }}
-                            </select>
-                            {{template "invalid-feedback" dict "fieldName" "UserCreateRequest.Timezone" "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors }}
-                        </div>
                         <div class="form-group">
                             <label for="inputPassword">Password</label>
                             <input type="password"

cmd/web-app/templates/content/users-index.gohtml

@@ -1,10 +1,20 @@
 {{define "title"}}Users{{end}}
 {{define "content"}}
 
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a href="/users">Users</a></li>
+            <li class="breadcrumb-item active" aria-current="page">Index</li>
+        </ol>
+    </nav>
+
     <div class="d-sm-flex align-items-center justify-content-between mb-4">
         <h1 class="h3 mb-0 text-gray-800">Users</h1>
         {{ if HasRole $._Ctx "admin" }}
-            <a href="{{ .urlUsersCreate }}" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="fas fa-user-plus fa-sm text-white-50 mr-1"></i>Create User</a>
+            <div>
+                <a href="{{ .urlUsersCreate }}" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm mr-2"><i class="fas fa-user-plus fa-sm text-white-50 mr-1"></i>Create User</a>
+                <a href="{{ .urlUsersInvite }}" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="fas fa-restroom fa-sm text-white-50 mr-1"></i>Invite Users</a>
+            </div>
         {{ end }}
     </div>
 

cmd/web-app/templates/content/users-invite.gohtml

@@ -1,16 +1,44 @@
 {{define "title"}}Invite Users{{end}}
 {{define "content"}}
+
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a href="/users">Users</a></li>
+            <li class="breadcrumb-item active" aria-current="page">Invite</li>
+        </ol>
+    </nav>
+
+    <div class="d-sm-flex align-items-center justify-content-between mb-4">
+        <h1 class="h3 mb-0 text-gray-800">Invite Users</h1>
+    </div>
+
     <form method="POST">
 
         <div class="row">
             <div class="col-md-6">
                 <div class="card">
                     <div class="card-body">
+
                         <div class="form-group">
-                            <label for="inputEmail">Email for Invite 1</label>
+                            <label for="selectRoles">Roles <small>- Select at least one role for invited user(s).</small></label>
-                            <input type="text" class="form-control invite-user-email" placeholder="enter email" name="Emails" value="">
+                            <select class="form-control {{ ValidationFieldClass $.validationErrors "Roles" }}"
+                                    id="selectRoles" name="Roles" multiple="multiple">
+                                {{ range $t := .roles }}
+                                    <option value="{{ $t.Value }}" {{ if $t.Selected }}selected="selected"{{ end }}>{{ $t.Title }}</option>
+                                {{ end }}
+                            </select>
+                            {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "Roles" }}
                         </div>
 
+
+                        <div id="email-form-groups">
+                            <div class="form-group">
+                                <label for="inputEmail">Email for Invite 1</label>
+                                <input type="text" class="form-control invite-user-email" placeholder="enter email" name="Emails" value="">
+                            </div>
+                        </div>
+
+                        <p class="mt-2 mb-0"><a href="javascript:void(0)" class="btn btn-outline-primary btn-sm" id="inviteUser1"><i class="fas fa-user-plus mr-1"></i>Add another invitation</a></p>
                     </div>
                 </div>
             </div>
@@ -32,9 +60,8 @@
             </div>
         </div>
 
-        <div class="spacer-30"></div>
 
-        <div class="row">
+        <div class="row mt-4">
             <div class="col">
                 <input id="btnSubmit" type="submit" value="Invite Users" class="btn btn-primary"/>
             </div>
@@ -46,7 +73,7 @@
     <script>
         function addAnotherEmail(el) {
             if ($(el).val() == '') {
-                return;
+                //return;
             }
 
             cnt = 0;
@@ -61,24 +88,21 @@
             newHtml = newHtml + '<label for="inputEmail">Email for Invite '+cnt+'</label>';
             newHtml = newHtml + '<input type="text" class="form-control invite-user-email" placeholder="enter email" name="Emails" value="">';
             newHtml = newHtml + '</div>';
-            $(el).closest('div.card-body').append(newHtml);
+            $('#email-form-groups').append(newHtml);
-            $(el).unbind( "blur" );
+
 
-            $('#'+newId).on("blur", function() {
-                addAnotherEmail($(this));
-            });
         }
 
         $(document).ready(function(){
-            $("#inviteUser1").on("blur", function() {
+            $("#inviteUser1").click( function() {
                 addAnotherEmail($(this));
             });
 
             $("#inputRole").on("change", function() {
                 if ($(this).val() == 'admin') {
-                    $('#userProcedures').hide();
+                    //$('#userProjects').hide();
                 } else {
-                    $('#userProcedures').show();
+                    //$('#userProjects').show();
                 }
             }).change();
         });

cmd/web-app/templates/content/users-update.gohtml

@@ -4,6 +4,14 @@
 {{end}}
 {{define "content"}}
 
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a href="/users">Users</a></li>
+            <li class="breadcrumb-item"><a href="{{ .urlUsersView }}">{{ .user.Name }}</a></li>
+            <li class="breadcrumb-item active" aria-current="page">Update</li>
+        </ol>
+    </nav>
+
     <div class="d-sm-flex align-items-center justify-content-between mb-4">
         <h1 class="h3 mb-0 text-gray-800">Update User</h1>
     </div>
@@ -39,6 +47,16 @@
                                    placeholder="enter email" name="Email" value="{{ .form.Email }}" required>
                             {{template "invalid-feedback" dict "fieldName" "UserUpdateRequest.Email" "validationDefaults" $.userValidationDefaults "validationErrors" $.validationErrors }}
                         </div>
+                        <div class="form-group">
+                            <label for="inputTimezone">Timezone</label>
+                            <select class="form-control {{ ValidationFieldClass $.validationErrors "UserUpdateRequest.Timezone" }}" name="Timezone">
+                                <option value="">Not set</option>
+                                {{ range $idx, $t := .timezones }}
+                                    <option value="{{ $t }}" {{ if CmpString $t $.form.Timezone }}selected="selected"{{ end }}>{{ $t }}</option>
+                                {{ end }}
+                            </select>
+                            {{template "invalid-feedback" dict "fieldName" "UserUpdateRequest.Timezone" "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors }}
+                        </div>
                         <div class="form-group">
                             <label for="inputRoles">Roles</label>
                             <span class="help-block "><small>- Select at least one role.</small></span>
@@ -55,16 +73,6 @@
                             {{ end }}
                             {{template "invalid-feedback" dict "fieldName" "Roles" "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors }}
                         </div>
-                        <div class="form-group">
-                            <label for="inputTimezone">Timezone</label>
-                            <select class="form-control {{ ValidationFieldClass $.validationErrors "UserUpdateRequest.Timezone" }}" name="Timezone">
-                                    <option value="">Not set</option>
-                                {{ range $idx, $t := .timezones }}
-                                    <option value="{{ $t }}" {{ if CmpString $t $.form.Timezone }}selected="selected"{{ end }}>{{ $t }}</option>
-                                {{ end }}
-                            </select>
-                            {{template "invalid-feedback" dict "fieldName" "UserUpdateRequest.Timezone" "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors }}
-                        </div>
                     </div>
                 </div>
                 <div class="row">

cmd/web-app/templates/content/users-view.gohtml

@@ -3,6 +3,15 @@
 
 {{end}}
 {{define "content"}}
+
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a href="/users">Users</a></li>
+            <li class="breadcrumb-item"><a href="{{ .urlUsersView }}">{{ .user.Name }}</a></li>
+            <li class="breadcrumb-item active" aria-current="page">View</li>
+        </ol>
+    </nav>
+
     <div class="d-sm-flex align-items-center justify-content-between mb-4">
         <h1 class="h3 mb-0 text-gray-800">{{ .user.Name }}</h1>
         {{ if HasRole $._Ctx "admin" }}
@@ -64,7 +73,7 @@
                 </div>
                 <div class="col-md-5">
                     <p>
-                        <small>Role</small><br/>
+                        <small>Roles</small><br/>
                         {{ if .userAccount }}
                             <b>
                                 {{ range $r := .userAccount.Roles }}{{ if $r.Selected }}

cmd/web-app/templates/partials/app-sidebar.tmpl

@@ -38,11 +38,12 @@
                 </a>
                 <div id="navSectionProjects" class="collapse" data-parent="#accordionSidebar">
                     <div class="bg-white py-2 collapse-inner rounded">
-                        <a class="collapse-item" href="/projects">Projects</a>
+                        <a class="collapse-item" href="/projects">Manage Projects</a>
                     </div>
                 </div>
             </li>
 
+            {{ if HasRole $._Ctx "admin" }}
             <!-- Nav Item - Utilities Collapse Menu -->
             <li class="nav-item">
                 <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#navSectionUsers" aria-expanded="true" aria-controls="navSectionUsers">
@@ -51,10 +52,13 @@
                 </a>
                 <div id="navSectionUsers" class="collapse" data-parent="#accordionSidebar">
                     <div class="bg-white py-2 collapse-inner rounded">
-                        <a class="collapse-item" href="/users">Users</a>
+                        <a class="collapse-item" href="/users">Manage Users</a>
+                        <a class="collapse-item" href="/users/invite">Invite Users</a>
                     </div>
                 </div>
             </li>
+            {{end}}
+
         {{ end }}
 
         <!-- Divider -->

cmd/web-app/templates/partials/app-topbar.tmpl

@@ -181,10 +181,6 @@
                                 <i class="fas fa-users fa-sm fa-fw mr-2 text-gray-400"></i>
                                 Manage Users
                             </a>
-                            <a class="dropdown-item" href="/users/invite">
-                                <i class="fas fa-user-plus fa-sm fa-fw mr-2 text-gray-400"></i>
-                                Invite Users
-                            </a>
                         {{ else }}
                             <a class="dropdown-item" href="/user/account">
                                 <i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>