cloudron-box/webadmin/src/views/users.html

<!-- Modal add user -->
<div class="modal fade" id="userAddModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="userAddModalLabel">Add User</h4>
            </div>
            <div class="modal-body">
                <form name="useradd_form" class="form-signin" role="form" novalidate ng-submit="doAdd()" autocomplete="off">
                    <fieldset>
                        <input type="password" style="display: none;">
                        <div class="form-group" ng-class="{ 'has-error': (useradd_form.username.$dirty && useradd_form.username.$invalid) || (!useradd_form.username.$dirty && useradd.error.username) }">
                            <label class="control-label" for="inputUserAddUsername">Username</label>
                            <div class="control-label" ng-show="(!useradd_form.username.$dirty && useradd.error.username) || (useradd_form.username.$dirty && useradd_form.username.$invalid) || (!useradd_form.username.$dirty && useradd.error.username)">
                                <small ng-show="useradd_form.username.$error.required">A username is required</small>
                                <small ng-show="useradd_form.username.$error.minlength">The username is too short</small>
                                <small ng-show="useradd_form.username.$error.maxlength">The username is too long</small>
                                <small ng-show="!useradd_form.username.$dirty && useradd.error.username">{{ useradd.error.username }}</small>
                            </div>
                            <input type="text" class="form-control" ng-model="useradd.username" id="inputUserAddUsername" name="username" ng-maxlength="512" ng-minlength="3" required autofocus>
                        </div>
                        <div class="form-group" ng-class="{ 'has-error': (useradd_form.email.$dirty && useradd_form.email.$invalid) || (!useradd_form.email.$dirty && useradd.error.email) }">
                            <label class="control-label" for="inputUserAddEmail">Email</label>
                            <div class="control-label" ng-show="(!useradd_form.email.$dirty && useradd.error.email) || (useradd_form.email.$dirty && useradd_form.email.$invalid) || (!useradd_form.email.$dirty && useradd.error.email)">
                                <small ng-show="useradd_form.email.$error.required">An email is required</small>
                                <small ng-show="useradd_form.email.$error.email">This is not a valid email</small>
                                <small ng-show="!useradd_form.email.$dirty && useradd.error.email">{{ useradd.error.email }}</small>
                            </div>
                            <input type="email" class="form-control" ng-model="useradd.email" id="inputUserAddEmail" name="email" required>
                        </div>
                        <input class="ng-hide" type="submit" ng-disabled="useradd_form.$invalid || useradd.alreadyTaken === username"/>
                    </fieldset>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" ng-click="doAdd()" ng-disabled="useradd_form.$invalid || useradd.busy"><i class="fa fa-spinner fa-pulse" ng-show="useradd.busy"></i> Add User</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal remove user -->
<div class="modal fade" id="userRemoveModal" tabindex="-1" role="dialog" aria-labelledby="userRemoveModalLabel" aria-hidden="true" style="text-align: left;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="userRemoveModalLabel">Delete user {{ userremove.userInfo.username }}</h4>
            </div>
            <div class="modal-body">
                <form name="userremove_form" class="form-user-delete" role="form" ng-submit="doUserRemove()" name="userDeleteConfirm" autocomplete="off">
                    <fieldset>
                        <input type="password" style="display: none;">
                        <div class="form-group" ng-class="{ 'has-error': (userremove_form.username.$dirty && userremove_form.username.$invalid) || (!userremove_form.username.$dirty && userremove.error.username) }">
                            <label class="control-label" for="inputUserRemoveUsername">Just to be sure you really want to delete this user, please type the user's name</label>
                            <div class="control-label" ng-show="(!userremove_form.username.$dirty && userremove.error.username) || (userremove_form.username.$dirty && userremove_form.username.$invalid)">
                                <small ng-show="userremove_form.username.$error.required">A username is required</small>
                                <small ng-show="userremove_form.error.username">The username does not match</small>
                            </div>
                            <input type="text" class="form-control" ng-model="userremove.username" id="inputUserRemoveUsername" name="userDeleteConfirm" placeholder="Username" required autofocus>
                        </div>
                        <div class="form-group" ng-class="{ 'has-error': (userremove_form.password.$dirty && userremove_form.password.$invalid) || (!userremove_form.password.$dirty && userremove.error.password)}">
                            <label class="control-label" for="inputUserRemovePassword">Give your password to verify that you are performing that action</label>
                            <div class="control-label" ng-show="(!userremove_form.password.$dirty && userremove.error.password) || (userremove_form.password.$dirty && userremove_form.password.$invalid)">
                                <small ng-show="userremove_form.password.$error.required && !userremove.error.password">A password is required</small>
                                <small ng-show="userremove_form.password.$error.minlength">The password is too short</small>
                                <small ng-show="userremove_form.password.$error.maxlength">The password is too long</small>
                                <small ng-show="!useradd_form.email.$dirty && userremove.error.password">{{ userremove.error.password }}</small>
                            </div>
                            <input type="password" class="form-control" ng-model="userremove.password" id="inputUserRemovePassword" name="password" placeholder="Password" ng-maxlength="512" ng-minlength="5" required>
                        </div>
                        <input class="hide" type="submit"/>
                    </fieldset>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-danger" ng-click="doUserRemove()" ng-disabled="userremove_form.$invalid || userremove.busy"><i class="fa fa-spinner fa-pulse" ng-show="userremove.busy"></i> Delete</button>
            </div>
        </div>
    </div>
</div>

<div class="content">

    <br/>

    <div>
        <div class="text-left">
            <h1>Users <button class="btn btn-primary btn-outline pull-right" data-toggle="modal" data-target="#userAddModal"><i class="fa fa-user-plus"></i> New User</button></h1>
        </div>
    </div>

    <div class="card card-large">
        <div class="grid-item-top">
            <div class="row ng-hide" ng-show="!ready">
                <div class="col-lg-12 text-center">
                    <h2><i class="fa fa-spinner fa-pulse"></i></h2>
                </div>
            </div>
            <div class="row animateMeOpacity ng-hide" ng-show="ready">
                <div class="col-lg-12">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th style="">User</th>
                                <th style="width: 1px" class="text-right">Group</th>
                                <th style="width: 200px" class="text-right">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="user in users">
                                <td class="text-overflow: ellipsis; white-space: nowrap;">
                                    {{ user.username }}
                                    <span class="text-muted">{{ user.email }}</span>
                                </td>
                                <td class="text-right" style="vertical-align: bottom">
                                    <span ng-show="isAdmin(user)" class="label label-default">Admin</span>
                                </td>
                                <td class="text-right" style="vertical-align: bottom">
                                    <span ng-show="isMe(user)" class="label label-success">This is you!</span>
                                    <button ng-show="!isMe(user) && userInfo.admin" ng-click="toggleAdmin(user)" class="btn btn-xs btn-default">
                                        <span ng-show="!user.admin"><i class="fa fa-plus"></i> Add Admin</span>
                                        <span ng-show="user.admin"><i class="fa fa-minus"></i> Remove Admin</span>
                                    </button>
                                    <button ng-show="!isMe(user) && userInfo.admin" class="btn btn-xs btn-danger" ng-click="showUserRemove(user)"><i class="fa fa-trash-o"></i> Delete</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>