Display avatar in profile page and header

bbbeasy-backend/app/config/access.ini

@@ -33,31 +33,27 @@ allow @locale         = *
 allow @set_locale     = *
 
 ; account routes
-allow POST @register            = *
-allow POST @login               = *
-allow GET  @logout              = *
-allow POST @reset               = *
-allow POST @change_password     = *
-allow GET  @get_reset_token     = *
+allow POST @register               = *
+allow POST @login                  = *
+allow GET  @logout                 = *
+allow POST @reset                  = *
+allow POST @change_password        = *
+allow GET  @get_reset_token        = *
+allow PUT  @account_remove_avatar  = *
 
 ; roles permissions routes
 allow GET  @roles_permissions_collect   = *
 
 ; settings routes
-allow GET  @settings_collect            = *
+allow GET  @settings_collect      = *
+allow POST @settings_save_logo    = *
+allow GET  @file                  = *
 
 
-allow POST @settings_save_logo          = *
-
-
-
-
-
-allow GET  @file               = *
-
 ; notification routes
 allow GET @warning_notification = *
 
 
 
+
 

bbbeasy-backend/app/config/routes.ini

@@ -26,13 +26,14 @@ GET  @locale     : /api/locale/json/@locale.json     = Actions\Core\GetLocale->e
 PUT  @set_locale : /api/set-locale/@locale    [ajax] = Actions\Account\SetLocale->execute
 
 ; account routes
-POST @register          : /api/account/register           = Actions\Account\Register->signup
-POST @login             : /api/account/login              = Actions\Account\Login->authorise
-GET  @logout            : /api/account/logout             = Actions\Account\Logout->execute
-POST @reset             : /api/account/reset-password     = Actions\Account\ResetPassword->execute
-POST @change_password   : /api/account/change-password    = Actions\Account\ChangePassword->execute
-GET  @get_reset_token   : /api/account/reset-token/@token = Actions\Account\GetResetPasswordToken->execute
-PUT  @account_edit      : /api/account/edit               = Actions\Account\Edit->save
+POST @register              : /api/account/register           = Actions\Account\Register->signup
+POST @login                 : /api/account/login              = Actions\Account\Login->authorise
+GET  @logout                : /api/account/logout             = Actions\Account\Logout->execute
+POST @reset                 : /api/account/reset-password     = Actions\Account\ResetPassword->execute
+POST @change_password       : /api/account/change-password    = Actions\Account\ChangePassword->execute
+GET  @get_reset_token       : /api/account/reset-token/@token = Actions\Account\GetResetPasswordToken->execute
+PUT  @account_edit          : /api/account/edit               = Actions\Account\Edit->save
+PUT  @account_remove_avatar : /api/account/remove             = Actions\Account\RemoveLogo->execute
 
 ; settings routes
 POST @settings_save_logo : /api/settings                  = Actions\Settings\SaveLogo->execute
@@ -92,4 +93,5 @@ PUT     @recordings_edit            : /api/recordings/@id               = Action
 DELETE  @recording_delete           : /api/recordings/@id               = Actions\Recordings\Delete->execute
 
 ; notification routes
-GET     @warning_notification       : /api/notification     = Actions\Notification\WarningNotification->execute
+GET     @warning_notification       : /api/notification     = Actions\Notification\WarningNotification->execute
+PUT  @account_remove_avatar : /api/account/remove             = Actions\Account\RemoveLogo->execute

bbbeasy-backend/app/src/Actions/Account/RemoveLogo.php

@@ -0,0 +1,59 @@
+<?php
+
+declare(strict_types=1);
+
+/*
+ * BBBEasy open source platform - https://riadvice.tn/
+ *
+ * Copyright (c) 2022-2023 RIADVICE SUARL and by respective authors (see below).
+ *
+ * This program is free software; you can redistribute it and/or modify it under the
+ * terms of the GNU Lesser General Public License as published by the Free Software
+ * Foundation; either version 3.0 of the License, or (at your option) any later
+ * version.
+ *
+ * BBBEasy is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
+ * PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License along
+ * with BBBEasy; if not, see <http://www.gnu.org/licenses/>.
+ */
+
+namespace Actions\Account;
+
+use Actions\Base as BaseAction;
+use Enum\ResponseCode;
+use Models\User;
+
+/**
+ * Class SaveLogo.
+ */
+class RemoveLogo extends BaseAction
+{
+    /**
+     * @param mixed $f3
+     * @param mixed $params
+     *
+     * @throws \JsonException
+     */
+    public function execute($f3, $params): void
+    {
+        $user = new User();
+        $id   = $this->session->get('user.id');
+        $user = $user->findone(['id = ?', [$id]]);
+        if ($user->dry()) {
+            $this->renderJson([], ResponseCode::HTTP_NOT_FOUND);
+        } else {
+            // Update the avatar to null
+            $user->avatar = null;
+
+            // Save the changes to the user record
+            $user->save();
+
+            // Return a success response
+            $this->logger->info('Avatar successfully updated', ['user' => $user->toArray()]);
+            $this->renderJson(['result' => 'success', 'user' => $user->toArray()]);
+        }
+    }
+}

bbbeasy-frontend/src/App-webapp.css

@@ -507,6 +507,9 @@ fieldset {
     color: #fbbc0b !important;
     background-color: transparent !important;
 }
+.profil-btn .ant-btn-icon {
+    margin-right: auto !important;
+}
 .profil-btn-dropdown .ant-dropdown-menu-item-icon {
     min-width: 25px !important;
     font-size: 13px !important;
@@ -1322,7 +1325,8 @@ fieldset {
 }
 .profile-form .bbbeasy-btn {
     clip-path: polygon(48% 0, 52% 0, 95% 25%, 95% 75%, 52% 100%, 48% 100%, 5% 75%, 5% 25%);
-    background-color: #fbbc0b;
+    /* background-color: #fbbc0b;*/
+
     color: black;
 }
 .profile-form .custom-badge-bg {

bbbeasy-frontend/src/components/Install.tsx

@@ -161,7 +161,7 @@ const Install = () => {
         localStorage.removeItem('user');
 
         InstallService.install()
-            .then((response) => {
+            .then(() => {
                 setLocked(false);
 
                 getSettings();

bbbeasy-frontend/src/components/Labels.tsx

@@ -60,7 +60,6 @@ const Labels = () => {
     const [errorsEdit, setErrorsEdit] = React.useState({});
     const [cancelVisibility, setCancelVisibility] = React.useState<boolean>(false);
     const [isModalVisible, setIsModalVisible] = React.useState<boolean>(false);
-    const [color, setColor] = React.useState<string>('');
     const { token } = theme.useToken();
     const getLabels = () => {
         setLoading(true);

bbbeasy-frontend/src/components/Presets.tsx

@@ -764,4 +764,4 @@ const Presets = () => {
     );
 };
 
-export default withTranslation()(Presets);
+export default withTranslation()(Presets);

bbbeasy-frontend/src/components/Profile.tsx

@@ -40,6 +40,7 @@ import { apiRoutes } from '../routing/backend-config';
 
 import { FormInstance } from 'antd/lib/form';
 import { UserType } from '../types/UserType';
+import authService from '../services/auth.service';
 
 type formType = {
     username?: string;
@@ -53,30 +54,50 @@ type formType = {
 let accountForm: FormInstance = null;
 
 const Profile = () => {
-    const currentUser: UserType = AuthService.getCurrentUser();
-    console.log(currentUser.avatar);
+    const [currentUser, setCurrentUser] = React.useState<UserType>(authService.getCurrentUser());
+
     const initialAddValues: formType = {
         username: currentUser.username,
         email: currentUser.email,
         avatar: currentUser.avatar,
     };
     const [images, setImages] = React.useState([]);
     const [errors, setErrors] = React.useState<string>('');
+    const handleFileName = (imageList) => {
+        if (imageList[0]) {
+            imageList[0].name = 'avatar-' + Date.now() + '.' + imageList[0].file.type.substring(6);
+
+            setImages(imageList);
+        }
+    };
+
+    const handleRemoveAvatar = () => {
+        authService
+            .remove_avatar(currentUser.avatar)
+            .then((response) => {
+                setCurrentUser(response.data.user);
+                authService.updateCurrentUser(response.data.user.username, response.data.user.email, null);
+            })
+            .catch((error) => {
+                console.error(error);
+            });
+    };
 
     const handleUpdate = (formValues: formType) => {
         setErrors('');
 
         // save avatar
-        if (images.length != 0 && images[0].file != null) {
+        if (images[0] != null && images) {
             const formData: FormData = new FormData();
-            formData.append('logo', images[0].file, images[0].file.name);
-            formData.append('logo_name', images[0].file.name);
-
+            formData.append('logo', images[0]['file'], images[0].name);
+            formData.append('logo_name', images[0].name);
             axios.post(apiRoutes.SAVE_FILE_URL, formData).catch((error) => {
                 console.log(error);
             });
 
-            formValues.avatar = images[0].file.name;
+            formValues.avatar = images[0].name;
+        } else {
+            formValues.avatar = null;
         }
 
         //edit account
@@ -89,6 +110,7 @@ const Profile = () => {
                     accountForm.resetFields(['current_password', 'new_password', 'confirm_new_password']);
                     //update LS
                     AuthService.updateCurrentUser(user.username, user.email, user.avatar);
+
                     Notifications.openNotificationWithIcon('success', t('edit_account_success'));
                 }
             })
@@ -148,10 +170,11 @@ const Profile = () => {
                             <ImageUploading
                                 multiple={false}
                                 value={images}
-                                onChange={(imageList: ImageListType) => setImages(imageList as never[])}
+                                onChange={(imageList: ImageListType) => handleFileName(imageList)}
                                 maxNumber={1}
+                                acceptType={['jpg', 'jpeg', 'png']}
                             >
-                                {({ imageList, onImageUpload, onImageUpdate, onImageRemove }) => (
+                                {({ imageList, onImageUpload, onImageUpdate }) => (
                                     <Badge
                                         count={
                                             <Tooltip
@@ -176,23 +199,32 @@ const Profile = () => {
                                         <Avatar
                                             src={
                                                 imageList[0] != null ? (
+                                                    <div className="ant-image">
+                                                        <img
+                                                            className="ant-image-img"
+                                                            //   src={  src={logo ? process.env.REACT_APP_API_URL +"/"+ logo : '/images/logo_01.png'}}
+                                                            src={imageList[0].dataURL}
+                                                            width={130}
+                                                            height={130}
+                                                        />
+                                                    </div>
+                                                ) : currentUser.avatar != null ? (
                                                     <div className="ant-image">
                                                         <img
                                                             className="ant-image-img"
                                                             //   src={  src={logo ? process.env.REACT_APP_API_URL +"/"+ logo : '/images/logo_01.png'}}
                                                             src={
-                                                                currentUser.avatar
-                                                                    ? process.env.REACT_APP_API_URL +
-                                                                      '/' +
-                                                                      currentUser.avatar
-                                                                    : '/images/logo_01.png'
+                                                                process.env.REACT_APP_API_URL + '/' + currentUser.avatar
                                                             }
                                                             width={130}
                                                             height={130}
                                                         />
                                                         <div className="ant-image-mask">
                                                             <div className="ant-image-mask-info">
-                                                                <DeleteOutlined onClick={() => onImageRemove(0)} />
+                                                                <DeleteOutlined
+                                                                    style={{ 'width': '0.25em' }}
+                                                                    onClick={() => handleRemoveAvatar()}
+                                                                />
                                                             </div>
                                                         </div>
                                                     </div>
@@ -201,6 +233,12 @@ const Profile = () => {
                                             icon={imageList[0] == null ? <UserOutlined /> : null}
                                             size={{ xs: 32, sm: 40, md: 64, lg: 80, xl: 125, xxl: 135 }}
                                             className="bbbeasy-btn"
+                                            style={{
+                                                backgroundColor:
+                                                    imageList[0] == null && currentUser.avatar == null
+                                                        ? '#fbbc0b'
+                                                        : 'white',
+                                            }}
                                         />
                                     </Badge>
                                 )}

bbbeasy-frontend/src/components/RoomDetails.tsx

@@ -24,14 +24,7 @@ import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from 're
 import EN_US from '../locale/en-US.json';
 import { t } from 'i18next';
 
-import {
-    EditOutlined,
-    FacebookOutlined,
-    LinkedinOutlined,
-    LinkOutlined,
-    MailOutlined,
-    TwitterOutlined,
-} from '@ant-design/icons';
+import { EditOutlined, FacebookOutlined, LinkedinOutlined, LinkOutlined, TwitterOutlined } from '@ant-design/icons';
 import { Avatar, Button, Card, Col, Input, Row, Space, Tag, Tooltip, Typography, Form, Select, Popconfirm } from 'antd';
 
 import Notifications from './Notifications';
@@ -392,7 +385,7 @@ const RoomDetails = () => {
             </Form.Item>
         );
     };
-    const renderLinkOrUsername = (open) => {
+    const renderLinkOrUsername = () => {
         if (currentUser != null) {
             return (
                 <Input
@@ -481,7 +474,7 @@ const RoomDetails = () => {
                                                             ))}
                                                         </div>
 
-                                                        {renderLinkOrUsername(open)}
+                                                        {renderLinkOrUsername}
                                                     </>
                                                 ) : (
                                                     <Space size="middle" className="edit-room-form">

bbbeasy-frontend/src/components/Step2Form.tsx

@@ -17,7 +17,7 @@
  */
 
 import React from 'react';
-import { Trans, useTranslation, withTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 import { message, Form, Input, Typography, Upload, InputNumber, theme, ColorPicker, Space } from 'antd';
 import { InboxOutlined } from '@ant-design/icons';

bbbeasy-frontend/src/components/layout/AppHeader.tsx

@@ -57,7 +57,6 @@ import notificationService from '../../services/notification.service';
 
 import settingsService from 'services/settings.service';
 import { SettingsType } from 'types/SettingsType';
-import { apiRoutes } from 'routing/backend-config';
 
 const { Header } = Layout;
 const { Title, Text, Paragraph } = Typography;
@@ -254,7 +253,29 @@ const AppHeader = () => {
                                     arrow
                                     trigger={['click']}
                                 >
-                                    <Button type="primary" icon={<UserOutlined />} className="profil-btn" />
+                                    {currentUser.avatar == null ? (
+                                        <Button type="primary" className="profil-btn" icon={<UserOutlined />}>
+                                            {' '}
+                                        </Button>
+                                    ) : (
+                                        <Button
+                                            type="primary"
+                                            className="profil-btn"
+                                            style={{
+                                                backgroundPosition: 'center',
+                                                backgroundSize: 'cover',
+                                                width: '40px',
+                                                height: '40px',
+                                                maxWidth: '40px',
+                                                maxHeight: '40px',
+                                                backgroundImage: `url( ${
+                                                    process.env.REACT_APP_API_URL + '/' + currentUser.avatar
+                                                })`,
+                                            }}
+                                        >
+                                            {' '}
+                                        </Button>
+                                    )}
                                 </Dropdown>
                                 {dropdownLang}
                             </Space>