fix login flow for logged in features

src/components/Share.jsx

@@ -11,7 +11,7 @@ import { Text } from './Text';
 const FREE_PUBLIC_ITEM_COUNT = 1;
 const BASE_URL = location.origin;
 
-export function Share({ user, item, onVisibilityChange }) {
+export function Share({ user, item, onVisibilityChange, onLoginBtnClick }) {
 	const [publicItemCount, setPublicItemCount] = useState(0);
 	useEffect(() => {
 		if (!user) return;
@@ -62,8 +62,8 @@ export function Share({ user, item, onVisibilityChange }) {
 	if (!user) {
 		return (
 			<HStack justify="center" gap={2}>
-				<Text>Login to share this creation</Text>
+				<Text>Login to share this creation publicly</Text>
-				<Button class="btn btn--primary" onClick={copyUrl} aria-label="Copy">
+				<Button class="btn btn--primary" onClick={onLoginBtnClick}>
 					Login
 				</Button>
 			</HStack>

src/components/app.jsx

@@ -1126,7 +1126,11 @@ export default class App extends Component {
 	}
 	shareBtnClickHandler() {
 		trackEvent('ui', 'shareBtnClick');
-		this.setState({ isShareModalOpen: true });
+		if (!window.user || this.state.currentItem.id) {
+			this.setState({ isShareModalOpen: true });
+		} else {
+			alertsService.add('Please save your creation before sharing.');
+		}
 	}
 	detachedPreviewBtnHandler() {
 		trackEvent('ui', 'detachPreviewBtnClick');
@@ -1783,21 +1787,7 @@ export default class App extends Component {
 							onChange={this.onExternalLibChange.bind(this)}
 						/>
 					</Modal>
-					<Modal
+
-						show={this.state.isAssetsOpen}
-						closeHandler={() => this.setState({ isAssetsOpen: false })}
-					>
-						<Assets
-							onProBtnClick={() => {
-								this.proBtnClickHandler();
-								this.setState({ isAssetsOpen: false });
-							}}
-							onLoginBtnClick={() => {
-								this.loginBtnClickHandler();
-								this.setState({ isAssetsOpen: false });
-							}}
-						/>
-					</Modal>
 					<Modal
 						show={this.state.isNotificationsModalOpen}
 						closeHandler={() =>
@@ -1818,13 +1808,7 @@ export default class App extends Component {
 							onChange={this.updateSetting.bind(this)}
 						/>
 					</Modal>
-					<Modal
+
-						extraClasses="login-modal"
-						show={this.state.isLoginModalOpen}
-						closeHandler={() => this.setState({ isLoginModalOpen: false })}
-					>
-						<Login />
-					</Modal>
 					<Modal
 						show={this.state.isProfileModalOpen}
 						closeHandler={() => this.setState({ isProfileModalOpen: false })}
@@ -1834,6 +1818,21 @@ export default class App extends Component {
 							logoutBtnHandler={this.logout.bind(this)}
 						/>
 					</Modal>
+					<Modal
+						show={this.state.isAssetsOpen}
+						closeHandler={() => this.setState({ isAssetsOpen: false })}
+					>
+						<Assets
+							onProBtnClick={() => {
+								this.setState({ isAssetsOpen: false });
+								this.proBtnClickHandler();
+							}}
+							onLoginBtnClick={() => {
+								this.setState({ isAssetsOpen: false });
+								this.loginBtnClickHandler();
+							}}
+						/>
+					</Modal>
 					<Modal
 						show={this.state.isShareModalOpen}
 						closeHandler={() => this.setState({ isShareModalOpen: false })}
@@ -1848,6 +1847,10 @@ export default class App extends Component {
 								};
 								this.setState({ currentItem: item });
 							}}
+							onLoginBtnClick={() => {
+								this.setState({ isShareModalOpen: false });
+								this.loginBtnClickHandler();
+							}}
 						/>
 					</Modal>
 					<Modal
@@ -1857,6 +1860,18 @@ export default class App extends Component {
 					>
 						<Pro user={this.state.user} />
 					</Modal>
+
+					{/* Login modal is intentionally kept here after assets & share modal because 
+					they trigger this modal and if order isn't maintainer, the modal overlay doesn't
+					show properly */}
+					<Modal
+						extraClasses="login-modal"
+						show={this.state.isLoginModalOpen}
+						closeHandler={() => this.setState({ isLoginModalOpen: false })}
+					>
+						<Login />
+					</Modal>
+
 					<HelpModal
 						show={this.state.isHelpModalOpen}
 						closeHandler={() => this.setState({ isHelpModalOpen: false })}