1
0
mirror of https://github.com/chinchang/web-maker.git synced 2025-03-23 03:59:42 +01:00

fix login flow for logged in features

This commit is contained in:
Kushagra Gour 2024-04-15 15:01:58 +05:30
parent 168187f867
commit f65490b7e9
2 changed files with 41 additions and 26 deletions

View File

@ -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>
<Button class="btn btn--primary" onClick={copyUrl} aria-label="Copy">
<Text>Login to share this creation publicly</Text>
<Button class="btn btn--primary" onClick={onLoginBtnClick}>
Login
</Button>
</HStack>

View File

@ -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 })}