github.com/cockroachdb/cockroach@v20.2.0-alpha.1+incompatible/pkg/ui/src/views/app/components/loginIndicator/loginIndicator.tsx (about)

     1  // Copyright 2019 The Cockroach Authors.
     2  //
     3  // Use of this software is governed by the Business Source License
     4  // included in the file licenses/BSL.txt.
     5  //
     6  // As of the Change Date specified in that file, in accordance with
     7  // the Business Source License, use of this software will be governed
     8  // by the Apache License, Version 2.0, included in the file
     9  // licenses/APL.txt.
    10  
    11  import React from "react";
    12  import { connect } from "react-redux";
    13  
    14  import { AdminUIState } from "src/redux/state";
    15  import { trustIcon } from "src/util/trust";
    16  import Popover from "src/views/shared/components/popover";
    17  import UserAvatar from "src/views/shared/components/userAvatar";
    18  import UserMenu from "src/views/app/components/userMenu";
    19  import { doLogout, LoginState, selectLoginState } from "src/redux/login";
    20  
    21  import unlockedIcon from "!!raw-loader!assets/unlocked.svg";
    22  import "./loginIndicator.styl";
    23  
    24  interface LoginIndicatorProps {
    25    loginState: LoginState;
    26    handleLogout: () => null;
    27  }
    28  
    29  interface LoginIndicatorState {
    30    isOpenMenu: boolean;
    31  }
    32  
    33  class LoginIndicator extends React.Component<LoginIndicatorProps, LoginIndicatorState> {
    34    constructor(props: LoginIndicatorProps) {
    35      super(props);
    36      this.state = {
    37        isOpenMenu: false,
    38      };
    39    }
    40  
    41    onUserMenuToggle = (nextState: boolean) => {
    42      this.setState({
    43        isOpenMenu: nextState,
    44      });
    45    }
    46  
    47    render() {
    48      const { loginState, handleLogout } = this.props;
    49      const { isOpenMenu } = this.state;
    50      if (!loginState.secureCluster()) {
    51        return (
    52          <div className="login-indicator login-indicator--insecure">
    53            <div
    54              className="image-container"
    55              title="Insecure mode"
    56              dangerouslySetInnerHTML={trustIcon(unlockedIcon)}
    57            />
    58            <div className="login-indicator__title">Insecure mode</div>
    59          </div>
    60        );
    61      }
    62  
    63      if (!loginState.displayUserMenu()) {
    64        return null;
    65      }
    66  
    67      const user = loginState.loggedInUser();
    68  
    69      if (user == null) {
    70        return null;
    71      }
    72  
    73      return (
    74        <div className="login-indicator">
    75          <Popover
    76            content={<UserAvatar userName={user} />}
    77            visible={isOpenMenu}
    78            onVisibleChange={this.onUserMenuToggle}
    79          >
    80            <UserMenu
    81              userName={user}
    82              onLogoutClick={handleLogout}/>
    83          </Popover>
    84        </div>
    85      );
    86    }
    87  }
    88  
    89  export default connect(
    90    (state: AdminUIState) => ({
    91      loginState: selectLoginState(state),
    92    }),
    93    (dispatch) => ({
    94      handleLogout: () => {
    95        dispatch(doLogout());
    96      },
    97    }),
    98  )(LoginIndicator);