Feature: create profile UI

backend/src/EasyVPN.Api/Controllers/Common/AuthenticationController.cs

@@ -108,6 +108,7 @@ private static AuthenticationResponse MapAuthResult(AuthenticationResult authRes
             authResult.User.Id,
             authResult.User.FirstName,
             authResult.User.LastName,
+            authResult.User.Icon,
             authResult.User.Login,
             authResult.User.Roles.Select(r => r.ToString()).ToArray(),
             authResult.Token);

backend/src/EasyVPN.Api/Controllers/Common/MyProfileController.cs

@@ -3,6 +3,7 @@
 using EasyVPN.Application.Users.Commands.ChangePassword;
 using EasyVPN.Application.Users.Commands.UserInfoUpdate;
 using EasyVPN.Application.Users.Queries.GetUser;
+using EasyVPN.Contracts.Authentication;
 using EasyVPN.Contracts.Users;
 using EasyVPN.Domain.Common.Errors;
 using MediatR;
@@ -86,7 +87,7 @@ await _sender.Send(new UserInfoUpdateCommand(
     /// <summary>
     /// Change password for current user. (any auth)
     /// </summary>
-    /// <param name="newPassword">New user password.</param>
+    /// <param name="request">New and current user password.</param>
     /// <returns>Returns OK or error.</returns>
     /// <remarks>
     /// Sample request:
@@ -95,13 +96,13 @@ await _sender.Send(new UserInfoUpdateCommand(
     /// "newPassword"
     /// </remarks>
     [HttpPut("password")]
-    public async Task<IActionResult> ChangePassword([FromBody] string newPassword)
+    public async Task<IActionResult> ChangePassword([FromBody] PasswordChangeRequest request)
     {
         if (User.GetCurrentId() is not { } userId)
             return Problem(Errors.Access.NotIdentified);
 
         var userResult =
-            await _sender.Send(new ChangePasswordCommand(userId, newPassword));
+            await _sender.Send(new ChangePasswordCommand(userId, request.NewPassword, request.Password));
 
         return userResult.Match(
             _ => Ok(),

backend/src/EasyVPN.Application/Users/Commands/ChangePassword/ChangePasswordCommand.cs

@@ -3,4 +3,4 @@
 
 namespace EasyVPN.Application.Users.Commands.ChangePassword;
 
-public record ChangePasswordCommand(Guid UserId, string NewPassword) : IRequest<ErrorOr<Updated>>;
+public record ChangePasswordCommand(Guid UserId, string NewPassword, string? OldPassword = null) : IRequest<ErrorOr<Updated>>;

backend/src/EasyVPN.Application/Users/Commands/ChangePassword/ChangePasswordHandler.cs

@@ -26,6 +26,9 @@ public async Task<ErrorOr<Updated>> Handle(ChangePasswordCommand command, Cancel
         if (_userRepository.GetById(command.UserId) is not { } user)
             return Errors.User.NotFound;
 
+        if (command.OldPassword is not null && _hasher.Hash(command.OldPassword) != user.HashPassword)
+            return Errors.Authentication.InvalidCredentials;
+
         user.HashPassword = _hasher.Hash(command.NewPassword);
         _userRepository.Update(user);
 

backend/src/EasyVPN.Contracts/Authentication/AuthenticationResponse.cs

@@ -6,6 +6,7 @@ public record AuthenticationResponse(
     Guid Id,
     string FirstName,
     string LastName,
+    string Icon,
     string Login,
     string[] Roles,
     string Token

backend/src/EasyVPN.Contracts/Authentication/PasswordChangeRequest.cs

@@ -0,0 +1,6 @@
+namespace EasyVPN.Contracts.Authentication;
+
+public record PasswordChangeRequest(
+    string Password,
+    string NewPassword
+    );

frontend/src/api/index.ts

@@ -12,6 +12,7 @@ import Page from './requests/Page';
 import ProtocolInfo from './requests/ProtocolInfo';
 import Register from './requests/Register';
 import ServerInfo from './requests/ServerInfo';
+import UserInfo from './requests/UserInfo';
 import ApiError from './responses/ApiError';
 import Auth from './responses/Auth';
 import Connection from './responses/Connection';
@@ -85,6 +86,35 @@ const EasyVpn = {
                 headers: { Authorization: `Bearer ${token}` },
             });
         },
+        profile: (token: string) => {
+            return api.get<User>(`/my/profile`, {
+                headers: { Authorization: `Bearer ${token}` },
+            });
+        },
+        editProfile: (request: UserInfo, token: string) => {
+            return api.put<void>(`/my/profile`, request, {
+                headers: { Authorization: `Bearer ${token}` },
+            });
+        },
+        updateLogin: (login: string, token: string) => {
+            return api.put<void>(`/my/profile/login`, login, {
+                headers: {
+                    Authorization: `Bearer ${token}`,
+                    'Content-Type': 'application/json',
+                },
+            });
+        },
+        updatePassword: (pwd: string, newPwd: string, token: string) => {
+            return api.put<void>(
+                `/my/profile/password`,
+                { password: pwd, newPassword: newPwd },
+                {
+                    headers: {
+                        Authorization: `Bearer ${token}`,
+                    },
+                },
+            );
+        },
     },
     payment: {
         tickets: (token: string, clientId?: string) => {
@@ -276,7 +306,7 @@ const EasyVpn = {
 
 export default EasyVpn;
 
-export type { PaymentConnectionInfo, ProtocolInfo, ServerInfo };
+export type { PaymentConnectionInfo, ProtocolInfo, ServerInfo, UserInfo };
 
 export type {
     ApiError,

frontend/src/api/requests/UserInfo.ts

@@ -0,0 +1,5 @@
+export default interface UserInfo {
+    firstName: string;
+    lastName: string;
+    icon: string;
+}

frontend/src/hooks/useRequestHandler.ts

@@ -17,7 +17,10 @@ export default function useRequestHandler<
     const handler = (params: TParams, then?: (response: TResponse) => void) => {
         setLoading(true);
         request(params)
-            .then((v) => then && then(v))
+            .then((v) => {
+                setError(null);
+                then && then(v);
+            })
             .catch((e) => {
                 setError(e);
             })

frontend/src/modules/ConnectionItem/index.tsx

@@ -15,17 +15,36 @@ const ConnectionItem: FC<ConnectionItemProps> = (props) => {
             flexDirection="row"
             alignItems="center"
             gap={2}
+            flexWrap="wrap"
             width={'100%'}
         >
-            {props.connection.client.firstName} {props.connection.client.lastName}
+            <Box display="flex" alignItems="center" gap={1}>
+                <Box
+                    component="img"
+                    src={props.connection.client.icon}
+                    sx={{
+                        width: '5ch',
+                        height: '5ch',
+                        borderRadius: '50%',
+                        objectFit: 'cover',
+                    }}
+                />
+                {props.connection.client.firstName} {props.connection.client.lastName}
+            </Box>
             <KeyboardTab />
-            <img
-                loading="lazy"
-                width={25}
-                src={props.connection.server.protocol.icon}
-                alt=""
-            />
-            {props.connection.server.protocol.name}
+            <Box display="flex" alignItems="center" gap={1}>
+                <Box
+                    component="img"
+                    src={props.connection.server.protocol.icon}
+                    sx={{
+                        width: '5ch',
+                        height: '5ch',
+                        borderRadius: '50%',
+                        objectFit: 'cover',
+                    }}
+                />
+                {props.connection.server.protocol.name}
+            </Box>
         </Box>
     );
 };

frontend/src/modules/ConnectionRow/index.tsx

@@ -18,65 +18,63 @@ const ConnectionRow: FC<ConnectionRowProps> = (props: ConnectionRowProps) => {
 
     return (
         <TableRow hover>
-            <TableRow>
-                <TableCell
-                    sx={{
-                        padding: '10px',
-                        whiteSpace: 'nowrap',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        maxWidth: 'min(calc(100vw - 50px), 70vw)',
+            <TableCell
+                sx={{
+                    padding: '10px',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    maxWidth: 'min(calc(100vw - 50px), 70vw)',
+                }}
+            >
+                <ConnectionItem connection={props.connection} />
+                <Box margin={1} />
+                <ExpireItem
+                    ExpireTime={new Date(props.connection.validUntil)}
+                    WarrningDaysBefore={3}
+                />
+            </TableCell>
+            <TableCell>
+                <IconButton
+                    title={'Get config'}
+                    color="info"
+                    onClick={() => props.onConfig?.(props.connection.id)}
+                >
+                    <ContentPasteSearch />
+                </IconButton>
+                <IconButton
+                    title={'Reset life time'}
+                    color="error"
+                    onClick={() => props.onReset?.(props.connection.id)}
+                >
+                    <Restore />
+                </IconButton>
+                <TextField
+                    label="days"
+                    value={Number.isInteger(days) ? days : ''}
+                    onChange={(e) => {
+                        const d = Number.parseInt(e.target.value);
+                        return setDays(d >= 0 ? d : 1);
+                    }}
+                    onFocus={(e) => e.target.select()}
+                    type="number"
+                    variant="outlined"
+                    inputMode="numeric"
+                    size="small"
+                    style={{ width: '11ch' }}
+                />
+                <IconButton
+                    disabled={days === undefined}
+                    title={'Add life time'}
+                    color="success"
+                    onClick={() => {
+                        setDays(undefined);
+                        props.onExtend?.(props.connection.id, days || 0);
                     }}
                 >
-                    <ConnectionItem connection={props.connection} />
-                    <Box margin={1} />
-                    <ExpireItem
-                        ExpireTime={new Date(props.connection.validUntil)}
-                        WarrningDaysBefore={3}
-                    />
-                </TableCell>
-                <TableCell>
-                    <IconButton
-                        title={'Get config'}
-                        color="info"
-                        onClick={() => props.onConfig?.(props.connection.id)}
-                    >
-                        <ContentPasteSearch />
-                    </IconButton>
-                    <IconButton
-                        title={'Reset life time'}
-                        color="error"
-                        onClick={() => props.onReset?.(props.connection.id)}
-                    >
-                        <Restore />
-                    </IconButton>
-                    <TextField
-                        label="days"
-                        value={Number.isInteger(days) ? days : ''}
-                        onChange={(e) => {
-                            const d = Number.parseInt(e.target.value);
-                            return setDays(d >= 0 ? d : 1);
-                        }}
-                        onFocus={(e) => e.target.select()}
-                        type="number"
-                        variant="outlined"
-                        inputMode="numeric"
-                        size="small"
-                        style={{ width: '11ch' }}
-                    />
-                    <IconButton
-                        disabled={days === undefined}
-                        title={'Add life time'}
-                        color="success"
-                        onClick={() => {
-                            setDays(undefined);
-                            props.onExtend?.(props.connection.id, days || 0);
-                        }}
-                    >
-                        <MoreTime />
-                    </IconButton>
-                </TableCell>
-            </TableRow>
+                    <MoreTime />
+                </IconButton>
+            </TableCell>
         </TableRow>
     );
 };

frontend/src/modules/Header/index.tsx

@@ -1,9 +1,4 @@
-import {
-    AccountCircle,
-    AdminPanelSettings,
-    SupportAgent,
-    VpnKey,
-} from '@mui/icons-material';
+import { AdminPanelSettings, SupportAgent, VpnKey } from '@mui/icons-material';
 import {
     AppBar,
     Box,
@@ -170,14 +165,24 @@ const Header = (props: { isMobile: () => boolean; toggleNav: () => void }) => {
                             size="large"
                             color="inherit"
                             sx={{ textTransform: 'none' }}
-                            endIcon={<AccountCircle />}
                         >
                             <Box sx={{ flexDirection: 'column', textAlign: 'right' }}>
                                 <Typography fontSize="14pt">
                                     {Auth.user.firstName} {Auth.user.lastName}
                                 </Typography>
                                 <Typography fontSize="9pt">{Auth.user.login}</Typography>
                             </Box>
+                            <Box
+                                marginLeft={3}
+                                component="img"
+                                src={Auth.user.icon}
+                                sx={{
+                                    width: '5ch',
+                                    height: '5ch',
+                                    borderRadius: '50%',
+                                    objectFit: 'cover',
+                                }}
+                            />
                         </Button>
                     ) : (
                         <Button onClick={() => navigate('/auth')} color="inherit">

frontend/src/modules/ProfileForm/index.tsx

@@ -0,0 +1,41 @@
+import { Box, TextField } from '@mui/material';
+import React, { FC, useEffect, useState } from 'react';
+
+import { UserInfo } from '../../api';
+
+interface ProfileFormProps {
+    userInfo?: UserInfo;
+    onChange?: (userInfo: UserInfo) => void;
+}
+
+const ProfileForm: FC<ProfileFormProps> = (props) => {
+    const [icon, setIcon] = useState<string>(props.userInfo?.icon ?? '');
+    const [firstName, setFirstName] = useState<string>(props.userInfo?.firstName ?? '');
+    const [lastName, setLastName] = useState<string>(props.userInfo?.lastName ?? '');
+
+    useEffect(() => {
+        props.onChange && props.onChange({ firstName, lastName, icon });
+    }, [icon, firstName, lastName]);
+
+    return (
+        <Box sx={{ width: '100%' }} display="flex" flexDirection="column" gap={2}>
+            <TextField
+                label="Icon url"
+                value={icon}
+                onChange={(e) => setIcon(e.target.value)}
+            />
+            <TextField
+                label="First name"
+                value={firstName}
+                onChange={(e) => setFirstName(e.target.value)}
+            />
+            <TextField
+                label="Last name"
+                value={lastName}
+                onChange={(e) => setLastName(e.target.value)}
+            />
+        </Box>
+    );
+};
+
+export default ProfileForm;