update user profile

src/Pages/Login/index.js

@@ -1,6 +1,5 @@
 import { LockOutlined, LoginOutlined, UserOutlined } from "@ant-design/icons";
 import { Button, Form, Input, Modal, notification } from "antd";
-import PropTypes from "prop-types";
 import { Constants, setUserSessionToLocalStorage } from "../../utils";
 import { useState } from "react";
 import { Buffer } from "buffer";
@@ -90,6 +89,8 @@ export default function Login() {
               prefix={<UserOutlined />}
               placeholder="Username"
               onChange={(e) => setUsername(e.target.value)}
+              minLength={Constants.GLOBALS.MIN_USERNAME_LENGTH}
+              maxLength={Constants.GLOBALS.MAX_USERNAME_LENGTH}
             />
           </Form.Item>
           <Form.Item
@@ -119,7 +120,3 @@ export default function Login() {
     </>
   );
 }
-
-Login.propTypes = {
-  setUserSession: PropTypes.func.isRequired,
-};

src/Pages/UserProfile/index.js

@@ -1,5 +1,5 @@
 import { Button, Card, Form, Input, Space, Table, Upload, message } from "antd";
-import { useContext, useRef, useState } from "react";
+import { useContext, useState } from "react";
 import {
   Constants,
   FormatDatetime,
@@ -149,7 +149,8 @@ export default function UserProfile() {
       newPassword !== "" &&
       newPassword === repeatedNewPassword
     ) {
-      changes.password = Buffer.from(newPassword).toString("base64");
+      changes.oldPassword = Buffer.from(oldPassword).toString("base64");
+      changes.newPassword = Buffer.from(newPassword).toString("base64");
     }
 
     webSocketContext.SendSocketMessage(SentMessagesCommands.UpdateUserProfile, {
@@ -193,6 +194,8 @@ export default function UserProfile() {
               onChange={(e) =>
                 webSocketContext.setUserProfileStateUsername(e.target.value)
               }
+              minLength={Constants.GLOBALS.MIN_USERNAME_LENGTH}
+              maxLength={Constants.GLOBALS.MAX_USERNAME_LENGTH}
             />
           </Form.Item>
           <Form.Item

src/utils.js

@@ -31,13 +31,11 @@ export const Constants = {
   GLOBALS: {
     MIN_USERNAME_LENGTH: 2,
     MAX_USERNAME_LENGTH: 20,
-    MIN_EMAIL_LENGTH: 3, // only here defined
     MIN_PASSWORD_LENGTH: 6,
     MAX_PASSWORD_LENGTH: 64,
   },
   MAX_AVATAR_SIZE: 5 * 1024 * 1024,
   ACCEPTED_FILE_TYPES: ["image/png", "image/jpeg", "image/jpg"],
-  GROUP_TASK_LOCKED_TIME: 3 * 1000,
 };
 
 /*
@@ -443,9 +441,11 @@ export function WebSocketProvider({
             if (user.Id === body.UserId) {
               if (body.Changes.Username !== undefined) {
                 updatedUser.Username = body.Changes.Username;
+                setUserProfileStateUsername(body.Changes.Username);
               }
               if (body.Changes.Email !== undefined) {
                 updatedUser.Email = body.Changes.Email;
+                setUserProfileStateEmail(body.Changes.Email);
               }
             }
 
@@ -463,6 +463,46 @@ export function WebSocketProvider({
               return newArr;
             });
           }
+
+          // feedback message for the user who has changed his profile
+          if (body.Result !== undefined) {
+            if (body.Result.Username !== undefined) {
+              if (body.Result.Username === 0) {
+                notificationApi["success"]({
+                  message: `Username changed`,
+                  description: `Changed to ${body.Changes.Username}`,
+                });
+              } else {
+                notificationApi["error"]({
+                  message: `Username could not be changed`,
+                  description: "Username already in use",
+                });
+              }
+            }
+
+            if (body.Result.Email !== undefined) {
+              if (body.Result.Email === 0) {
+                notificationApi["success"]({
+                  message: `Email changed`,
+                  description: `Changed to ${body.Changes.Email}`,
+                });
+              } else {
+                notificationApi["error"]({
+                  message: `Email could not be changed`,
+                  description: "Email already in use",
+                });
+              }
+            }
+
+            if (body.Result.Password !== undefined) {
+              if (body.Result.Password === 1) {
+                notificationApi["error"]({
+                  message: `Old password is wrong`,
+                  description: `Please check your entered old password`,
+                });
+              }
+            }
+          }
           break;
         default:
           console.error("unknown command", cmd);