From 749bebca18e074c44b9c2d0e214e6c334dced92a Mon Sep 17 00:00:00 2001
From: Alfonso Pierantonio <alfonso.pierantonio@univaq.it>
Date: Wed, 18 Dec 2024 19:21:18 +0100
Subject: [PATCH] Profilo

---
 src/App.tsx                        |   9 --
 src/api/persistance/auth.ts        |   2 +
 src/api/persistance/users.ts       |  43 +++++++
 src/pages/Account.tsx              | 194 +++++++++++++++++++++++++----
 src/pages/Auth.tsx                 |   7 +-
 src/pages/components/Edit/Edit.tsx |  75 +++++++++--
 6 files changed, 280 insertions(+), 50 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index d39f6016e..e6deb6f95 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -141,12 +141,3 @@ export const AppConnected = connect<StateProps, DispatchProps, OwnProps, DState>
 )(App);
 
 export default AppConnected;
-
-
-/* SPLASH SCREEN
-return(<div className={'w-100 h-100 text-center bg-smoke'}>
-    <img style={{height: '60%', width: '80%'}} className={'mt-3 rounded shadow'} src={SplashImage}></img>
-    <Oval height={80} width={80} wrapperStyle={{justifyContent: 'center'}} wrapperClass={'mt-3'}
-          color={'#475e6c'} secondaryColor={'#ff8811'} />
-</div>);
-*/
diff --git a/src/api/persistance/auth.ts b/src/api/persistance/auth.ts
index 8631d6734..823334c20 100644
--- a/src/api/persistance/auth.ts
+++ b/src/api/persistance/auth.ts
@@ -21,6 +21,8 @@ class AuthApi {
         const user = DUser.new('Offline', 'User', 'Unknown', 'Unknown', 'Unknown', false, 'Unknown', 'Unknown', `Pointer_OfflineUser`);//`Pointer${Date.now()}_OfflineUser`);
         Storage.write('user', user);
     }
+
+    
 }
 
 export {AuthApi};
diff --git a/src/api/persistance/users.ts b/src/api/persistance/users.ts
index 6f96930e1..0665f9f9f 100644
--- a/src/api/persistance/users.ts
+++ b/src/api/persistance/users.ts
@@ -9,11 +9,54 @@ class UsersApi {
         const rawUser = DUser.new(user.name, user.surname, user.nickname, user.affiliation, user.country, user.newsletter, user.email, '', user.id);
         return LUser.fromD(rawUser);
     }
+    static async getUserById(id: string): Promise<LUser|null> {
+        const response = await Api.get(`${Api.persistance}/users?id=${id}`);
+        if(response.code !== 200) return null;
+        const user = U.wrapper<DUser>(response.data);
+        const rawUser = DUser.new(user.name, user.surname, user.nickname, user.affiliation, user.country, user.newsletter, user.email, '', user.id);
+        return LUser.fromD(rawUser);
+    }
     static async getAllEmails(): Promise<string[]> {
         const response = await Api.get(`${Api.persistance}/users`);
         if(response.code !== 200) return [];
         const users = U.wrapper<DUser[]>(response.data);
         return users.filter(u => u.id !== DUser.current).map(u => u.email);
     }
+
+    static async updateUserById(
+
+            id: string, 
+            name: string, 
+            surname: string, 
+            nickname: string,
+            country: string, 
+            affiliation: string, 
+            newsletter: boolean): Promise<LUser|null> {
+
+        const response = await Api.get(`${Api.persistance}/users?id=${id}`);
+        if(response.code !== 200) return null;
+
+        const patch_response = await Api.patch(`${Api.persistance}/users/update?id=${id}`, {name: name, surname: surname, country: country, nickname: nickname, affiliation: affiliation, newsletter: newsletter});
+
+        if(patch_response.code !== 200) {return null};
+        const user = U.wrapper<DUser>(response.data);  
+
+        return LUser.fromD(user); 
+    }
+
+    static async updatePasswordById(id: string, password: string): Promise<LUser|null> {
+
+        const patch_response = await Api.patch(`${Api.persistance}/users/set_password?id=${id}`, {password: password});
+
+        if (patch_response.code === 400) {
+            return null;
+        };
+
+        const user = U.wrapper<DUser>(patch_response.data);  
+        
+
+        return LUser.fromD(user); 
+    }
+
 }
 export {UsersApi};
diff --git a/src/pages/Account.tsx b/src/pages/Account.tsx
index 2037fff6a..8465d68b0 100644
--- a/src/pages/Account.tsx
+++ b/src/pages/Account.tsx
@@ -1,93 +1,235 @@
 import {DState, DUser, LUser, Try} from '../joiner';
 import {Dashboard} from './components';
-import {FakeStateProps} from '../joiner/types';
+import {FakeStateProps, windoww} from '../joiner/types';
 import React, {Component, Dispatch, ReactElement} from "react";
 import {connect} from "react-redux";
 import { Edit, EditCountry } from './components/Edit/Edit';
-
-
+import { UsersApi } from '../api/persistance';
+import { useStateIfMounted } from 'use-state-if-mounted';
+import { on } from 'events';
+import Api from '../data/api';
+import Storage from '../data/storage';
 
 
 function AccountComponent(props: AllProps): JSX.Element {
     const {user} = props;
+
+    const [name, setName] = useStateIfMounted(user.name);
+    const [surname, setSurname] = useStateIfMounted(user.surname);
+    const [nickname, setNickname] = useStateIfMounted(user.nickname);
+    const [country, setCountry] = useStateIfMounted(user.country);
+    const [affiliation, setAffiliation] = useStateIfMounted(user.affiliation);
+    const [newsletter, setNewsletter] = useStateIfMounted(user.newsletter);
+    
+    const [email, setEmail] = useStateIfMounted(user.email);
+
+    const [old_password, setOldPassword] = useStateIfMounted('01234567');
+    const [new_password, setNewPassword] = useStateIfMounted('12345678');
+    const [check_password, setCheckPassword] = useStateIfMounted('23456789');
+
+
+    async function update_password(
+        old_password: string, 
+        new_password:string, 
+        check_password:string) {
+
+        const U = windoww.U;
+        
+        const response = await Api.post(`${Api.persistance}/auth/login`, {email: email, password: old_password});
+
+        if (response.code !== 200) {
+            U.alert('e', 'Your password does not match our records.');
+            return;
+        }
+        if (new_password !== check_password) {
+            U.alert('e', 'Paswords do not match.');
+            return;
+        }
+
+        const response_password = await UsersApi.updatePasswordById(user.id, new_password);
+
+        if (response_password === null) {
+            U.alert('e', 'Something went wrong.');
+            return;
+        }
+
+        
+        U.alert('i', 'Your password has been successfully updated!');
+        
+        
+        
+        
+        setNewPassword('01234567');
+        setCheckPassword('12345678');
+
+
+    }
+   
+    function update_newsletter(check_value: boolean) {
+        setNewsletter(check_value);
+    }
+
+    function update_profile (
+        id: string, 
+        name: string, 
+        surname: string, 
+        nickname: string,
+        country: string, 
+        affiliation: string,
+        newsletter: boolean) {
+
+        const U = windoww.U;
+
+        const response = UsersApi.updateUserById(
+            user.id, 
+            name, 
+            surname, 
+            nickname, 
+            country, 
+            affiliation, 
+            newsletter);
+
+
+        if (response === null) {
+            U.alert('e', 'Something went wrong while updating your profile.');
+            return;
+        } 
+
+        const updated_user = DUser.new(name, surname, nickname, affiliation, country, newsletter, user.email, user.token, user.id);
+        Storage.write('user', updated_user);
+        U.resetState();
+        
+        U.alert('i', 'Your profile has been updated!');
+        
+    }
+
     return(<Try>
         <Dashboard active={'Account'} version={props.version}>
             <>
             <div className={'p-2 edit-container'}>
                 <h2><i className="bi bi-person-square"></i> Profile</h2>
 
-                <Edit name={'name'} 
+                <Edit 
+                    id={user.id}
+                    name={'name'} 
                     label={'Name'} 
                     type={'text'} 
-                    value={user.name} 
+                    value={name} 
                     required={true}
-                    tooltip={'Your first name.'}
+                    disabled={false}
+                    onChange={(e) => setName(e.target.value)}
+                    tooltip={'Your first name.'}  
                 />
-                <Edit name={'surname'} 
+                <Edit 
+                    id={user.id}
+                    name={'surname'} 
                     label={'Surname'} 
                     type={'text'} 
-                    value={user.surname} 
+                    value={surname} 
                     required={true}
+                    onChange={(e) => setSurname(e.target.value)}
                     tooltip={'Your family name.'}
                 />
-                <Edit name={'nickname'} 
+                <Edit 
+                    id={user.id}
+                    name={'nickname'} 
                     label={'Nickname'} 
                     type={'text'} 
-                    value={user.nickname} 
+                    value={nickname} 
                     required={true}
+                    onChange={(e) => setNickname(e.target.value)}
                     tooltip={'Your nickname, it will be used as a short form for addressing you.'}
                 />
-                <Edit name={'email'} 
+                <Edit 
+                    id={user.id}
+                    name={'email'} 
                     label={'Email'} 
                     type={'email'} 
                     value={user.email} 
                     disabled={true}
                     tooltip={'Your email, it is not possible to change it.'}
                 />
-                <Edit name={'affiliation'} 
+                <Edit 
+                    id={user.id}
+                    name={'affiliation'} 
                     label={'Affiliation'} 
                     type={'text'} 
-                    value={user.affiliation}
+                    value={affiliation}
                     required={true}
+                    onChange={(e) => setAffiliation(e.target.value)}
                     tooltip={'Your current affiliation.'}
                 />
-                <Edit name={'country'} 
+                <Edit 
+                    id={user.id}
+                    name={'country'} 
                     label={'Country'} 
                     type={'country'} 
-                    value={user.country}
+                    value={country}
+                    onChange={(e) => setCountry(e.target.value)}
                     tooltip={'Select your affiliation country.'}
                 />
                 
-                <Edit name={'newsletter'} 
+                <Edit 
+                    id={user.id}
+                    name={'newsletter'} 
                     label={'Newsletter'} 
                     type={'checkbox'} 
-                    value={user.newsletter+''}
+                    value={newsletter+''}
+                    onChange={(e) => update_newsletter(!newsletter)}
                     tooltip={'Select it if you want to receive low-intensity updates from us (e.g., new releases, new learning and teaching material, and the likes).'}
                 />
 
-                <button className="btn alert-btn my-2  px-4 space-above">save</button>
+                <button 
+                    className="btn alert-btn my-2 px-4 space-above" 
+                    onClick={(e) => {update_profile(
+                        user.id, 
+                        name, 
+                        surname, 
+                        nickname, 
+                        country, 
+                        affiliation, 
+                        newsletter)}}>save</button>
+
+
             </div>
             <div className={'p-2 edit-container space-above'}>
                 <div className={'password-container'}>
                     <h3><i className="bi bi-fingerprint"></i> Password</h3>
 
-                    <Edit name={'password'} 
+                    <Edit 
+                        id={user.id}
+                        name={'old_password'} 
                         label={'Password'} 
                         type={'password'} 
-                        value={'user.password'}                 
+                        value={old_password}
+                        required={true}
+                        onChange={(e) => setOldPassword(e.target.value)}              
                     />
-                    <Edit name={'password'} 
+
+
+                    <Edit 
+                        id={user.id}
+                        name={'new_password'} 
                         label={'New Password'} 
                         type={'password'} 
-                        value={'user.password'}
-                        className={'space-above small'}                 
+                        value={new_password}
+                        required={true}
+                        onChange={(e) => setNewPassword(e.target.value)} 
+                        className={'space-above'}                 
                     />
-                    <Edit name={'password'} 
+                    <Edit 
+                        id={user.id}
+                        name={'check_password'} 
                         label={'Confirm Password'} 
                         type={'password'} 
-                        value={'user.password'}                 
+                        required={true}
+                        value={check_password}
+                        onChange={(e) => setCheckPassword(e.target.value)}              
                     />
-                    <button className="btn alert-btn my-2  px-4 space-above">change password</button>
+                    <button 
+                        className="btn alert-btn my-2  px-4 space-above"
+                        onClick={(e) => update_password(old_password, new_password, check_password)}
+                        >change password</button>
                 </div>
 
             </div>
diff --git a/src/pages/Auth.tsx b/src/pages/Auth.tsx
index d306fe1ac..c59ab5835 100644
--- a/src/pages/Auth.tsx
+++ b/src/pages/Auth.tsx
@@ -8,6 +8,7 @@ import logo from '../static/img/jjodel.jpg';
 import {Tooltip} from '../components/forEndUser/Tooltip';
 
 function AuthPage(): JSX.Element {
+
     const [action, setAction] = useStateIfMounted<'login'|'register'|'retrieve-password'>('login');
     const [nickname, setNickname] = useStateIfMounted('');
     const [name, setName] = useStateIfMounted('');
@@ -18,6 +19,7 @@ function AuthPage(): JSX.Element {
     const [password, setPassword] = useStateIfMounted('');
     const [passwordCheck, setPasswordCheck] = useStateIfMounted('');
     const [newsletter, setNewsletter] = useStateIfMounted(false);
+
     const navigate = useNavigate();
 
     const onSubmit = async(e: FormEvent<HTMLFormElement>) => {
@@ -49,11 +51,12 @@ function AuthPage(): JSX.Element {
             U.alert('e', 'Email or password unknown.');
             return;
         }
+
         const data = U.wrapper<DUser>(response.data);
+        
         const user = DUser.new(data.name, data.surname, data.nickname, data.affiliation, data.country, data.newsletter || false, data.email, data.token, data.id);
         Storage.write('user', user);
         Storage.write('token', user.token);
-        //navigate('/dashboard');
         navigate('/allProjects');
         U.resetState();
     }
@@ -475,7 +478,7 @@ function AuthPage(): JSX.Element {
                 <button className={'d-block btn btn-primary p-1 mx-auto mt-3 login-button'} type={'submit'}>
                     Login
                 </button>
-                {(true || window.location.host.includes('localhost')) &&
+                {(window.location.host.includes('localhost')) &&
                     <button className={'d-block btn btn-primary p-1 mx-auto mt-3 login-button'} onClick={(e) => offline()}>Offline mode</button>
                 }
             </>}
diff --git a/src/pages/components/Edit/Edit.tsx b/src/pages/components/Edit/Edit.tsx
index 5d3274ee9..ec132f8f2 100644
--- a/src/pages/components/Edit/Edit.tsx
+++ b/src/pages/components/Edit/Edit.tsx
@@ -1,8 +1,10 @@
 
+import { UsersApi } from '../../../api/persistance/users';
 import { Tooltip } from '../../../components/forEndUser/Tooltip';
 import './edit.scss';
 
 type EditProps = {
+    id: string;
     name: string;
     label: string;
     type: 'text' | 'email' | 'password' | 'checkbox' | 'country';
@@ -11,6 +13,7 @@ type EditProps = {
     disabled?: boolean;
     tooltip?:string;
     className?:string;
+    onChange?: (e: any)=>void; // MouseEvent
 }
 
 const EditCountry = (props: EditProps) => {
@@ -28,9 +31,9 @@ const EditCountry = (props: EditProps) => {
                         name={props.name}
                         style={{height: 'calc(var(--input-height)*1.3)'}} 
                         defaultValue={props.value} 
-                        onChange={e => alert('')}
                         required={required}
-                        disabled = {disabled}>
+                        disabled = {disabled}
+                        onChange={props.onChange}>
                             
                         <option value="Afghanistan">Afghanistan</option>
                         <option value="Åland Islands">Åland Islands</option>
@@ -294,14 +297,14 @@ const EditCheckbox = (props: EditProps) => {
         <div className={'form-group edit checkbox'}>
             <Tooltip tooltip={tooltip}>
                 <label>
-                            <input className={'input text-start d-block mt-2 '+className}
-                                value={props.value}
-                                onChange={e => alert(props.name)}
-                                type={props.type} 
-                                required={required}
-                                disabled = {disabled}
-                            />
-                            <span>{props.label}{props.required && <> (*)</>}</span>
+                    <input className={'input text-start d-block mt-2 '+className}
+                        type={"checkbox"} 
+                        required={required}
+                        disabled={disabled}
+                        checked={props.value === 'true'? true: false}
+                        onChange={props.onChange}
+                    />
+                    <span>{props.label}{props.required && <> (*)</>}</span>
                 </label>
             </Tooltip>
         </div>
@@ -322,13 +325,15 @@ const EditDefault = (props: EditProps) => {
             <Tooltip tooltip={tooltip}>
                 <label>
                     <span>{props.label}{props.required && <> (*)</>}</span>
+                    
                     <input className={'input text-start d-block mt-2'}
                         value={props.value}
-                        onChange={e => alert(props.name)}
-                        type={props.type} 
+                        type={props.type}
                         required={required}
                         disabled = {disabled}
+                        onChange={props.onChange}
                     />
+                    
                 </label>
             </Tooltip>
         </div>
@@ -336,6 +341,50 @@ const EditDefault = (props: EditProps) => {
     </>);
 }
 
+const EditPassword = (props: EditProps) => {
+
+    let required = props.required ? props.required : false;
+    let disabled = props.disabled ? props.disabled : false;
+    let tooltip = props.tooltip ? props.tooltip : '';
+    let className = props.className ? props.className : '';
+
+    function focus_in(e: any) {
+        if (e.target.value === props.value) {
+            e.target.value = '';
+        } 
+    }
+    function focus_out(e: any) {
+        if (e.target.value === '') {
+            e.target.value = props.value;
+        } 
+    }
+
+    return (<>
+        
+        <div className={'form-group edit ' + className}>
+
+            <Tooltip tooltip={tooltip}>
+                <label>
+                    <span>{props.label}{props.required && <> (*)</>}</span>
+                    
+                    <input className={'input text-start d-block mt-2'}
+                        value={props.value}
+                        type={"password"}
+                        required={required}
+                        disabled = {disabled}
+                        onChange={props.onChange}
+                        onFocus={(e) => focus_in(e)}
+                        onBlur={(e) => focus_out(e)}
+                    />
+                    
+                </label>
+            </Tooltip>
+        </div>
+        
+    </>);
+}
+
+
 const Edit = (props: EditProps) => {
 
     return (<> 
@@ -343,7 +392,7 @@ const Edit = (props: EditProps) => {
         {props.type === 'checkbox' && <EditCheckbox {...props}/>}
         {props.type === 'text' && <EditDefault {...props}/>}
         {props.type === 'email' && <EditDefault {...props}/>}
-        {props.type === 'password' && <EditDefault {...props}/>}
+        {props.type === 'password' && <EditPassword {...props}/>}
     </>);
 }