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";
22 import { Config } from '~/common/config';
24 type CssRules = 'root';
26 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
33 export interface LinkAccountPanelRootDataProps {
34 targetUser?: UserResource;
35 userToLink?: UserResource;
36 remoteHostsConfig: { [key: string]: Config };
37 hasRemoteHosts: boolean;
40 status: LinkAccountPanelStatus;
41 error: LinkAccountPanelError;
42 selectedCluster?: string;
43 isProcessing: boolean;
46 export interface LinkAccountPanelRootActionProps {
47 startLinking: (type: LinkAccountType) => void;
48 cancelLinking: () => void;
49 linkAccount: () => void;
50 setSelectedCluster: (cluster: string) => void;
53 function displayUser(user: UserResource, showCreatedAt: boolean = false, showCluster: boolean = false) {
55 disp.push(<span><b>{user.email}</b> ({user.username}, {user.uuid})</span>);
57 const homeCluster = user.uuid.substr(0, 5);
58 disp.push(<span> hosted on cluster <b>{homeCluster}</b> and </span>);
61 disp.push(<span> created on <b>{formatDate(user.createdAt)}</b></span>);
66 function isLocalUser(uuid: string, localCluster: string) {
67 return uuid.substring(0, 5) === localCluster;
70 type LinkAccountPanelRootProps = LinkAccountPanelRootDataProps & LinkAccountPanelRootActionProps & WithStyles<CssRules>;
72 export const LinkAccountPanelRoot = withStyles(styles)(
73 ({ classes, targetUser, userToLink, status, isProcessing, error, startLinking, cancelLinking, linkAccount,
74 remoteHostsConfig, hasRemoteHosts, selectedCluster, setSelectedCluster, localCluster, loginCluster }: LinkAccountPanelRootProps) => {
75 return <Card className={classes.root}>
77 {isProcessing && <Grid container item direction="column" alignContent="center" spacing={24}>
79 Loading user info. Please wait.
81 <Grid item style={{ alignSelf: 'center' }}>
85 {!isProcessing && status === LinkAccountPanelStatus.INITIAL && targetUser && <div>
86 {isLocalUser(targetUser.uuid, localCluster) ? <Grid container spacing={24}>
87 <Grid container item direction="column" spacing={24}>
89 You are currently logged in as {displayUser(targetUser, true)}
92 You can link Arvados accounts. After linking, either login will take you to the same account.
95 <Grid container item direction="row" spacing={24}>
97 <Button disabled={!targetUser.isActive} color="primary" variant="contained" onClick={() => startLinking(LinkAccountType.ADD_OTHER_LOGIN)}>
98 Add another login to this account
102 <Button color="primary" variant="contained" onClick={() => startLinking(LinkAccountType.ACCESS_OTHER_ACCOUNT)}>
103 Use this login to access another account
107 {hasRemoteHosts && selectedCluster && <Grid container item direction="column" spacing={24}>
109 You can also link {displayUser(targetUser, false)} with an account from a remote cluster.
112 Please select the cluster that hosts the account you want to link with:
113 <Select id="remoteHostsDropdown" native defaultValue={selectedCluster} style={{ marginLeft: "1em" }}
114 onChange={(event) => setSelectedCluster(event.target.value)}>
115 {Object.keys(remoteHostsConfig).map((k) => k !== localCluster ? <option key={k} value={k}>{k}</option> : null)}
119 <Button color="primary" variant="contained" onClick={() => startLinking(LinkAccountType.ACCESS_OTHER_REMOTE_ACCOUNT)}>
120 Link with an account on {hasRemoteHosts ? <label>{selectedCluster} </label> : null}
125 <Grid container spacing={24}>
126 <Grid container item direction="column" spacing={24}>
128 You are currently logged in as {displayUser(targetUser, true, true)}
130 {targetUser.isActive ?
131 (loginCluster === "" ?
133 This a remote account. You can link a local Arvados account to this one.
134 After linking, you can access the local account's data by logging into the
135 <b>{localCluster}</b> cluster as user <b>{targetUser.email}</b>
136 from <b>{targetUser.uuid.substr(0, 5)}</b>.
139 <Button color="primary" variant="contained" onClick={() => startLinking(LinkAccountType.ADD_LOCAL_TO_REMOTE)}>
140 Link an account from {localCluster} to this account
143 : <Grid item>Please visit cluster
144 <a href={remoteHostsConfig[loginCluster].workbench2Url + "/link_account"}>{loginCluster}</a>
145 to perform account linking.</Grid>
148 This an inactive remote account. An administrator must activate your
149 account before you can proceed. After your accounts is activated,
150 you can link a local Arvados account hosted by the <b>{localCluster}</b>
156 {!isProcessing && (status === LinkAccountPanelStatus.LINKING || status === LinkAccountPanelStatus.ERROR) && userToLink && targetUser &&
157 <Grid container spacing={24}>
158 {status === LinkAccountPanelStatus.LINKING && <Grid container item direction="column" spacing={24}>
160 Clicking 'Link accounts' will link {displayUser(userToLink, true, !isLocalUser(targetUser.uuid, localCluster))} to {displayUser(targetUser, true, !isLocalUser(targetUser.uuid, localCluster))}.
162 {(isLocalUser(targetUser.uuid, localCluster)) && <Grid item>
163 After linking, logging in as {displayUser(userToLink)} will log you into the same account as {displayUser(targetUser)}.
166 Any object owned by {displayUser(userToLink)} will be transfered to {displayUser(targetUser)}.
168 {!isLocalUser(targetUser.uuid, localCluster) && <Grid item>
169 You can access <b>{userToLink.email}</b> data by logging into <b>{localCluster}</b> with the <b>{targetUser.email}</b> account.
172 {error === LinkAccountPanelError.NON_ADMIN && <Grid item>
173 Cannot link admin account {displayUser(userToLink)} to non-admin account {displayUser(targetUser)}.
175 {error === LinkAccountPanelError.SAME_USER && <Grid item>
176 Cannot link {displayUser(targetUser)} to the same account.
178 {error === LinkAccountPanelError.INACTIVE && <Grid item>
179 Cannot link account {displayUser(userToLink)} to inactive account {displayUser(targetUser)}.
181 <Grid container item direction="row" spacing={24}>
183 <Button variant="contained" onClick={() => cancelLinking()}>
188 <Button disabled={status === LinkAccountPanelStatus.ERROR} color="primary" variant="contained" onClick={() => linkAccount()}>