@elyx-code/editor-ui 0.0.2

package/src/components/user/CurrentUserAvatar.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from 'react';
+import './user.css';
+import { getCurrentUserOrLogoutRedirect, signOut } from '../../auth';
+import DropdownMenuPopup from '../../lib/dropdown/DropdownMenuPopup';
+import { useNavigate } from 'react-router-dom';
+import { Logger } from '@elyx-code/common-ts-utils';
+
+interface ICurrentUserAvatarProps {
+	profilePagePath: string;
+}
+
+const CurrentUserAvatar: React.FC<ICurrentUserAvatarProps> = ({
+	profilePagePath,
+}) => {
+	const [user, setUser] = useState<any>(null);
+	const navigate = useNavigate();
+
+	useEffect(() => {
+		const fetchCurrentUser = async () => {
+			try {
+				const user = await getCurrentUserOrLogoutRedirect();
+				setUser(user);
+			} catch (e) {
+				Logger.log('Error getting user profile', e);
+			}
+		};
+		fetchCurrentUser();
+	}, []);
+
+	// @ts-ignore
+	const profilePath = profilePagePath.replace('{id}', user?.id || '');
+
+	return (
+		<div>
+			<div id='own-user-avatar' className='user-avatar'>
+				{user?.picture ? (
+					<img src={user.picture} title='You' alt='User Avatar' />
+				) : (
+					<i className='fa-solid fa-user' title='You' />
+				)}
+			</div>
+			<DropdownMenuPopup
+				popupOptions={{
+					anchorQuerySelector: '#own-user-avatar',
+					placement: 'bottom',
+				}}
+				options={[
+					{
+						navigateTo: profilePath,
+						label: 'Profile',
+					},
+					{
+						onClick: async () => {
+							await signOut();
+							navigate('/auth/sign-in');
+						},
+						label: 'Logout',
+					},
+				]}
+			/>
+		</div>
+	);
+};
+
+export default CurrentUserAvatar;

package/src/components/user/UserChip.tsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from 'react';
+import { getUser, resolveUserDisplayLabel } from '../../services/user';
+import './user.css';
+import { IUser } from '@elyx-code/definitions';
+
+type UserChipProps = {
+	user: IUser | { id: string } | { email: string };
+	labelStyles?: React.CSSProperties;
+}
+
+const UserChip: React.FC<UserChipProps> = (props) => {
+	const labelStyles = props.labelStyles || {};
+
+	const [user, setUser] = useState<IUser | null>(null);
+	const [isLoading, setIsLoading] = useState<boolean>(false);
+
+	const getData = async () => {
+		const hasOnlyIdentifier = Object.keys(props).length === 1;
+
+		if (hasOnlyIdentifier) {
+			setIsLoading(true);
+			const user = await getUser(props.user);
+
+			if (user) {
+				setUser(user);
+			}
+		} else {
+			setUser(props.user as IUser);
+		}
+
+		setIsLoading(false);
+	};
+
+	useEffect(() => {
+		getData();
+	}, []);
+
+	return (
+		<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+			<div className='small-user-avatar'>
+				{user?.picture ? (
+					<img
+						src={user.picture}
+						title={`${user?.name} ${user?.lastName}`}
+						alt='User Avatar'
+					/>
+				) : (
+					<i
+						className='fa-solid fa-user'
+						title={`${user?.name} ${user?.lastName}`}
+						style={{ fontSize: '14px' }}
+					></i>
+				)}
+			</div>
+			<p style={{ margin: '0px', color: 'rgba(0,0,0,0.54)', fontSize: '14px', ...labelStyles }}>
+				{resolveUserDisplayLabel(user, isLoading ? '' : 'Account deleted')}
+			</p>
+		</div>
+	);
+};
+
+export default UserChip;

package/src/components/user/user.css

@@ -0,0 +1,39 @@
+.user-avatar {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background: lightgray;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--color-main-grey);
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+.small-user-avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: lightgray;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--color-main-grey);
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+.user-avatar img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.small-user-avatar img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+}

package/src/components/user-profile/ChangePasswordForm.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { changePassword } from '../../auth';
+import Button from '../../lib/button/Button';
+import TextField from '../../lib/text-field/TextField';
+
+const ChangePasswordForm: React.FC = () => {
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const [oldPassword, setOldPassword] = useState('');
+	const [newPassword, setNewPassword] = useState('');
+	const [showCurrentPassword, setShowCurrentPassword] = useState(false);
+	const [showNewPassword, setShowNewPassword] = useState(false);
+
+	const handleChangePassword = async (
+		oldPassword: string,
+		newPassword: string
+	) => {
+		setIsSubmitting(true);
+		await changePassword(oldPassword, newPassword);
+		setIsSubmitting(false);
+	};
+
+	return (
+		<form
+			style={{ display: 'flex', gap: '10px', alignItems: 'center' }}
+			onSubmit={(e) => {
+				e.preventDefault();
+				handleChangePassword(oldPassword, newPassword);
+			}}
+		>
+			<TextField
+				iconEnd='fa-solid fa-eye'
+				type={showCurrentPassword ? 'text' : 'password'}
+				name='current-password'
+				label='Current password'
+				autocomplete='current-password'
+				value={oldPassword}
+				disabled={isSubmitting}
+				onChange={(value: any) => setOldPassword(value)}
+				onIconClick={() => setShowCurrentPassword(!showCurrentPassword)}
+			/>
+			<TextField
+				iconEnd='fa-solid fa-eye'
+				type={showNewPassword ? 'text' : 'password'}
+				name='new-password'
+				label='New password'
+				autocomplete='new-password'
+				value={newPassword}
+				disabled={isSubmitting}
+				onChange={(value: any) => setNewPassword(value)}
+				onIconClick={() => setShowNewPassword(!showNewPassword)}
+			/>
+			<div style={{ marginBottom: '16px' }}>
+				<Button
+					variant='outlined'
+					color='primary'
+					size='small'
+					type='submit'
+					loading={isSubmitting}
+				>
+					Save
+				</Button>
+			</div>
+		</form>
+	);
+};
+
+export default ChangePasswordForm;