From 727c28649ac0379451c71f47c40e28aff1ffe52b Mon Sep 17 00:00:00 2001
From: someCatInTheWorld <162684669+someCatInTheWorld@users.noreply.github.com>
Date: Fri, 2 Aug 2024 14:30:57 +1000
Subject: [PATCH] Added user button.

---
 src/components/gui/gui.jsx           |  5 ++++-
 src/components/menu-bar/menu-bar.jsx | 11 ++++++++---
 src/containers/gui.jsx               | 16 +++++++++++++++-
 src/playground/render-interface.jsx  | 18 +++++++++++++++++-
 4 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx
index 75ff258f4fe..10c2837b5a0 100644
--- a/src/components/gui/gui.jsx
+++ b/src/components/gui/gui.jsx
@@ -147,6 +147,7 @@ const GUIComponent = props => {
         extensionsManagerModalVisible,
         customExtensionModalVisible,
         isPlayground,
+        username,
         vm,
         ...componentProps
     } = omit(props, 'dispatch');
@@ -303,6 +304,7 @@ const GUIComponent = props => {
                         onShare={onShare}
                         onStartSelectingFileUpload={onStartSelectingFileUpload}
                         onToggleLoginOpen={onToggleLoginOpen}
+                        username={username}
                     />
                 ) : null}
                 <Box className={styles.bodyWrapper}>
@@ -508,7 +510,8 @@ GUIComponent.propTypes = {
     settingsModalVisible: PropTypes.bool,
     extensionsManagerModalVisible: PropTypes.bool,
     customExtensionModalVisible: PropTypes.bool,
-    vm: PropTypes.instanceOf(VM).isRequired
+    vm: PropTypes.instanceOf(VM).isRequired,
+    username: PropTypes.string
 };
 GUIComponent.defaultProps = {
     backpackHost: null,
diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx
index e35b9aee8c1..65d5888346b 100644
--- a/src/components/menu-bar/menu-bar.jsx
+++ b/src/components/menu-bar/menu-bar.jsx
@@ -438,7 +438,7 @@ class MenuBar extends React.Component {
             >
                 <div className={styles.mainMenu}>
                     <div className={styles.fileGroup}>
-                            <a href="https://www.snail-ide.com" target="_blank">
+                        <a href="https://www.snail-ide.com" target="_blank">
                             <div className={classNames(styles.menuBarItem, styles.hoverable)}>
                                 <img
                                     alt="Snail IDE"
@@ -450,7 +450,7 @@ class MenuBar extends React.Component {
                                     src={scratchLogo}
                                 />
                             </div>
-                            </a>
+                        </a>
                         {(this.props.canChangeLanguage) && (<div
                             className={classNames(styles.menuBarItem, styles.hoverable, styles.languageMenu)}
                         >
@@ -895,6 +895,12 @@ class MenuBar extends React.Component {
                     <div className={styles.menuBarItem}>
                         <TWSaveStatus />
                     </div>
+
+                    <a href={this.props.username ? `https://www.snail-ide.com/profile?user=${this.props.username}` : `https://www.snail-ide.com/sign-in`}>
+                        <div className={classNames(styles.menuBarItem, styles.hoverable)}>
+                            {this.props.username ? this.props.username : 'Sign in/Join'}
+                        </div>
+                    </a>
                 </div>
 
                 {aboutButton}
@@ -1024,7 +1030,6 @@ const mapStateToProps = (state, ownProps) => {
         projectTitle: state.scratchGui.projectTitle,
         sessionExists: state.session && typeof state.session.session !== 'undefined',
         errorsMenuOpen: errorsMenuOpen(state),
-        username: user ? user.username : null,
         userOwnsProject: ownProps.authorUsername && user &&
             (ownProps.authorUsername === user.username),
         vm: state.scratchGui.vm
diff --git a/src/containers/gui.jsx b/src/containers/gui.jsx
index 0de2ea623f3..4791afceb24 100644
--- a/src/containers/gui.jsx
+++ b/src/containers/gui.jsx
@@ -42,6 +42,18 @@ import GUIComponent from '../components/gui/gui.jsx';
 import {setIsScratchDesktop} from '../lib/isScratchDesktop.js';
 
 class GUI extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            loginData: {}
+        }
+        window.addEventListener('message', (event) => {
+            if (event.origin !== 'http://localhost:5173') return;
+               this.setState({ loginData: event.data });
+               console.log(event.data);
+            }
+        );
+    }
     componentDidMount () {
         setIsScratchDesktop(this.props.isScratchDesktop);
         this.props.onStorageInit(storage);
@@ -88,6 +100,7 @@ class GUI extends React.Component {
             <GUIComponent
                 loading={fetchingProject || isLoading || loadingStateVisible}
                 isPlayground={isPlayground}
+                username={this.state.loginData.packet?.username}
                 {...componentProps}
             >
                 {children}
@@ -119,7 +132,8 @@ GUI.propTypes = {
     projectHost: PropTypes.string,
     projectId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     telemetryModalVisible: PropTypes.bool,
-    vm: PropTypes.instanceOf(VM).isRequired
+    vm: PropTypes.instanceOf(VM).isRequired,
+    username: PropTypes.string
 };
 
 GUI.defaultProps = {
diff --git a/src/playground/render-interface.jsx b/src/playground/render-interface.jsx
index 84c3ab58fc0..f78be297ed2 100644
--- a/src/playground/render-interface.jsx
+++ b/src/playground/render-interface.jsx
@@ -16,7 +16,7 @@
 
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useState } from 'react';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { FormattedMessage, defineMessages, injectIntl, intlShape } from 'react-intl';
@@ -252,6 +252,15 @@ class Interface extends React.Component {
     constructor(props) {
         super(props);
         this.handleUpdateProjectTitle = this.handleUpdateProjectTitle.bind(this);
+        this.state = {
+            loginData: {}
+        }
+        window.addEventListener('message', (event) => {
+            if (event.origin !== 'http://localhost:5173') return;
+               this.setState({ loginData: event.data });
+               console.log(event.data);
+            }
+        );
     }
     componentDidUpdate(prevProps) {
         if (prevProps.isLoading && !this.props.isLoading) {
@@ -289,6 +298,11 @@ class Interface extends React.Component {
                     [styles.editor]: isEditor
                 })}
             >
+                <iframe
+                    id='login'
+                    style={{ display: 'none' }}
+                    src={`http://localhost:5173/embed/editor?external=${window.location}`}
+                ></iframe>
                 {isHomepage ? (
                     <div className={styles.menu}>
                         <WrappedMenuBar
@@ -297,6 +311,7 @@ class Interface extends React.Component {
                             enableSeeInside
                             onClickAddonSettings={handleClickAddonSettings}
                             onClickTheme={onClickTheme}
+                            username={this.state.loginData.packet?.username}
                         />
                     </div>
                 ) : null}
@@ -314,6 +329,7 @@ class Interface extends React.Component {
                         onUpdateProjectTitle={this.handleUpdateProjectTitle}
                         backpackVisible
                         backpackHost="_local_"
+                        username={this.state.loginData.packet?.username}
                         {...props}
                     />
                     {isHomepage ? (