D-Net

<h4>Users</h4>

<br />

<div class="row">

	<div class="col-sm-12 col-md-10 col-lg-8">

		<input type="text" class="form-control form-control-sm mb-3" ng-model="userFilter.email" placeholder="Filter...">

		<table class="table table-sm table-hover">

			<thead class="thead-light">

				<tr class="d-flex">

					<th class="col-4">User</th>

					<th class="col-1 text-center">Enabled</th>

					<th class="col-1 text-center">Super Admin</th>

					<th class="col-1 text-center">National Admin</th>

					<th class="col-3">Countries</th>

					<th class="col-2"></th>

				</tr>

			</thead>

			<tbody>

				<tr ng-repeat="u in users | filter:userFilter" class="d-flex">

					<th class="col-4" ng-class="{'text-secondary': !u.valid}">{{u.email}}</th>

					<td class="col-1 text-center text-success">

						<i class="fa fa-check-circle" ng-if="u.valid"></i>

						<span class="text-warning"    ng-if="u.role == 'PENDING'">not configured</span>

						<span class="text-danger"     ng-if="!u.valid && (u.role != 'PENDING')">disabled</span>

					</td>

					<td class="col-1 text-center">

						<i class="fa fa-check-circle" ng-if="u.role == 'ADMIN'"></i>

					</td>

					<td class="col-1 text-center">

						<i class="fa fa-check-circle" ng-if="u.role == 'NATIONAL_ADMIN'"></i>

					</td>

					<td class="col-3">

						<span ng-if="(u.role != 'ADMIN')">

							<img ng-src="resources/images/flags/{{c}}.gif" title="{{c}}" class="mr-1" ng-repeat="c in u.countries" />

							<span class="text-warning" ng-if="u.countries.length == 0"><i class="fa fa-exclamation-triangle"></i> no countries</span>

						</span>

						<span class="text-muted" ng-if="u.role == 'ADMIN'">All countries</span>

					</td>

					<td class="col-2 text-right">

						<a href="mailto:{{u.email}}" class="btn btn-sm  btn-outline-info"><i class="fa fa-at"></i></a>

						<button type="button" class="btn btn-sm  btn-outline-info" data-toggle="modal" data-target="#editUserModal" ng-click="setCurrentUser(u)"><i class="fa fa-edit"></i></button>

						<button type="button" class="btn btn-sm  btn-outline-danger" ng-click="deleteUser(u.email)"><i class="fa fa-trash"></i></button>

					</td>

				</tr>

			</tbody>

		</table>

	</div>

</div>

<div class="modal fade" id="editUserModal" tabindex="-1" role="dialog">

	<div class="modal-dialog modal-xl" role="document">

		<div class="modal-content">

			<div class="modal-header">

				<h5 class="modal-title">Edit user</h5>

				<button type="button" class="close" data-dismiss="modal">&times;</button>

			</div>

			<div class="modal-body" style="min-height: 300px; max-height: 500px; overflow-y: auto;">

				<form>

					<div class="form-group row">

						<label class="col-sm-2 col-form-label">Email</label>

						<div class="col-sm-10"><a href="mailto:{{currentUser.email}}">{{currentUser.email}}</a></div>

					</div>

					<div class="form-group row">

						<label class="col-sm-2 col-form-label">Enabled</label>

						<div class="col-sm-10">

							<div class="form-check">

								<input class="form-check-input" type="checkbox" ng-model="currentUser.valid" />

							</div>

						</div>

					</div>

					<div class="form-group row" ng-if="superAdminMode && currentUser.valid">

						<label class="col-sm-2 col-form-label">Role</label>

						<div class="col-sm-10">

							<div class="form-check form-check-inline">

								<input class="form-check-input" type="radio" value="USER" ng-model="currentUser.role">

								<label class="form-check-label">USER</label>

							</div>

							<div class="form-check form-check-inline">

								<input class="form-check-input" type="radio" value="NATIONAL_ADMIN" ng-model="currentUser.role">

								<label class="form-check-label">NATIONAL ADMIN</label>

							</div>

							<div class="form-check form-check-inline">

								<input class="form-check-input" type="radio" value="ADMIN" ng-model="currentUser.role">

								<label class="form-check-label">SUPER ADMIN</label>

							</div>

						</div>

					</div>

					<div class="card mb-3"  ng-if="currentUser.valid && ((currentUser.role == 'USER') || (currentUser.role == 'NATIONAL_ADMIN'))">

						<div class="card-header bg-primary text-white py-1">Countries</div>

						<div class="card-body">

							<div class="form-group row">

								<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1" ng-repeat="c in vocabularies.countries">

									<div class="form-check form-check-inline">

										<input class="form-check-input" type="checkbox" checklist-model="currentUser.countries" checklist-value="c"/>

										<label class="form-check-label">{{c}}</label>

									</div>

								</div>

							</div>

						</div>

					</div>

				</form>

			</div>

			<div class="modal-footer">

				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

				<button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="saveUser(currentUser)">Save changes</button>

			</div>

		</div>

	</div>

</div>