15088: Adds the ability to cancel account linking after logging in

Arvados-DCO-1.1-Signed-off-by: Eric Biagiotti <ebiagiotti@veritasgenetics.com>

diff --git a/src/store/link-account-panel/link-account-panel-actions.ts b/src/store/link-account-panel/link-account-panel-actions.ts
index 3a8661b70a851f118ef44c2c1374b8a1665713cb..dd3a79e93193f659d61206d8bd4de9af57736664 100644 (file)
--- a/src/store/link-account-panel/link-account-panel-actions.ts
+++ b/src/store/link-account-panel/link-account-panel-actions.ts
@@ -11,7 +11,8 @@ import { logout } from "~/store/auth/auth-action";
 import { unionize, ofType, UnionOf } from '~/common/unionize';
 
 export const linkAccountPanelActions = unionize({
-    LOAD_LINKING: ofType<AccountToLink>()
+    LOAD_LINKING: ofType<AccountToLink>(),
+    REMOVE_LINKING: {}
 });
 
 export type LinkAccountPanelAction = UnionOf<typeof linkAccountPanelActions>;
@@ -36,4 +37,10 @@ export const saveAccountLinkData = (t: LinkAccountType) =>
 export const getAccountLinkData = () =>
     (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
         return services.linkAccountService.getLinkAccount();
+    };
+
+export const removeAccountLinkData = () =>
+    (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
+        services.linkAccountService.removeLinkAccount();
+        dispatch(linkAccountPanelActions.REMOVE_LINKING());
     };
\ No newline at end of file

diff --git a/src/store/link-account-panel/link-account-panel-reducer.ts b/src/store/link-account-panel/link-account-panel-reducer.ts
index 4515cff44d2b66f7850dbb7374f1842e153a86bf..47718e3ba4905d9ed16923106d1e590ff7beba3d 100644 (file)
--- a/src/store/link-account-panel/link-account-panel-reducer.ts
+++ b/src/store/link-account-panel/link-account-panel-reducer.ts
@@ -17,4 +17,5 @@ export const linkAccountPanelReducer = (state: LinkAccountPanelState = initialSt
     linkAccountPanelActions.match(action, {
         default: () => state,
         LOAD_LINKING: (accountToLink) => ({ ...state, accountToLink }),
+        REMOVE_LINKING: () => ({...state, accountToLink: undefined})
     });
\ No newline at end of file

diff --git a/src/views-components/api-token/api-token.tsx b/src/views-components/api-token/api-token.tsx
index 43c55a92c9addbd8031fd537b5c59528b620e7ca..b0fd03134c613fff4a3be001fd88cd8c02d5e73c 100644 (file)
--- a/src/views-components/api-token/api-token.tsx
+++ b/src/views-components/api-token/api-token.tsx
@@ -8,10 +8,11 @@ import { connect, DispatchProp } from "react-redux";
 import { authActions, getUserDetails, saveApiToken } from "~/store/auth/auth-action";
 import { getUrlParameter } from "~/common/url";
 import { AuthService } from "~/services/auth-service/auth-service";
-import { navigateToRootProject } from "~/store/navigation/navigation-action";
+import { navigateToRootProject, navigateToLinkAccount } from "~/store/navigation/navigation-action";
 import { User } from "~/models/user";
 import { Config } from "~/common/config";
 import { initSessions } from "~/store/auth/auth-action-session";
+import { getAccountLinkData } from "~/store/link-account-panel/link-account-panel-actions";
 
 interface ApiTokenProps {
     authService: AuthService;
@@ -27,7 +28,12 @@ export const ApiToken = connect()(
             this.props.dispatch<any>(getUserDetails()).then((user: User) => {
                 this.props.dispatch(initSessions(this.props.authService, this.props.config, user));
             }).finally(() => {
-                this.props.dispatch(navigateToRootProject);
+                if (this.props.dispatch(getAccountLinkData())) {
+                    this.props.dispatch(navigateToLinkAccount);
+                }
+                else {
+                    this.props.dispatch(navigateToRootProject);
+                }
             });
         }
         render() {

diff --git a/src/views/link-account-panel/link-account-panel-root.tsx b/src/views/link-account-panel/link-account-panel-root.tsx
index 3b2e204198aa637f4685554b6e31e2b7a3e65032..4b3b6979f79cc42624d6d6acc9d19e4abe54c002 100644 (file)
--- a/src/views/link-account-panel/link-account-panel-root.tsx
+++ b/src/views/link-account-panel/link-account-panel-root.tsx
@@ -34,36 +34,51 @@ export interface LinkAccountPanelRootDataProps {
 
 export interface LinkAccountPanelRootActionProps {
     saveAccountLinkData: (type: LinkAccountType) => void;
+    removeAccountLinkData: () => void;
 }
 
 type LinkAccountPanelRootProps = LinkAccountPanelRootDataProps & LinkAccountPanelRootActionProps & WithStyles<CssRules>;
 
 export const LinkAccountPanelRoot = withStyles(styles) (
-    ({classes, user, saveAccountLinkData}: LinkAccountPanelRootProps) => {
+    ({classes, user, accountToLink, saveAccountLinkData, removeAccountLinkData}: LinkAccountPanelRootProps) => {
         return <Card className={classes.root}>
             <CardContent>
-            <Grid container spacing={24}>
-            { user && <Grid container item direction="column" spacing={24}>
-                <Grid item>
-                    You are currently logged in as <b>{user.email}</b> ({user.username}, {user.uuid}) created on <b>{formatDate(user.createdAt)}</b>
+            { user && accountToLink===undefined && <Grid container spacing={24}>
+                <Grid container item direction="column" spacing={24}>
+                    <Grid item>
+                        You are currently logged in as <b>{user.email}</b> ({user.username}, {user.uuid}) created on <b>{formatDate(user.createdAt)}</b>
+                    </Grid>
+                    <Grid item>
+                        You can link Arvados accounts. After linking, either login will take you to the same account.
+                    </Grid>
                 </Grid>
-                <Grid item>
-                    You can link Arvados accounts. After linking, either login will take you to the same account.
+                <Grid container item direction="row" spacing={24}>
+                    <Grid item>
+                        <Button color="primary" variant="contained" onClick={() => saveAccountLinkData(LinkAccountType.ADD_OTHER_LOGIN)}>
+                            Add another login to this account
+                        </Button>
+                    </Grid>
+                    <Grid item>
+                        <Button color="primary" variant="contained" onClick={() => saveAccountLinkData(LinkAccountType.ACCESS_OTHER_ACCOUNT)}>
+                            Use this login to access another account
+                        </Button>
+                    </Grid>
                 </Grid>
-            </Grid> }
-            <Grid container item direction="row" spacing={24}>
-                <Grid item>
-                    <Button color="primary" variant="contained" onClick={() => saveAccountLinkData(LinkAccountType.ADD_OTHER_LOGIN)}>
-                        Add another login to this account
-                    </Button>
-                </Grid>
-                <Grid item>
-                    <Button color="primary" variant="contained" onClick={() => saveAccountLinkData(LinkAccountType.ACCESS_OTHER_ACCOUNT)}>
-                        Use this login to access another account
-                    </Button>
+            </Grid>}
+            { accountToLink && <Grid container spacing={24}>
+                <Grid container item direction="row" spacing={24}>
+                    <Grid item>
+                        <Button variant="contained" onClick={() => removeAccountLinkData()}>
+                            Cancel
+                        </Button>
+                    </Grid>
+                    <Grid item>
+                        <Button color="primary" variant="contained" onClick={() => {}}>
+                            Link accounts
+                        </Button>
+                    </Grid>
                 </Grid>
-            </Grid>
-            </Grid>
+            </Grid> }
             </CardContent>
         </Card>;
 });
\ No newline at end of file

diff --git a/src/views/link-account-panel/link-account-panel.tsx b/src/views/link-account-panel/link-account-panel.tsx
index 491f2055a82b95f28e6da8479920b4e23f675970..44b4bb549c23d82b326b5fcc023ffa7a56964929 100644 (file)
--- a/src/views/link-account-panel/link-account-panel.tsx
+++ b/src/views/link-account-panel/link-account-panel.tsx
@@ -5,7 +5,7 @@
 import { RootState } from '~/store/store';
 import { Dispatch } from 'redux';
 import { connect } from 'react-redux';
-import { saveAccountLinkData } from '~/store/link-account-panel/link-account-panel-actions';
+import { saveAccountLinkData, removeAccountLinkData } from '~/store/link-account-panel/link-account-panel-actions';
 import { LinkAccountType } from '~/models/link-account';
 import {
     LinkAccountPanelRoot,
@@ -21,7 +21,8 @@ const mapStateToProps = (state: RootState): LinkAccountPanelRootDataProps => {
 };
 
 const mapDispatchToProps = (dispatch: Dispatch): LinkAccountPanelRootActionProps => ({
-    saveAccountLinkData: (type: LinkAccountType) => dispatch<any>(saveAccountLinkData(type))
+    saveAccountLinkData: (type: LinkAccountType) => dispatch<any>(saveAccountLinkData(type)),
+    removeAccountLinkData: () => dispatch<any>(removeAccountLinkData())
 });
 
 export const LinkAccountPanel = connect(mapStateToProps, mapDispatchToProps)(LinkAccountPanelRoot);