This repository has been archived by the owner on May 2, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 86
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[WEB-44] Improve signing in UX (#1466)
- Loading branch information
1 parent
a31cc2f
commit 71d456f
Showing
7 changed files
with
353 additions
and
316 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| /* This Source Code Form is subject to the terms of the Mozilla Public | ||
| * License, v. 2.0. If a copy of the MPL was not distributed with this | ||
| * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ | ||
| /* eslint-disable no-constant-condition */ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| import Divider from '@material-ui/core/Divider'; | ||
| import List from '@material-ui/core/List'; | ||
| import ListItem from '@material-ui/core/ListItem'; | ||
| import ListItemText from '@material-ui/core/ListItemText'; | ||
|
|
||
| import ChevronRightIcon from '@material-ui/icons/ChevronRight'; | ||
|
|
||
| import { open as openDialogLicenseRegistration } from '../../../state/dialog-license-registration/actions'; | ||
|
|
||
| import connectComponent from '../../../helpers/connect-component'; | ||
|
|
||
| const SectionLicensing = ({ | ||
| registered, | ||
| onOpenDialogLicenseRegistration, | ||
| }) => { | ||
| const upgradeToLifetimeComponent = !registered && ( | ||
| <> | ||
| <Divider /> | ||
| <ListItem button onClick={onOpenDialogLicenseRegistration}> | ||
| <ListItemText primary="Upgrade to WebCatalog Lifetime" /> | ||
| <ChevronRightIcon color="action" /> | ||
| </ListItem> | ||
| </> | ||
| ); | ||
|
|
||
| return ( | ||
| <List dense disablePadding> | ||
| <ListItem button disabled> | ||
| <ListItemText primary={registered ? 'WebCatalog Lifetime' : 'WebCatalog Basic'} /> | ||
| </ListItem> | ||
| {upgradeToLifetimeComponent} | ||
| </List> | ||
| ); | ||
| }; | ||
|
|
||
| SectionLicensing.defaultProps = { | ||
| registered: false, | ||
| }; | ||
|
|
||
| SectionLicensing.propTypes = { | ||
| onOpenDialogLicenseRegistration: PropTypes.func.isRequired, | ||
| registered: PropTypes.bool, | ||
| }; | ||
|
|
||
| const mapStateToProps = (state) => ({ | ||
| displayName: state.user.displayName, | ||
| isSignedIn: state.user.isSignedIn, | ||
| photoURL: state.user.photoURL, | ||
| registered: state.preferences.registered, | ||
| }); | ||
|
|
||
| const actionCreators = { | ||
| openDialogLicenseRegistration, | ||
| }; | ||
|
|
||
| export default connectComponent( | ||
| SectionLicensing, | ||
| mapStateToProps, | ||
| actionCreators, | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| /* This Source Code Form is subject to the terms of the Mozilla Public | ||
| * License, v. 2.0. If a copy of the MPL was not distributed with this | ||
| * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ | ||
| /* eslint-disable no-constant-condition */ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| import Avatar from '@material-ui/core/Avatar'; | ||
| import Divider from '@material-ui/core/Divider'; | ||
| import List from '@material-ui/core/List'; | ||
| import ListItem from '@material-ui/core/ListItem'; | ||
| import ListItemAvatar from '@material-ui/core/ListItemAvatar'; | ||
| import ListItemText from '@material-ui/core/ListItemText'; | ||
|
|
||
| import ChevronRightIcon from '@material-ui/icons/ChevronRight'; | ||
|
|
||
| import { | ||
| requestOpenInBrowser, | ||
| requestSignInWithPopup, | ||
| } from '../../../senders'; | ||
|
|
||
| import connectComponent from '../../../helpers/connect-component'; | ||
|
|
||
| import firebase from '../../../firebase'; | ||
|
|
||
| const SectionSync = ({ | ||
| displayName, | ||
| isSignedIn, | ||
| photoURL, | ||
| }) => ( | ||
| <List disablePadding dense> | ||
| <ListItem> | ||
| <ListItemText secondary="Syncing is under development and requires a WebCatalog account with WebCatalog Pro subscription." /> | ||
| </ListItem> | ||
| <Divider /> | ||
| {!isSignedIn ? ( | ||
| <> | ||
| <ListItem | ||
| button | ||
| onClick={() => { | ||
| // we don't use logging in with protocol webcatalog:// | ||
| // as it causes wrong Electron instance to be opened | ||
| // e.g. it opens production app instead of dev env | ||
| if (window.process.platform === 'linux' || process.env.NODE_ENV !== 'production') { | ||
| requestSignInWithPopup(); | ||
| return; | ||
| } | ||
| requestOpenInBrowser('https://accounts.webcatalog.app/token'); | ||
| }} | ||
| > | ||
| <ListItemText primary="Sign in to WebCatalog" /> | ||
| <ChevronRightIcon color="action" /> | ||
| </ListItem> | ||
| <Divider /> | ||
| <ListItem button onClick={() => requestOpenInBrowser('https://forms.gle/AAByYb4hYppP91YRA')}> | ||
| <ListItemText primary="Join WebCatalog Pro Waitlist" /> | ||
| <ChevronRightIcon color="action" /> | ||
| </ListItem> | ||
| </> | ||
| ) : ( | ||
| <> | ||
| <ListItem alignItems="flex-start"> | ||
| <ListItemAvatar> | ||
| <Avatar alt={displayName} src={photoURL} /> | ||
| </ListItemAvatar> | ||
| </ListItem> | ||
| <Divider /> | ||
| <ListItem button onClick={() => requestOpenInBrowser('https://forms.gle/AAByYb4hYppP91YRA')}> | ||
| <ListItemText primary="Join WebCatalog Pro Waitlist" /> | ||
| <ChevronRightIcon color="action" /> | ||
| </ListItem> | ||
| <Divider /> | ||
| <ListItem button onClick={() => requestOpenInBrowser('https://accounts.webcatalog.app/settings/profile')}> | ||
| <ListItemText primary="Profile & Password" /> | ||
| <ChevronRightIcon color="action" /> | ||
| </ListItem> | ||
| <Divider /> | ||
| <ListItem button onClick={() => firebase.auth().signOut()}> | ||
| <ListItemText primary="Log Out" /> | ||
| <ChevronRightIcon color="action" /> | ||
| </ListItem> | ||
| </> | ||
| )} | ||
| </List> | ||
| ); | ||
|
|
||
| SectionSync.defaultProps = { | ||
| displayName: '', | ||
| isSignedIn: false, | ||
| photoURL: null, | ||
| }; | ||
|
|
||
| SectionSync.propTypes = { | ||
| displayName: PropTypes.string, | ||
| isSignedIn: PropTypes.bool, | ||
| photoURL: PropTypes.string, | ||
| }; | ||
|
|
||
| const mapStateToProps = (state) => ({ | ||
| displayName: state.user.displayName, | ||
| isSignedIn: state.user.isSignedIn, | ||
| photoURL: state.user.photoURL, | ||
| registered: state.preferences.registered, | ||
| }); | ||
|
|
||
| export default connectComponent( | ||
| SectionSync, | ||
| mapStateToProps, | ||
| null, | ||
| ); |
Oops, something went wrong.