Add Login Component

Summary:
- Add Sandy renderer for `SignInSheet`
- Change background color for default button

Reviewed By: mweststrate

Differential Revision: D24112100

fbshipit-source-id: a602c920c24dd039697834aaba3c79e79f04481e

desktop/app/src/chrome/SignInSheet.tsx

@@ -26,6 +26,7 @@ import {State as Store} from '../reducers';
 import ContextMenu from '../ui/components/ContextMenu';
 import {clipboard} from 'electron';
 import {reportPlatformFailures} from '../utils/metrics';
+import {Modal} from 'antd';
 
 const Container = styled(FlexColumn)({
   padding: 20,
@@ -47,6 +48,7 @@ const TokenInput = styled(Input)({
 });
 
 type OwnProps = {
+  useSandy?: boolean;
   onHide: () => any;
 };
 
@@ -128,9 +130,42 @@ class SignInSheet extends Component<Props, State> {
     this.setState({token: '', error: ''});
   };
 
-  render() {
+  renderSandyContainer(
+    contents: React.ReactElement,
+    footer: React.ReactElement,
+  ) {
+    return (
+      <Modal
+        visible
+        centered
+        onCancel={this.props.onHide}
+        width={570}
+        title="Login"
+        footer={footer}>
+        <FlexColumn>{contents}</FlexColumn>
+      </Modal>
+    );
+  }
+
+  renderNativeContainer(
+    contents: React.ReactElement,
+    footer: React.ReactElement,
+  ) {
     return (
       <Container>
+        {contents}
+        <br />
+        <FlexRow>
+          <Spacer />
+          {footer}
+        </FlexRow>
+      </Container>
+    );
+  }
+
+  render() {
+    const content = (
+      <>
         <Title>You are not currently logged in to Facebook.</Title>
         <InfoText>
           To log in you will need to{' '}
@@ -150,15 +185,18 @@ class SignInSheet extends Component<Props, State> {
             onChange={(e) => this.setState({token: e.target.value})}
           />
         </ContextMenu>
-        <br />
         {this.state.error && (
+          <>
+            <br />
             <InfoText color={colors.red}>
               <strong>Error:</strong>&nbsp;{this.state.error}
             </InfoText>
+          </>
         )}
-        <br />
+      </>
-        <FlexRow>
+    );
-          <Spacer />
+    const footer = (
+      <>
         <Button compact padded onClick={this.props.onHide}>
           Cancel
         </Button>
@@ -168,9 +206,12 @@ class SignInSheet extends Component<Props, State> {
         <Button type="primary" compact padded onClick={this.signIn}>
           Sign In
         </Button>
-        </FlexRow>
+      </>
-      </Container>
     );
+
+    return this.props.useSandy
+      ? this.renderSandyContainer(content, footer)
+      : this.renderNativeContainer(content, footer);
   }
 }
 

desktop/app/src/sandy-chrome/LeftRail.tsx

@@ -9,7 +9,7 @@
 
 import React, {cloneElement, useState, useCallback} from 'react';
 import {styled, Layout} from 'flipper';
-import {Button, Divider, Badge, Tooltip} from 'antd';
+import {Button, Divider, Badge, Tooltip, Avatar, Popover} from 'antd';
 import {
   MobileFilled,
   AppstoreOutlined,
@@ -27,9 +27,12 @@ import {toggleLeftSidebarVisible} from '../reducers/application';
 import {theme} from './theme';
 import SettingsSheet from '../chrome/SettingsSheet';
 import WelcomeScreen from './WelcomeScreen';
+import SignInSheet from '../chrome/SignInSheet';
 import {errorCounterAtom} from '../chrome/ConsoleLogs';
 import {ToplevelProps} from './SandyApp';
 import {useValue} from 'flipper-plugin';
+import {logout} from '../reducers/user';
+import config from '../fb-stubs/config';
 
 const LeftRailButtonElem = styled(Button)<{kind?: 'small'}>(({kind}) => ({
   width: kind === 'small' ? 32 : 36,
@@ -128,7 +131,7 @@ export function LeftRail({
             title="Right Sidebar Toggle"
           />
           <LeftSidebarToggleButton />
-          <LeftRailButton icon={<LoginOutlined />} title="Log In" />
+          {config.showLogin && <LoginButton />}
         </Layout.Vertical>
       </Layout.Bottom>
     </Layout.Container>
@@ -220,3 +223,49 @@ function WelcomeScreenButton() {
     </>
   );
 }
+
+function LoginButton() {
+  const dispatch = useDispatch();
+  const user = useStore((state) => state.user);
+  const login = (user?.id ?? null) !== null;
+  const profileUrl = user?.profile_picture?.uri;
+  const [showLogin, setShowLogin] = useState(false);
+  const [showLogout, setShowLogout] = useState(false);
+  const onClose = useCallback(() => setShowLogin(false), []);
+  const onHandleVisibleChange = useCallback(
+    (visible) => setShowLogout(visible),
+    [],
+  );
+  return login ? (
+    <Popover
+      content={
+        <Button
+          block
+          style={{backgroundColor: theme.backgroundDefault}}
+          onClick={() => {
+            onHandleVisibleChange(false);
+            dispatch(logout());
+          }}>
+          Log Out
+        </Button>
+      }
+      trigger="click"
+      placement="right"
+      visible={showLogout}
+      overlayStyle={{padding: 0}}
+      onVisibleChange={onHandleVisibleChange}>
+      <Layout.Container padv={theme.inlinePaddingV}>
+        <Avatar size="small" src={profileUrl} />
+      </Layout.Container>
+    </Popover>
+  ) : (
+    <>
+      <LeftRailButton
+        icon={<LoginOutlined />}
+        title="Log In"
+        onClick={() => setShowLogin(true)}
+      />
+      {showLogin && <SignInSheet onHide={onClose} useSandy />}
+    </>
+  );
+}

desktop/app/src/sandy-chrome/SandyDesignSystem.tsx

@@ -69,6 +69,7 @@ export default function SandyDesignSystem() {
           <ColorPreview name="disabledColor" />
           <ColorPreview name="backgroundDefault" />
           <ColorPreview name="backgroundWash" />
+          <ColorPreview name="buttonDefaultBackground" />
           <ColorPreview name="backgroundTransparentHover" />
           <ColorPreview name="dividerColor" />
         </Card>

desktop/app/src/sandy-chrome/theme.tsx

@@ -22,6 +22,7 @@ export const theme = {
   disabledColor: 'var(--flipper-disabled-color)',
   backgroundDefault: 'var(--flipper-background-default)',
   backgroundWash: 'var(--flipper-background-wash)',
+  buttonDefaultBackground: 'var(--flipper-button-default-background)',
   backgroundTransparentHover: 'var(--flipper-background-transparent-hover)',
   dividerColor: 'var(--flipper-divider-color)',
   borderRadius: 'var(--flipper-border-radius)',

desktop/themes/base.less

@@ -30,6 +30,7 @@
 @normal-color: @background-wash;
 @tooltip-color: @background-default;
 @tooltip-bg: @text-color-primary;
+@btn-default-bg: @button-default-background;
 
 /**
  This section maps theme colors to CSS variables so that they can be
@@ -47,6 +48,7 @@
   --flipper-disabled-color: @disabled-color;
   --flipper-background-default: @background-default;
   --flipper-background-wash: @background-wash;
+  --flipper-button-default-background: @button-default-background;
   --flipper-background-transparent-hover: @background-transparent-hover;
   --flipper-divider-color: @divider-color;
   --flipper-border-radius: @border-radius-base;

desktop/themes/dark.less

@@ -30,6 +30,8 @@
 @background-default: @black;
 // Background - Wash
 @background-wash: #0d0d0d; // white 5%
+// Backgroud - default button
+@button-default-background: rgba(255, 255, 255, 0.1); // white 10%
 // Background - transparent hover
 @button-transparent-hover: rgba(255, 255, 255, 0.1); // white 10%
 
@@ -38,7 +40,6 @@
 // @background-wash2: fade(@white, 10%)
 // @button-primary-background: @purple6;
 // @button-primary-background-hover: @purple7;
-// @button-default-background: @fade(@white, 10%)
 // @button-default=backgorund-hover: @fade(@white, 15%)
 // @button-default-background-disabled: @fade(@white, 10%)
 // @button-background-active: @fade(@white, 8%)

desktop/themes/light.less

@@ -30,6 +30,8 @@
 @background-default: @white;
 // Background - Wash
 @background-wash: #f2f2f2; // black 5%
+// Backgroud - default button
+@button-default-background: rgba(0, 0, 0, 0.1); // black 10%
 // Background - transparent hover
 @background-transparent-hover: rgba(0, 0, 0, 0.1); // black 10%
 
@@ -38,7 +40,6 @@
 // @background-wash2: fade(@black, 10%)
 // @button-primary-background: @purple6;
 // @button-primary-background-hover: @purple7;
-// @button-default-background: @fade(@black, 10%)
 // @button-default=backgorund-hover: @fade(@black, 15%)
 // @button-default-background-disabled: @fade(@black, 10%)
 // @button-background-active: @fade(@black, 8%)