Card,
CardContent,
Button,
- Typography,
Grid,
+ Select,
+ CircularProgress
} from '@material-ui/core';
import { ArvadosTheme } from '~/common/custom-theme';
-import { User, UserResource } from "~/models/user";
-import { LinkAccountType, AccountToLink } from "~/models/link-account";
-import { formatDate }from "~/common/formatters";
+import { UserResource } from "~/models/user";
+import { LinkAccountType } from "~/models/link-account";
+import { formatDate } from "~/common/formatters";
+import { LinkAccountPanelStatus, LinkAccountPanelError } from "~/store/link-account-panel/link-account-panel-reducer";
-type CssRules = 'root';// | 'gridItem' | 'label' | 'title' | 'actions';
+type CssRules = 'root';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
});
export interface LinkAccountPanelRootDataProps {
- user?: UserResource;
+ targetUser?: UserResource;
userToLink?: UserResource;
+ remoteHosts: { [key: string]: string };
+ hasRemoteHosts: boolean;
+ localCluster: string;
+ status : LinkAccountPanelStatus;
+ error: LinkAccountPanelError;
+ selectedCluster?: string;
+ isProcessing: boolean;
}
export interface LinkAccountPanelRootActionProps {
- saveAccountLinkData: (type: LinkAccountType) => void;
- removeAccountLinkData: () => void;
+ startLinking: (type: LinkAccountType) => void;
+ cancelLinking: () => void;
linkAccount: () => void;
+ setSelectedCluster: (cluster: string) => void;
}
-function displayUser(user: UserResource, showCreatedAt: boolean = false) {
+function displayUser(user: UserResource, showCreatedAt: boolean = false, showCluster: boolean = false) {
const disp = [];
disp.push(<span><b>{user.email}</b> ({user.username}, {user.uuid})</span>);
+ if (showCluster) {
+ const homeCluster = user.uuid.substr(0,5);
+ disp.push(<span> hosted on cluster <b>{homeCluster}</b> and </span>);
+ }
if (showCreatedAt) {
disp.push(<span> created on <b>{formatDate(user.createdAt)}</b></span>);
}
return disp;
}
+function isLocalUser(uuid: string, localCluster: string) {
+ return uuid.substring(0, 5) === localCluster;
+}
+
type LinkAccountPanelRootProps = LinkAccountPanelRootDataProps & LinkAccountPanelRootActionProps & WithStyles<CssRules>;
export const LinkAccountPanelRoot = withStyles(styles) (
- ({classes, user, userToLink, saveAccountLinkData, removeAccountLinkData, linkAccount}: LinkAccountPanelRootProps) => {
+ ({classes, targetUser, userToLink, status, isProcessing, error, startLinking, cancelLinking, linkAccount,
+ remoteHosts, hasRemoteHosts, selectedCluster, setSelectedCluster, localCluster}: LinkAccountPanelRootProps) => {
return <Card className={classes.root}>
<CardContent>
- { user && userToLink===undefined && <Grid container spacing={24}>
- <Grid container item direction="column" spacing={24}>
- <Grid item>
- You are currently logged in as {displayUser(user, true)}
- </Grid>
- <Grid item>
- You can link Arvados accounts. After linking, either login will take you to the same account.
- </Grid>
+ { isProcessing && <Grid container item direction="column" alignContent="center" spacing={24}>
+ <Grid item>
+ Loading user info. Please wait.
</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 item style={{ alignSelf: 'center' }}>
+ <CircularProgress/>
+ </Grid>
+ </Grid> }
+ { !isProcessing && status === LinkAccountPanelStatus.INITIAL && targetUser && <div>
+ { isLocalUser(targetUser.uuid, localCluster) ? <Grid container spacing={24}>
+ <Grid container item direction="column" spacing={24}>
+ <Grid item>
+ You are currently logged in as {displayUser(targetUser, true)}
+ </Grid>
+ <Grid item>
+ You can link Arvados accounts. After linking, either login will take you to the same account.
+ </Grid >
</Grid>
- <Grid item>
- <Button color="primary" variant="contained" onClick={() => saveAccountLinkData(LinkAccountType.ACCESS_OTHER_ACCOUNT)}>
- Use this login to access another account
- </Button>
+ <Grid container item direction="row" spacing={24}>
+ <Grid item>
+ <Button disabled={!targetUser.isActive} color="primary" variant="contained" onClick={() => startLinking(LinkAccountType.ADD_OTHER_LOGIN)}>
+ Add another login to this account
+ </Button>
+ </Grid>
+ <Grid item>
+ <Button color="primary" variant="contained" onClick={() => startLinking(LinkAccountType.ACCESS_OTHER_ACCOUNT)}>
+ Use this login to access another account
+ </Button>
+ </Grid>
</Grid>
- </Grid>
- </Grid>}
- { userToLink && user && <Grid container spacing={24}>
- <Grid container item direction="column" spacing={24}>
- <Grid item>
- Clicking 'Link accounts' will link {displayUser(userToLink, true)} to {displayUser(user, true)}.
+ { hasRemoteHosts && selectedCluster && <Grid container item direction="column" spacing={24}>
+ <Grid item>
+ You can also link {displayUser(targetUser, false)} with an account from a remote cluster.
+ </Grid>
+ <Grid item>
+ Please select the cluster that hosts the account you want to link with:
+ <Select id="remoteHostsDropdown" native defaultValue={selectedCluster} style={{ marginLeft: "1em" }}
+ onChange={(event) => setSelectedCluster(event.target.value)}>
+ {Object.keys(remoteHosts).map((k) => k !== localCluster ? <option key={k} value={k}>{k}</option> : null)}
+ </Select>
+ </Grid>
+ <Grid item>
+ <Button color="primary" variant="contained" onClick={() => startLinking(LinkAccountType.ACCESS_OTHER_REMOTE_ACCOUNT)}>
+ Link with an account on {hasRemoteHosts ? <label>{selectedCluster} </label> : null}
+ </Button>
+ </Grid>
+ </Grid> }
+ </Grid> :
+ <Grid container spacing={24}>
+ <Grid container item direction="column" spacing={24}>
+ <Grid item>
+ You are currently logged in as {displayUser(targetUser, true, true)}
+ </Grid>
+ {targetUser.isActive ? <> <Grid item>
+ This a remote account. You can link a local Arvados account to this one. After linking, you can access the local account's data by logging into the <b>{localCluster}</b> cluster with the <b>{targetUser.email}</b> account.
+ </Grid >
+ <Grid item>
+ <Button color="primary" variant="contained" onClick={() => startLinking(LinkAccountType.ADD_LOCAL_TO_REMOTE)}>
+ Link an account from {localCluster} to this account
+ </Button>
+ </Grid> </>
+ : <Grid item>
+ This an inactive remote account. An administrator must activate your account before you can proceed. After your accounts is activated, you can link a local Arvados account hosted by the <b>{localCluster}</b> cluster to this one.
+ </Grid >}
</Grid>
+ </Grid>}
+ </div> }
+ { !isProcessing && (status === LinkAccountPanelStatus.LINKING || status === LinkAccountPanelStatus.ERROR) && userToLink && targetUser &&
+ <Grid container spacing={24}>
+ { status === LinkAccountPanelStatus.LINKING && <Grid container item direction="column" spacing={24}>
<Grid item>
- After linking, logging in as {displayUser(userToLink)} will log you into the same account as {displayUser(user)}.
+ Clicking 'Link accounts' will link {displayUser(userToLink, true, !isLocalUser(targetUser.uuid, localCluster))} to {displayUser(targetUser, true, !isLocalUser(targetUser.uuid, localCluster))}.
</Grid>
+ { (isLocalUser(targetUser.uuid, localCluster)) && <Grid item>
+ After linking, logging in as {displayUser(userToLink)} will log you into the same account as {displayUser(targetUser)}.
+ </Grid> }
<Grid item>
- Any object owned by {displayUser(userToLink)} will be transfered to {displayUser(user)}.
+ Any object owned by {displayUser(userToLink)} will be transfered to {displayUser(targetUser)}.
</Grid>
- </Grid>
+ { !isLocalUser(targetUser.uuid, localCluster) && <Grid item>
+ You can access <b>{userToLink.email}</b> data by logging into <b>{localCluster}</b> with the <b>{targetUser.email}</b> account.
+ </Grid> }
+ </Grid> }
+ { error === LinkAccountPanelError.NON_ADMIN && <Grid item>
+ Cannot link admin account {displayUser(userToLink)} to non-admin account {displayUser(targetUser)}.
+ </Grid> }
+ { error === LinkAccountPanelError.SAME_USER && <Grid item>
+ Cannot link {displayUser(targetUser)} to the same account.
+ </Grid> }
+ { error === LinkAccountPanelError.INACTIVE && <Grid item>
+ Cannot link account {displayUser(userToLink)} to inactive account {displayUser(targetUser)}.
+ </Grid> }
<Grid container item direction="row" spacing={24}>
<Grid item>
- <Button variant="contained" onClick={() => removeAccountLinkData()}>
+ <Button variant="contained" onClick={() => cancelLinking()}>
Cancel
</Button>
</Grid>
<Grid item>
- <Button color="primary" variant="contained" onClick={() => linkAccount()}>
+ <Button disabled={status === LinkAccountPanelStatus.ERROR} color="primary" variant="contained" onClick={() => linkAccount()}>
Link accounts
</Button>
</Grid>
</Grid>
</Grid> }
- </CardContent>
- </Card> ;
+ </CardContent>
+ </Card>;
});
\ No newline at end of file
projects / arvados-workbench2.git / blobdiff