1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from 'react';
15 } from '@material-ui/core';
16 import { ArvadosTheme } from '~/common/custom-theme';
17 import { User, UserResource } from "~/models/user";
18 import { LinkAccountType, AccountToLink } from "~/models/link-account";
19 import { formatDate }from "~/common/formatters";
21 type CssRules = 'root';// | 'gridItem' | 'label' | 'title' | 'actions';
23 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
30 export interface LinkAccountPanelRootDataProps {
32 userToLink?: UserResource;
35 export interface LinkAccountPanelRootActionProps {
36 saveAccountLinkData: (type: LinkAccountType) => void;
37 removeAccountLinkData: () => void;
38 linkAccount: () => void;
41 function displayUser(user: UserResource, showCreatedAt: boolean = false) {
43 disp.push(<span><b>{user.email}</b> ({user.username}, {user.uuid})</span>);
45 disp.push(<span> created on <b>{formatDate(user.createdAt)}</b></span>);
50 type LinkAccountPanelRootProps = LinkAccountPanelRootDataProps & LinkAccountPanelRootActionProps & WithStyles<CssRules>;
52 export const LinkAccountPanelRoot = withStyles(styles) (
53 ({classes, user, userToLink, saveAccountLinkData, removeAccountLinkData, linkAccount}: LinkAccountPanelRootProps) => {
54 return <Card className={classes.root}>
56 { user && userToLink===undefined && <Grid container spacing={24}>
57 <Grid container item direction="column" spacing={24}>
59 You are currently logged in as {displayUser(user, true)}
62 You can link Arvados accounts. After linking, either login will take you to the same account.
65 <Grid container item direction="row" spacing={24}>
67 <Button color="primary" variant="contained" onClick={() => saveAccountLinkData(LinkAccountType.ADD_OTHER_LOGIN)}>
68 Add another login to this account
72 <Button color="primary" variant="contained" onClick={() => saveAccountLinkData(LinkAccountType.ACCESS_OTHER_ACCOUNT)}>
73 Use this login to access another account
78 { userToLink && user && <Grid container spacing={24}>
79 <Grid container item direction="column" spacing={24}>
81 Clicking 'Link accounts' will link {displayUser(userToLink, true)} to {displayUser(user, true)}.
84 After linking, logging in as {displayUser(userToLink)} will log you into the same account as {displayUser(user)}.
87 Any object owned by {displayUser(userToLink)} will be transfered to {displayUser(user)}.
90 <Grid container item direction="row" spacing={24}>
92 <Button variant="contained" onClick={() => removeAccountLinkData()}>
97 <Button color="primary" variant="contained" onClick={() => linkAccount()}>