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;
38 status : LinkAccountPanelStatus;
39 error: LinkAccountPanelError;
40 selectedCluster?: string;
41 isProcessing: boolean;
44 export interface LinkAccountPanelRootActionProps {
45 startLinking: (type: LinkAccountType) => void;
46 cancelLinking: () => void;
47 linkAccount: () => void;
48 setSelectedCluster: (cluster: string) => void;
51 function displayUser(user: UserResource, showCreatedAt: boolean = false, showCluster: boolean = false) {
53 disp.push(<span><b>{user.email}</b> ({user.username}, {user.uuid})</span>);
55 const homeCluster = user.uuid.substr(0,5);
56 disp.push(<span> hosted on cluster <b>{homeCluster}</b> and </span>);
59 disp.push(<span> created on <b>{formatDate(user.createdAt, true)}</b></span>);
64 function isLocalUser(uuid: string, localCluster: string) {
65 return uuid.substring(0, 5) === localCluster;
68 type LinkAccountPanelRootProps = LinkAccountPanelRootDataProps & LinkAccountPanelRootActionProps & WithStyles<CssRules>;
70 export const LinkAccountPanelRoot = withStyles(styles) (
71 ({classes, targetUser, userToLink, status, isProcessing, error, startLinking, cancelLinking, linkAccount,
72 remoteHosts, hasRemoteHosts, selectedCluster, setSelectedCluster, localCluster}: LinkAccountPanelRootProps) => {
73 return <Card className={classes.root}>
75 { isProcessing && <Grid container item direction="column" alignContent="center" spacing={24}>
77 Loading user info. Please wait.
79 <Grid item style={{ alignSelf: 'center' }}>
83 { !isProcessing && status === LinkAccountPanelStatus.INITIAL && targetUser && <div>
84 { isLocalUser(targetUser.uuid, localCluster) ? <Grid container spacing={24}>
85 <Grid container item direction="column" spacing={24}>
87 You are currently logged in as {displayUser(targetUser, true)}
90 You can link Arvados accounts. After linking, either login will take you to the same account.
93 <Grid container item direction="row" spacing={24}>
95 <Button disabled={!targetUser.isActive} color="primary" variant="contained" onClick={() => startLinking(LinkAccountType.ADD_OTHER_LOGIN)}>
96 Add another login to this account
100 <Button color="primary" variant="contained" onClick={() => startLinking(LinkAccountType.ACCESS_OTHER_ACCOUNT)}>
101 Use this login to access another account
105 { hasRemoteHosts && selectedCluster && <Grid container item direction="column" spacing={24}>
107 You can also link {displayUser(targetUser, false)} with an account from a remote cluster.
110 Please select the cluster that hosts the account you want to link with:
111 <Select id="remoteHostsDropdown" native defaultValue={selectedCluster} style={{ marginLeft: "1em" }}
112 onChange={(event) => setSelectedCluster(event.target.value)}>
113 {Object.keys(remoteHosts).map((k) => k !== localCluster ? <option key={k} value={k}>{k}</option> : null)}
117 <Button color="primary" variant="contained" onClick={() => startLinking(LinkAccountType.ACCESS_OTHER_REMOTE_ACCOUNT)}>
118 Link with an account on {hasRemoteHosts ? <label>{selectedCluster} </label> : null}
123 <Grid container spacing={24}>
124 <Grid container item direction="column" spacing={24}>
126 You are currently logged in as {displayUser(targetUser, true, true)}
128 {targetUser.isActive ? <> <Grid item>
129 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.
132 <Button color="primary" variant="contained" onClick={() => startLinking(LinkAccountType.ADD_LOCAL_TO_REMOTE)}>
133 Link an account from {localCluster} to this account
137 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.
142 { !isProcessing && (status === LinkAccountPanelStatus.LINKING || status === LinkAccountPanelStatus.ERROR) && userToLink && targetUser &&
143 <Grid container spacing={24}>
144 { status === LinkAccountPanelStatus.LINKING && <Grid container item direction="column" spacing={24}>
146 Clicking 'Link accounts' will link {displayUser(userToLink, true, !isLocalUser(targetUser.uuid, localCluster))} to {displayUser(targetUser, true, !isLocalUser(targetUser.uuid, localCluster))}.
148 { (isLocalUser(targetUser.uuid, localCluster)) && <Grid item>
149 After linking, logging in as {displayUser(userToLink)} will log you into the same account as {displayUser(targetUser)}.
152 Any object owned by {displayUser(userToLink)} will be transfered to {displayUser(targetUser)}.
154 { !isLocalUser(targetUser.uuid, localCluster) && <Grid item>
155 You can access <b>{userToLink.email}</b> data by logging into <b>{localCluster}</b> with the <b>{targetUser.email}</b> account.
158 { error === LinkAccountPanelError.NON_ADMIN && <Grid item>
159 Cannot link admin account {displayUser(userToLink)} to non-admin account {displayUser(targetUser)}.
161 { error === LinkAccountPanelError.SAME_USER && <Grid item>
162 Cannot link {displayUser(targetUser)} to the same account.
164 { error === LinkAccountPanelError.INACTIVE && <Grid item>
165 Cannot link account {displayUser(userToLink)} to inactive account {displayUser(targetUser)}.
167 <Grid container item direction="row" spacing={24}>
169 <Button variant="contained" onClick={() => cancelLinking()}>
174 <Button disabled={status === LinkAccountPanelStatus.ERROR} color="primary" variant="contained" onClick={() => linkAccount()}>