Migrate team invite signup to React - Part II (Front-end) (#3300)

Co-authored-by: Michael Matloka <[email protected]>

frontend/src/global.scss

@@ -6,6 +6,11 @@ style files without adding already imported styles. */
 @import 'node_modules/react-toastify/dist/ReactToastify';
 @import './vars';
 
+@font-face {
+    font-family: 'GoshaSans-Bold';
+    src: url('../public/GoshaSans-Bold.woff2') format('woff2'), url('../public/GoshaSans-Bold.woff') format('woff');
+}
+
 :root {
     --primary: #{$primary};
     --primary-alt: #{$primary_alt};
@@ -56,6 +61,7 @@ style files without adding already imported styles. */
     margin-top: 0.5em;
     font-weight: 700;
     color: $text_default;
+    font-family: $gosha_sans;
 }
 
 .page-caption {
@@ -294,7 +300,7 @@ code.code {
         .caption {
             color: $danger;
         }
-        .ant-input-password,
+        input[type='password'],
         input[type='text'] {
             border-color: $danger !important;
         }

frontend/src/layout/navigation/TopNavigation.tsx

@@ -28,6 +28,19 @@ import { commandPaletteLogic } from 'lib/components/CommandPalette/commandPalett
 import { Link } from 'lib/components/Link'
 import { LinkButton } from 'lib/components/LinkButton'
 import { BulkInviteModal } from 'scenes/organization/TeamMembers/BulkInviteModal'
+import { UserType } from '~/types'
+
+export function WhoAmI({ user }: { user: UserType }): JSX.Element {
+    return (
+        <div className="whoami cursor-pointer" data-attr="top-navigation-whoami">
+            <div className="pp">{user.name[0]?.toUpperCase()}</div>
+            <div className="details hide-lte-lg">
+                <span>{user.name}</span>
+                <span>{user.organization?.name}</span>
+            </div>
+        </div>
+    )
+}
 
 export const TopNavigation = hot(_TopNavigation)
 export function _TopNavigation(): JSX.Element {
@@ -235,17 +248,15 @@ export function _TopNavigation(): JSX.Element {
                         </div>
                     </Dropdown>
                 </div>
-                <div>
-                    <Dropdown overlay={whoAmIDropdown} trigger={['click']}>
-                        <div className="whoami cursor-pointer" data-attr="top-navigation-whoami">
-                            <div className="pp">{user?.name[0]?.toUpperCase()}</div>
-                            <div className="details hide-lte-lg">
-                                <span>{user?.name}</span>
-                                <span>{user?.organization?.name}</span>
+                {user && (
+                    <div>
+                        <Dropdown overlay={whoAmIDropdown} trigger={['click']}>
+                            <div>
+                                <WhoAmI user={user} />
                             </div>
-                        </div>
-                    </Dropdown>
-                </div>
+                        </Dropdown>
+                    </div>
+                )}
             </div>
             <BulkInviteModal visible={inviteMembersModalOpen} onClose={() => setInviteMembersModalOpen(false)} />
             <CreateProjectModal isVisible={projectModalShown} setIsVisible={setProjectModalShown} />

frontend/src/lib/components/SocialLoginButton/index.scss

@@ -0,0 +1,84 @@
+@import '~/vars';
+
+$google: #4285f4;
+$github: #171516;
+$gitlab: #e65328;
+
+.social-logins {
+    margin-bottom: $default_spacing;
+    margin-top: $default_spacing;
+    text-align: center;
+
+    button,
+    a {
+        margin-bottom: $default_spacing / 2;
+    }
+
+    .caption {
+        margin-bottom: $default_spacing / 2;
+        color: $text_muted;
+    }
+}
+
+.btn-social-login {
+    color: white;
+    border: 0;
+    font-weight: bold;
+    position: relative;
+    padding-left: 60px;
+    padding-right: 32px; // 60px - 28px (icon width)
+
+    &:hover {
+        color: white;
+    }
+
+    &.google-oauth2 {
+        background-color: $google;
+
+        &:hover {
+            background-color: lighten($google, 12%);
+        }
+
+        .btn-social-icon .img {
+            background-image: url('./google.svg');
+        }
+    }
+
+    &.github {
+        background-color: $github;
+        &:hover {
+            background-color: lighten($github, 12%);
+        }
+
+        .btn-social-icon .img {
+            background-image: url('./github.svg');
+        }
+    }
+
+    &.gitlab {
+        background-color: $gitlab;
+        &:hover {
+            background-color: lighten($gitlab, 12%);
+        }
+
+        .btn-social-icon .img {
+            background-image: url('./gitlab.svg');
+        }
+    }
+
+    .btn-social-icon {
+        background-color: white;
+        border-radius: $radius;
+        height: 28px;
+        width: 28px;
+        position: absolute;
+        left: 2px;
+        top: 2px;
+        .img {
+            background-position: center center;
+            background-repeat: no-repeat;
+            height: 100%;
+            width: 100%;
+        }
+    }
+}

frontend/src/lib/components/SocialLoginButton/index.tsx

@@ -0,0 +1,70 @@
+import { Button } from 'antd'
+import { useValues } from 'kea'
+import React from 'react'
+import { preflightLogic } from 'scenes/PreflightCheck/logic'
+import './index.scss'
+
+enum SocialAuthProviders {
+    Google = 'google-oauth2',
+    GitHub = 'github',
+    GitLab = 'gitlab',
+}
+
+const ProviderNames: Record<SocialAuthProviders, string> = {
+    [SocialAuthProviders.Google]: 'Google',
+    [SocialAuthProviders.GitHub]: 'GitHub',
+    [SocialAuthProviders.GitLab]: 'GitLab',
+}
+
+interface SharedProps {
+    queryString?: string
+}
+
+interface SocialLoginButtonProps extends SharedProps {
+    provider: SocialAuthProviders
+}
+
+interface SocialLoginButtonsProps extends SharedProps {
+    title?: string
+    caption?: string
+}
+
+export function SocialLoginButton({ provider, queryString }: SocialLoginButtonProps): JSX.Element | null {
+    const { preflight } = useValues(preflightLogic)
+
+    if (!preflight?.available_social_auth_providers[provider]) {
+        return null
+    }
+
+    return (
+        <Button className={`btn-social-login ${provider}`} href={`/login/${provider}/${queryString}`}>
+            <div className="btn-social-icon">
+                <div className="img" />
+            </div>
+            Continue with {ProviderNames[provider]}
+        </Button>
+    )
+}
+
+export function SocialLoginButtons({ title, caption, ...props }: SocialLoginButtonsProps): JSX.Element | null {
+    const { preflight } = useValues(preflightLogic)
+
+    if (
+        !preflight?.available_social_auth_providers ||
+        !Object.values(preflight.available_social_auth_providers).filter((val) => !!val).length
+    ) {
+        return null
+    }
+
+    return (
+        <div className="social-logins">
+            {title && <h3 className="l3">{title}</h3>}
+            {caption && <div className="caption">{caption}</div>}
+            {Object.values(SocialAuthProviders).map((provider) => (
+                <div key={provider}>
+                    <SocialLoginButton provider={provider} {...props} />
+                </div>
+            ))}
+        </div>
+    )
+}

frontend/src/lib/components/StarryBackground/index.scss

@@ -0,0 +1,22 @@
+@import '~/vars';
+
+.starry-background {
+    height: 100%;
+    background: $night_sky;
+
+    .stars {
+        z-index: $z_city_background_image;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: url('./stars.svg') repeat center center;
+    }
+
+    .children {
+        height: 100%;
+        position: relative;
+        z-index: $z_city_background_content;
+    }
+}

frontend/src/lib/components/StarryBackground/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import './index.scss'
+
+export function StarryBackground({
+    children,
+    style,
+}: {
+    children: JSX.Element
+    style?: React.CSSProperties
+}): JSX.Element {
+    return (
+        <div className="starry-background" style={style}>
+            <div className="stars" />
+            <div className="children">{children}</div>
+        </div>
+    )
+}