@elyx-code/editor-ui 0.0.2

package/src/auth/index.ts

@@ -0,0 +1,318 @@
+import { Auth } from 'aws-amplify';
+import jwt from 'jwt-decode';
+import { getUser } from '../services/user';
+import axios from 'axios';
+import { Logger } from '@elyx-code/common-ts-utils';
+import { envConfig } from '../config';
+
+// How to refresh expired tokens:
+// https://github.com/aws-amplify/amplify-js/issues/2560#issuecomment-481707972
+
+// This variable is to cache the access token
+let accessToken: string = '';
+let accessTokenExpiration: number = 0;
+
+// Change password function
+export async function changePassword(oldPassword: string, newPassword: string) {
+	const user = await Auth.currentAuthenticatedUser();
+
+	return Auth.changePassword(user, oldPassword, newPassword);
+}
+
+// Sign up function
+export async function signUp(email: string, password: string) {
+	return Auth.signUp({
+		username: email, // Use email as the username
+		password,
+		attributes: {
+			email,
+		},
+	});
+}
+
+// Sign in function
+export async function signIn(email: string, password: string) {
+	return Auth.signIn(email, password); // Use email as the username
+}
+
+// Confirm sign up function
+export async function confirmSignUp(email: string, code: string) {
+	return await Auth.confirmSignUp(email, code);
+}
+
+// Sign out function
+export async function signOut() {
+	await Auth.signOut();
+	accessToken = '';
+}
+
+// Send email confirmation code function
+export async function resendConfirmationCode(email: string) {
+	return await Auth.resendSignUp(email);
+}
+
+// Forgot password function
+export async function forgotPassword(email: string) {
+	return Auth.forgotPassword(email);
+}
+
+// Forgot password submit function
+export async function forgotPasswordSubmit(
+	email: string,
+	code: string,
+	new_password: string,
+) {
+	return Auth.forgotPasswordSubmit(email, code, new_password);
+}
+
+// Get the authenticated user
+export async function getCurrentSession() {
+	try {
+		return await Auth.currentSession();
+	} catch (error) {
+		Logger.log('Error getting current user session: ', error);
+	}
+}
+
+export async function getAccessToken(): Promise<string | null> {
+	try {
+		// Check if the access token is expired, by comparing the current timestamp with 'accessTokenExpiration'
+		// If so, set the current token to an empty value, then call this function (recursion), so it fetches a new token
+		// We check if the token expires within the next 5 minutes to have some buffer
+		if (accessToken) {
+			if (accessTokenExpiration < Date.now() + 5 * 60 * 1000) {
+				accessToken = '';
+				accessTokenExpiration = 0;
+
+				return await getAccessToken();
+			} else {
+				return accessToken;
+			}
+		}
+
+		// Refreshing access token
+
+		const session: any = await getCurrentSession();
+
+		if (session?.accessToken?.jwtToken) {
+			accessToken = session.accessToken.jwtToken;
+			accessTokenExpiration = session.accessToken.payload.exp * 1000;
+			return accessToken;
+		}
+
+		const user = await Auth.currentAuthenticatedUser();
+
+		if (!user) {
+			accessToken = '';
+			accessTokenExpiration = 0;
+
+			return null;
+		} else if (user.token) {
+			// Decode token to read the expiration date
+			accessToken = user.token;
+			const decodedToken: any = jwt(accessToken);
+			accessTokenExpiration = decodedToken.exp * 1000;
+
+			return accessToken;
+		} else if (user.signInUserSession.accessToken) {
+			accessToken = user.signInUserSession.accessToken.jwtToken;
+			const decodedToken: any = jwt(accessToken);
+			accessTokenExpiration = decodedToken.exp * 1000;
+
+			return accessToken;
+		}
+
+		accessToken = '';
+		accessTokenExpiration = 0;
+
+		return null;
+	} catch (error) {
+		Logger.log('Error getting access token: ', error);
+
+		return null;
+	}
+}
+
+export async function getRefreshToken(): Promise<string | null> {
+	try {
+		const session: any = await Auth.currentSession();
+		return session.refreshToken.token;
+	} catch (error) {
+		return null;
+	}
+}
+
+// Get email from session user, either in the cognito uer session format, or the federated identity format
+function getEmailFromSessionUser(
+	sessionUser:
+		| {
+				attributes: { email: string };
+		  }
+		| { email: string },
+) {
+	// @ts-ignore
+	const cognitoEmail = sessionUser?.attributes?.email;
+
+	if (cognitoEmail) {
+		return cognitoEmail;
+	}
+
+	// @ts-ignore
+	if (sessionUser?.email) {
+		// @ts-ignore
+		return sessionUser.email;
+	}
+}
+
+// Get current user
+export async function getCurrentUser(): Promise<any> {
+	const session = await Auth.currentAuthenticatedUser();
+
+	if (!session) {
+		return null;
+	}
+
+	const email = getEmailFromSessionUser(session);
+
+	const user = await getUser({
+		email,
+	});
+
+	return user;
+}
+
+// Uses the 'getCurrentUser' function to get the current user,
+// or redirects to the login page if the user is not logged in or error occurs
+export async function getCurrentUserOrLogoutRedirect(): Promise<any> {
+  const triggerRedirect = async () => {
+    const baseUrl = window.location.origin;
+    let currentPath = window.location.pathname + window.location.search;
+    
+    // Prevent redirect loops or redirecting back to the auth page itself
+    if (currentPath.startsWith('/auth')) {
+      currentPath = '/gallery';
+    }
+
+    const newPath = `/auth/sign-in?redirectTo=${encodeURIComponent(currentPath)}`;
+    window.location.replace(baseUrl + newPath);
+  };
+
+  try {
+    const user = await getCurrentUser();
+
+    if (!user) {
+      await signOut();
+      await triggerRedirect();
+      return null;
+    }
+
+    return user;
+  } catch (error) {
+    try {
+      await signOut();
+    } catch (err) {
+      Logger.log('Error signing out: ', err);
+    }
+    Logger.log('Error getting current user: ', error);
+    await triggerRedirect();
+    return null;
+  }
+}
+
+// Exchange Google token for temporary AWS credentials
+const getAWSCredentialsFromGoogleCreds = async (credential: string) => {
+	const token = jwt(credential) as any;
+
+	const user = {
+		email: token.email,
+		name: token.given_name,
+		family_name: token.family_name,
+	};
+
+	const creds = await Auth.federatedSignIn(
+		'google',
+		{ token: credential, expires_at: token.exp },
+		user,
+	);
+
+	const accessToken = await getAccessToken();
+
+	try {
+		// We save this user on our database
+		await axios.post(
+			`${envConfig.API_BASE_URL}/user-service/v1/user/sync`,
+			{
+				email: user.email,
+				name: user.name,
+				lastName: user.family_name,
+				identityProviderUserId: creds.identityId,
+				identityProvider: 'google',
+				picture: token.picture,
+			},
+			{
+				headers: {
+					Authorization: 'Bearer ' + accessToken,
+				},
+			},
+		);
+	} catch (error) {
+		Logger.log('Error saving user on our database: ', error);
+	}
+};
+
+export const createGoogleSocialSignInButtons = () => {
+	// @ts-ignore
+	if (window.google && window.google?.accounts) {
+		// Options for Google buttons can be found here:
+		// https://developers.google.com/identity/gsi/web/reference/js-reference#theme
+		// @ts-ignore
+		window.google.accounts.id.renderButton(
+			document.getElementById('google-sign-up-button'),
+			{ theme: 'outline', size: 'medium' },
+		);
+
+		// @ts-ignore
+		window.google.accounts.id.renderButton(
+			document.getElementById('google-sign-in-button'),
+			{ theme: 'outline', size: 'medium' },
+		);
+	}
+};
+
+// Initialize Google client and render Google button
+const initGsi = () => {
+	// @ts-ignore
+	if (window.google && window.google?.accounts) {
+		// @ts-ignore
+		window.google.accounts.id.initialize({
+			client_id:
+				'481480200529-1oe59ol3snikmj6l9dksirjabooupohd.apps.googleusercontent.com',
+			callback: (response: any) => {
+				getAWSCredentialsFromGoogleCreds(response.credential);
+			},
+		});
+
+		createGoogleSocialSignInButtons();
+	}
+};
+
+// Load google client
+export const initGoogleSocialSignIn = () => {
+	// @ts-ignore
+	if (!window.google && !window.google?.accounts) {
+		const script = document.createElement('script');
+
+		script.src = 'https://accounts.google.com/gsi/client';
+		script.async = true;
+		script.defer = true;
+		script.onload = initGsi;
+
+		document.body.appendChild(script);
+		return;
+	}
+	// @ts-ignore
+	if (!!window.google?.accounts) {
+		initGsi();
+		return;
+	}
+};

package/src/components/DialogLoader.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { Box, CircularProgress, IconButton, Typography } from '@mui/material';
+import Tooltip from '../lib/tooltip/Tooltip';
+
+const DialogLoader = ({
+	title,
+	subtitle,
+	loadingMessage,
+	onClose,
+}: {
+	title: string;
+	subtitle: string;
+	onClose: (event: any) => void;
+	loadingMessage?: string;
+}) => (
+	<div
+		style={{
+			display: 'flex',
+			flexDirection: 'column',
+			height: '100%',
+			overflow: 'hidden',
+			paddingBottom: 20,
+		}}
+	>
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+			}}
+		>
+			<div
+				style={{
+					padding: '40px 40px 0 40px',
+					display: 'flex',
+					alignItems: 'center',
+					gap: '16px',
+				}}
+			>
+				<IconButton
+					id='definition-entity-dialog-back-arrow-button'
+					className='dialog_back_button'
+					onClick={onClose}
+					style={{
+						fontSize: 14,
+						width: 22,
+						height: 22,
+						color: 'rgb(63, 63, 64)',
+					}}
+				>
+					<i className='fa-solid fa-arrow-left' />
+				</IconButton>
+				<Tooltip
+					anchorQuerySelector='#definition-entity-dialog-back-arrow-button'
+					placement='bottom'
+					openDelay={300}
+				>
+					Go back to the previous screen
+				</Tooltip>
+				<h1 style={{ margin: 0, fontWeight: 500, fontSize: '28px' }}>
+					{title}
+				</h1>
+			</div>
+
+			<p
+				style={{
+					margin: 0,
+					color: 'rgba(0,0,0,0.54)',
+					padding: '0px 40px 0 80px',
+				}}
+			>
+				{subtitle}
+			</p>
+		</div>
+
+		<Box
+			sx={{
+				display: 'flex',
+				// flexGrow: 1,
+				flexDirection: 'column',
+				gap: 6,
+				alignItems: 'center',
+				height: 'calc(100% - 130px)',
+				width: '100%',
+				justifyContent: 'center',
+			}}
+		>
+			<CircularProgress size={120} thickness={2} />
+
+			<Typography variant='h6'>{loadingMessage || 'Loading project logic...'}</Typography>
+		</Box>
+	</div>
+);
+
+export default DialogLoader;

package/src/components/EntityDialogHeader.tsx

@@ -0,0 +1,110 @@
+import React, { useEffect } from 'react';
+import { Tooltip as MuiTooltip, IconButton, Chip } from '@mui/material';
+import {
+	DRAGGABLE_ELEMENT_TYPES,
+	lowercaseFirstLetter,
+	READABLE_ENTITY_TYPES,
+	resolveEntityName,
+	UserManagedEntityState,
+} from '@elyx-code/project-logic-tree';
+import { EditorService } from '../services/editor';
+import Tooltip from '../lib/tooltip/Tooltip';
+
+export const EntityDialogHeader: React.FC<{
+	entity: UserManagedEntityState;
+	project: EditorService;
+	onClose: (event: any) => void;
+}> = ({ entity, project, onClose }) => {
+	const [entityName, setEntityName] = React.useState<string>(
+		resolveEntityName(entity, project.logic)
+	);
+
+	useEffect(() => {
+		project.on(entity.id, () => {
+			const newName = resolveEntityName(entity, project.logic);
+			if (newName !== entityName) {
+				setEntityName(newName);
+			}
+		});
+	}, []);
+
+	const isCanvasEntity = DRAGGABLE_ELEMENT_TYPES.includes(entity.type);
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+			}}
+		>
+			<div
+				style={{
+					padding: '40px 40px 0 40px',
+					display: 'flex',
+					alignItems: 'center',
+					gap: '16px',
+				}}
+			>
+				<IconButton
+					id='entity-header-dialog-back-arrow-button'
+					className='dialog_back_button'
+					onClick={onClose}
+					style={{
+						fontSize: 14,
+						width: 22,
+						height: 22,
+						color: 'rgb(63, 63, 64)',
+					}}
+				>
+					<i className='fa-solid fa-arrow-left' />
+				</IconButton>
+				<Tooltip
+					anchorQuerySelector='#entity-header-dialog-back-arrow-button'
+					placement='bottom'
+					openDelay={300}
+				>
+					Go back to the previous screen
+				</Tooltip>
+				<h1 style={{ margin: 0, fontWeight: 500, fontSize: '28px' }}>
+					{READABLE_ENTITY_TYPES[entity.type].singular}
+					{isCanvasEntity ? ' node builder' : ' builder'}
+				</h1>
+				{!entity.editable && (
+					<MuiTooltip
+						title={`This ${lowercaseFirstLetter(
+							READABLE_ENTITY_TYPES[entity.type].singular
+						)} has been locked to the current version, and can no longer be edited`}
+					>
+						<Chip
+							size='small'
+							color='error'
+							variant='outlined'
+							className='card-tag'
+							style={{
+								boxShadow: 'none',
+							}}
+							label={
+								<span>
+									<i className='fa-regular fa-lock'></i>
+									&nbsp;Locked
+								</span>
+							}
+						/>
+					</MuiTooltip>
+				)}
+			</div>
+
+			<p
+				style={{
+					margin: 0,
+					color: 'rgba(127, 85, 85, 0.54)',
+					padding: '0px 40px 0 80px',
+				}}
+			>
+				{entityName || `${READABLE_ENTITY_TYPES[entity.type].singular} builder`}
+			</p>
+		</div>
+	);
+};
+
+export default EntityDialogHeader;