1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from 'react';
16 } from '@material-ui/core';
17 import { ArvadosTheme } from '~/common/custom-theme';
18 import { UserResource } from "~/models/user";
19 import { LinkAccountType } from "~/models/link-account";
20 import { formatDate } from "~/common/formatters";
21 import { LinkAccountPanelStatus, LinkAccountPanelError } from "~/store/link-account-panel/link-account-panel-reducer";
23 type CssRules = 'root';
25 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
32 export interface LinkAccountPanelRootDataProps {
33 targetUser?: UserResource;
34 userToLink?: UserResource;
35 remoteHosts: { [key: string]: string };
36 hasRemoteHosts: boolean;
39 status: LinkAccountPanelStatus;
40 error: LinkAccountPanelError;
41 selectedCluster?: string;
42 isProcessing: boolean;
45 export interface LinkAccountPanelRootActionProps {
46 startLinking: (type: LinkAccountType) => void;
47 cancelLinking: () => void;
48 linkAccount: () => void;
49 setSelectedCluster: (cluster: string) => void;
52 function displayUser(user: UserResource, showCreatedAt: boolean = false, showCluster: boolean = false) {
54 disp.push(<span><b>{user.email}</b> ({user.username}, {user.uuid})</span>);
56 const homeCluster = user.uuid.substr(0, 5);
57 disp.push(<span> hosted on cluster <b>{homeCluster}</b> and </span>);
60 disp.push(<span> created on <b>{formatDate(user.createdAt)}</b></span>);
65 function isLocalUser(uuid: string, localCluster: string) {
66 return uuid.substring(0, 5) === localCluster;
69 type LinkAccountPanelRootProps = LinkAccountPanelRootDataProps & LinkAccountPanelRootActionProps & WithStyles<CssRules>;
71 export const LinkAccountPanelRoot = withStyles(styles)(
72 ({ classes, targetUser, userToLink, status, isProcessing, error, startLinking, cancelLinking, linkAccount,
73 remoteHosts, hasRemoteHosts, selectedCluster, setSelectedCluster, localCluster, loginCluster }: LinkAccountPanelRootProps) => {
74 return <Card className={classes.root}>
76 {isProcessing && <Grid container item direction="column" alignContent="center" spacing={24}>
78 Loading user info. Please wait.
80 <Grid item style={{ alignSelf: 'center' }}>
84 {!isProcessing && status === LinkAccountPanelStatus.INITIAL && targetUser && <div>
85 {isLocalUser(targetUser.uuid, localCluster) ? <Grid container spacing={24}>
86 <Grid container item direction="column" spacing={24}>
88 You are currently logged in as {displayUser(targetUser, true)}
91 You can link Arvados accounts. After linking, either login will take you to the same account.
94 <Grid container item direction="row" spacing={24}>
96 <Button disabled={!targetUser.isActive} color="primary" variant="contained" onClick={() => startLinking(LinkAccountType.ADD_OTHER_LOGIN)}>
97 Add another login to this account
101 <Button color="primary" variant="contained" onClick={() => startLinking(LinkAccountType.ACCESS_OTHER_ACCOUNT)}>
102 Use this login to access another account
106 {hasRemoteHosts && selectedCluster && <Grid container item direction="column" spacing={24}>
108 You can also link {displayUser(targetUser, false)} with an account from a remote cluster.
111 Please select the cluster that hosts the account you want to link with:
112 <Select id="remoteHostsDropdown" native defaultValue={selectedCluster} style={{ marginLeft: "1em" }}
113 onChange={(event) => setSelectedCluster(event.target.value)}>
114 {Object.keys(remoteHosts).map((k) => k !== localCluster ? <option key={k} value={k}>{k}</option> : null)}
118 <Button color="primary" variant="contained" onClick={() => startLinking(LinkAccountType.ACCESS_OTHER_REMOTE_ACCOUNT)}>
119 Link with an account on {hasRemoteHosts ? <label>{selectedCluster} </label> : null}
124 <Grid container spacing={24}>
125 <Grid container item direction="column" spacing={24}>
127 You are currently logged in as {displayUser(targetUser, true, true)}
129 {targetUser.isActive ? (loginCluster === "" ?
131 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 as user <b>{targetUser.email}</b> from <b>{targetUser.uuid.substr(0, 5)}</b>.
134 <Button color="primary" variant="contained" onClick={() => startLinking(LinkAccountType.ADD_LOCAL_TO_REMOTE)}>
135 Link an account from {localCluster} to this account
138 : <Grid item>Must perform account linking on login cluster <b>{loginCluster}</b></Grid>
141 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.
146 {!isProcessing && (status === LinkAccountPanelStatus.LINKING || status === LinkAccountPanelStatus.ERROR) && userToLink && targetUser &&
147 <Grid container spacing={24}>
148 {status === LinkAccountPanelStatus.LINKING && <Grid container item direction="column" spacing={24}>
150 Clicking 'Link accounts' will link {displayUser(userToLink, true, !isLocalUser(targetUser.uuid, localCluster))} to {displayUser(targetUser, true, !isLocalUser(targetUser.uuid, localCluster))}.
152 {(isLocalUser(targetUser.uuid, localCluster)) && <Grid item>
153 After linking, logging in as {displayUser(userToLink)} will log you into the same account as {displayUser(targetUser)}.
156 Any object owned by {displayUser(userToLink)} will be transfered to {displayUser(targetUser)}.
158 {!isLocalUser(targetUser.uuid, localCluster) && <Grid item>
159 You can access <b>{userToLink.email}</b> data by logging into <b>{localCluster}</b> with the <b>{targetUser.email}</b> account.
162 {error === LinkAccountPanelError.NON_ADMIN && <Grid item>
163 Cannot link admin account {displayUser(userToLink)} to non-admin account {displayUser(targetUser)}.
165 {error === LinkAccountPanelError.SAME_USER && <Grid item>
166 Cannot link {displayUser(targetUser)} to the same account.
168 {error === LinkAccountPanelError.INACTIVE && <Grid item>
169 Cannot link account {displayUser(userToLink)} to inactive account {displayUser(targetUser)}.
171 <Grid container item direction="row" spacing={24}>
173 <Button variant="contained" onClick={() => cancelLinking()}>
178 <Button disabled={status === LinkAccountPanelStatus.ERROR} color="primary" variant="contained" onClick={() => linkAccount()}>