Feature: create connection regulator UI

backend/src/EasyVPN.Api/Controllers/ConnectionRegulator/ClientsController.cs

@@ -0,0 +1,47 @@
+using EasyVPN.Application.Users.Queries.GetUsers;
+using EasyVPN.Contracts.Users;
+using EasyVPN.Domain.Common.Enums;
+using MediatR;
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Mvc;
+
+namespace EasyVPN.Api.Controllers.ConnectionRegulator;
+
+[Route("clients")]
+public class ClientsController : ApiControllerBase
+{
+    private readonly ISender _sender;
+
+    public ClientsController(ISender sender)
+    {
+        _sender = sender;
+    }
+
+    /// <summary>
+    /// Permanent get list clients. (connection regulator)
+    /// </summary>
+    /// <returns>Returns OK or error.</returns>
+    /// <remarks>
+    /// Sample request:
+    ///
+    /// GET {{host}}/clients
+    /// </remarks>
+    [HttpGet]
+    [Authorize(Roles = nameof(RoleType.ConnectionRegulator))]
+    public async Task<IActionResult> GetClients()
+    {
+        var getClientsResult =
+            await _sender.Send(new GetUsersQuery(RoleType.Client));
+
+        return getClientsResult.Match(
+            result => Ok(
+                result.Select(c => new ClientResponse(
+                        c.Id,
+                        c.FirstName,
+                        c.LastName,
+                        c.Icon,
+                        c.Login
+                    ))),
+            Problem);
+    }
+}

backend/src/EasyVPN.Application/Users/Queries/GetUsers/GetUsersQuery.cs

@@ -1,7 +1,8 @@
+using EasyVPN.Domain.Common.Enums;
 using EasyVPN.Domain.Entities;
 using ErrorOr;
 using MediatR;
 
 namespace EasyVPN.Application.Users.Queries.GetUsers;
 
-public record GetUsersQuery() : IRequest<ErrorOr<User[]>>;
+public record GetUsersQuery(RoleType? Role = null) : IRequest<ErrorOr<User[]>>;

backend/src/EasyVPN.Application/Users/Queries/GetUsers/GetUsersQueryHandler.cs

@@ -1,5 +1,4 @@
 using EasyVPN.Application.Common.Interfaces.Persistence;
-using EasyVPN.Domain.Common.Errors;
 using EasyVPN.Domain.Entities;
 using ErrorOr;
 using MediatR;
@@ -20,6 +19,11 @@ public async Task<ErrorOr<User[]>> Handle(GetUsersQuery query, CancellationToken
     {
         await Task.CompletedTask;
 
-        return _userRepository.GetAll().ToArray();
+        var users = _userRepository.GetAll();
+
+        if (query.Role != null)
+            users = users.Where(u => u.Roles.Any(r => r == query.Role));
+
+        return users.ToArray();
     }
 }

backend/src/EasyVPN.Contracts/Users/ClientResponse.cs

@@ -0,0 +1,9 @@
+namespace EasyVPN.Contracts.Users;
+
+public record ClientResponse(
+    Guid Id,
+    string FirstName,
+    string LastName,
+    string Icon,
+    string Login
+    );

frontend/src/api/enums/Role.ts

@@ -1,8 +1,8 @@
 export enum Role {
     Client = 'Client',
-    Administrator = 'Administrator',
     PaymentReviewer = 'PaymentReviewer',
     PageModerator = 'PageModerator',
     SecurityKeeper = 'SecurityKeeper',
     ServerSetuper = 'ServerSetuper',
+    ConnectionRegulator = 'ConnectionRegulator',
 }

frontend/src/api/index.ts

@@ -100,11 +100,6 @@ const EasyVpn = {
                 headers: { Authorization: `Bearer ${token}` },
             });
         },
-        connection: (connectionId: string, token: string) => {
-            return api.get<Connection>(`/connections/${connectionId}`, {
-                headers: { Authorization: `Bearer ${token}` },
-            });
-        },
         confirm: (ticketId: string, token: string, days?: number) => {
             return api.put<void>(
                 `/payment/tickets/${ticketId}/confirm${days ? '?days=' + days : ''}`,
@@ -120,6 +115,44 @@ const EasyVpn = {
             });
         },
     },
+    connections: {
+        get: (id: string, token: string) => {
+            return api.get<Connection>(`/connections/${id}`, {
+                headers: { Authorization: `Bearer ${token}` },
+            });
+        },
+        getAll: (token: string) => {
+            return api.get<Connection[]>(`/connections`, {
+                headers: { Authorization: `Bearer ${token}` },
+            });
+        },
+        getConfig: (id: string, token: string) => {
+            return api.get<ConnectionConfig>(`/connections/${id}/config`, {
+                headers: { Authorization: `Bearer ${token}` },
+            });
+        },
+        create: (serverId: string, clientId: string, token: string) => {
+            return api.post<void>(
+                `/connections?serverId=${serverId}&clientId=${clientId}`,
+                undefined,
+                { headers: { Authorization: `Bearer ${token}` } },
+            );
+        },
+        reset: (connectionId: string, token: string) => {
+            return api.put<void>(`/connections/${connectionId}/reset`, undefined, {
+                headers: { Authorization: `Bearer ${token}` },
+            });
+        },
+        extend: (connectionId: string, days: number, token: string) => {
+            return api.put<void>(
+                `/connections/${connectionId}/extend?days=${days}`,
+                undefined,
+                {
+                    headers: { Authorization: `Bearer ${token}` },
+                },
+            );
+        },
+    },
     servers: {
         test: (v: VpnVersion, request: ConnectionString, token: string) => {
             return api.post<void>(`/servers/test/${v}`, request, {
@@ -215,6 +248,11 @@ const EasyVpn = {
                 headers: { Authorization: `Bearer ${token}` },
             });
         },
+        getClients: (token: string) => {
+            return api.get<User[]>(`/clients`, {
+                headers: { Authorization: `Bearer ${token}` },
+            });
+        },
         get: (id: string, token: string) => {
             return api.get<User>(`/users/${id}`, {
                 headers: { Authorization: `Bearer ${token}` },

frontend/src/api/responses/User.ts

@@ -4,6 +4,7 @@ export default interface User {
     id: string;
     firstName: string;
     lastName: string;
+    icon: string;
     login: string;
     roles: Role[];
 }

frontend/src/modules/ClientSelect/index.tsx

@@ -0,0 +1,63 @@
+import { Autocomplete, Box, TextField } from '@mui/material';
+import React, { FC, useContext, useEffect } from 'react';
+
+import { Context } from '../..';
+import EasyVpn, { ApiError, User } from '../../api';
+import { useRequest } from '../../hooks';
+
+interface ClientSelectProps {
+    clientId?: string;
+    onChange?: (server: User | null) => void;
+}
+
+const ClientSelect: FC<ClientSelectProps> = (props) => {
+    const { Auth } = useContext(Context);
+
+    const [clients, loading] = useRequest<User[], ApiError>(() =>
+        EasyVpn.users.getClients(Auth.getToken()).then((v) => v.data),
+    );
+
+    const client = clients?.find((u) => u.id == props.clientId) || null;
+
+    useEffect(() => {
+        loading == false && props.onChange && props.onChange(client);
+    }, [client]);
+
+    return (
+        <Autocomplete
+            autoHighlight
+            options={clients ?? []}
+            onChange={(_, s) => props.onChange && props.onChange(s)}
+            value={client}
+            getOptionLabel={(o) => o.firstName + ' ' + o.lastName}
+            renderOption={(p, o) => {
+                return (
+                    <Box
+                        component="li"
+                        sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
+                        {...p}
+                    >
+                        <img loading="lazy" width={25} src={o.icon} alt="" />
+                        {o.firstName + ' ' + o.lastName}
+                    </Box>
+                );
+            }}
+            renderInput={(params) => {
+                return (
+                    <Box
+                        gap={1}
+                        sx={{
+                            display: 'flex',
+                            alignItems: 'center',
+                        }}
+                    >
+                        <img width={40} src={client?.icon} alt="" />
+                        <TextField {...params} label="Choose client" />
+                    </Box>
+                );
+            }}
+        />
+    );
+};
+
+export default ClientSelect;