sheercms/static/routes/users/users.html

Sheer Cliff CMS is a simple and powerful content management system (CMS) for Node JS.

<div class="row main-container user-view">
    <div class="col-md-12">

        <div ng-if="data.isAuthorized !== true" class="no-auth alert alert-danger">
            You are not authorized to use this tool.
        </div>

        <div class="toolbar" ng-if="data.isAuthorized === true">
            <ul>
                <li ng-show="buttons.back === true">
                    <a href="javascript:void(0);" title="Go back to the role list" ng-click="back()">
                        <img src="/cms/static/images/icons/32/back_arrow.png" alt="Back"/>
                        <span>Back</span>
                    </a>
                </li>
                <li ng-show="buttons.newUser === true">
                    <a href="javascript:void(0);" title="Create a new user" ng-click="openNewUser()">
                        <img src="/cms/static/images/icons/32/user_add.png" alt="New User"/>
                        <span>New User</span>
                    </a>
                </li>
                <li ng-show="buttons.newRole === true">
                    <a href="javascript:void(0);" title="Create a new role" ng-click="newRole()">
                        <img src="/cms/static/images/icons/32/group_add.png" alt="New Role"/>
                        <span>New Role</span>
                    </a>
                </li>
                <li ng-show="buttons.deleteRole === true">
                    <a href="javascript:void(0);" title="Delete this role" ng-click="deleteRole()">
                        <img src="/cms/static/images/icons/32/group_delete.png" alt="Delete Role"/>
                        <span>Delete Role</span>
                    </a>
                </li>
                <li ng-show="buttons.refresh === true">
                    <a href="javascript:void(0);" title="Reload the role or user list" ng-click="refresh()">
                        <img src="/cms/static/images/icons/32/update.png" alt="Refresh"/>
                        <span>Refresh</span>
                    </a>
                </li>
            </ul>
        </div>

        <div ng-if="data.isAuthorized === true">
            <div ng-if="data.message != null && data.message.length > 0">
                <div class="alert {{data.messageType}} max-width-medium">{{data.message}}</div>
            </div>

            <h3>{{data.title}}</h3>

            <div ng-if="role === null">

                <h3>Roles</h3>

                <div ng-if="roles === null || roles.length === 0">
                    <div class="alert alert-warning max-width-medium">There are currently no roles in the system.</div>
                </div>

                <div ng-if="roles.length > 0">
                    <table id="roleList" class="table table-click table-bordered table-striped max-width-large">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Description</th>
                                <th class="center" style="width:80px;">Locked</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="role in roles" ng-click="selectRole(role)">
                                <td>{{role.name}}</td>
                                <td>{{role.desc}}</td>
                                <td class="center">{{role.locked}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- end of roles -->

            <div ng-if="role !== null">

                <h3>{{role.name}}</h3>

                <div ng-if="role.allUsers !== true" class="role-description">
                    <textarea ng-model="role.desc" placeholder="Enter a description of this role" class="form-control"></textarea>
                    <button type="button" class="btn btn-default" ng-click="saveRole()">Save Description</button>
                </div>

                <div ng-if="users === null || users.length === 0">
                    <div class="alert alert-warning max-width-medium">There are currently no users in this role.</div>
                </div>

                <div ng-if="users.length > 0">
                    <table id="userList" class="table table-click table-bordered table-striped">
                        <thead>
                        <tr>
                            <th>Username</th>
                            <th style="width:300px;">Email</th>
                            <th style="width:150px;">First Name</th>
                            <th style="width:150px;">Last Name</th>
                            <th>Roles</th>
                            <th class="center" style="width:80px;">Active</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="user in users" ng-click="editUser(user)">
                            <td>{{user.username}}</td>
                            <td>{{user.email}}</td>
                            <td>{{user.firstName}}</td>
                            <td>{{user.lastName}}</td>
                            <td>
                                <span ng-repeat="role in user.roles">{{role}},&nbsp;</span>
                            </td>
                            <td>{{user.active}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>

            </div>
            <!-- end of users -->
        </div>
    </div>
</div>

<script type="text/ng-template" id="UserPropsDialog">
    <div class="modal-header">
        <button type="button" class="close" aria-hidden="true" ng-click="cancel()">&times;</button>
        <h4 class="modal-title">{{props.title}}</h4>
    </div>
    <div class="modal-body">
        <div ng-if="data.message && data.message.length > 0">
            <div class="alert {{data.messageType}}">{{data.message}}</div>
        </div>
        <div class="form-group">
            <label for="userUsername">Username</label>
            <input type="text" class="form-control" id="userUsername" name="username" placeholder="Enter username" ng-model="editUser.username">
        </div>

        <div class="form-group">
            <label for="userEmail">Email address</label>
            <input type="email" class="form-control" id="userEmail" name="email" placeholder="Enter email" ng-model="editUser.email">
        </div>

        <div class="form-group">
            <div class="row">
                <div class="col-lg-6">
                    <label for="userFirstName">First Name</label>
                    <input type="text" class="form-control" id="userFirstName" placeholder="Enter first name" ng-model="editUser.firstName">
                </div>
                <div class="col-lg-6">
                    <label for="userLastName">Last Name</label>
                    <input type="text" class="form-control" id="userLastName" placeholder="Enter last name" ng-model="editUser.lastName">
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="row">
                <div class="col-lg-6">
                    <label for="userPassword">Password</label>
                    <input type="password" class="form-control" id="userPassword" name="password" placeholder="Password" autocomplete="off" ng-model="editUser.password">
                </div>
                <div class="col-lg-6">
                    <label for="userConfirmPassword">Confirm Password</label>
                    <input type="password" class="form-control" id="userConfirmPassword" name="confirmPassword" placeholder="Confirm Password" autocomplete="off" ng-model="editUser.confirmPassword">
                </div>
            </div>
        </div>

        <div class="form-group" ng-if="props.isNewUser === false">
            <div class="checkbox">
                <label>
                    <input type="checkbox" id="userChangePwd" ng-model="props.changePwd">Change the user's password</span>
                </label>
            </div>
        </div>

        <div class="form-group">
            <label for="userRole">Roles</label>
            <select ui-select2 multiple id="userRoles" class="form-control" style="width:100%;" ng-model="editUser.roles">
                <option ng-repeat="role in roles | filter:{ allUsers: '!true'}" value="{{role.name}}">{{role.name}}</option>
            </select>
        </div>

        <div class="form-group">
            <div class="checkbox">
                <label>
                    <input type="checkbox" id="userActive" ng-disabled="editUser.protected" ng-model="editUser.active"> Active - <span class="help-block">users must be active to log in</span>
                </label>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="submit" class="btn btn-danger pull-left" ng-show="canDelete === true" ng-click="deleteUser()">Delete User</button>
        <button type="submit" class="btn btn-primary min-width" ng-click="ok()" style="width:60px;">{{props.saveBtnText}}</button>
        <button type="button" class="btn btn-default min-width" ng-click="cancel()">Close</button>
    </div>
</script>