Skip to content

Commit

Permalink
Profilo
Browse files Browse the repository at this point in the history
  • Loading branch information
@apierantonio
apierantonio committed Dec 18, 2024
1 parent 5107960 commit 749bebc
Show file tree
Hide file tree
Showing 6 changed files with 280 additions and 50 deletions.
9 changes: 0 additions & 9 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>);
*/
2 changes: 2 additions & 0 deletions src/api/persistance/auth.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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};
43 changes: 43 additions & 0 deletions src/api/persistance/users.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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};
194 changes: 168 additions & 26 deletions src/pages/Account.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
7 changes: 5 additions & 2 deletions src/pages/Auth.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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('');
Expand All @@ -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>) => {
Expand Down Expand Up @@ -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();
}
Expand Down Expand Up @@ -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>
}
</>}
Expand Down
Loading

0 comments on commit 749bebc

Please sign in to comment.