+ {title &&
+ )
+}
diff --git a/frontend/src/lib/components/StarryBackground/index.scss b/frontend/src/lib/components/StarryBackground/index.scss
new file mode 100644
index 0000000000000..e9930e3a5b884
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/frontend/src/lib/components/StarryBackground/index.tsx b/frontend/src/lib/components/StarryBackground/index.tsx
new file mode 100644
index 0000000000000..a5c9259407738
--- /dev/null
+++ b/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 (
+ {title}
} + {caption &&{caption}
}
+ {Object.values(SocialAuthProviders).map((provider) => (
+
+
+ ))}
+
+
+
+ )
+}
diff --git a/frontend/src/lib/components/StarryBackground/stars.svg b/frontend/src/lib/components/StarryBackground/stars.svg
new file mode 100644
index 0000000000000..5bb11129b5db1
--- /dev/null
+++ b/frontend/src/lib/components/StarryBackground/stars.svg
@@ -0,0 +1,117 @@
+
diff --git a/frontend/src/scenes/App.tsx b/frontend/src/scenes/App.tsx
index 9b870022a7e5b..dae600f7ae2c1 100644
--- a/frontend/src/scenes/App.tsx
+++ b/frontend/src/scenes/App.tsx
@@ -35,7 +35,7 @@ function _App(): JSX.Element | null {
const { featureFlags } = useValues(featureFlagLogic)
useEffect(() => {
- if (scene === Scene.Signup && !preflight.cloud && preflight.initiated) {
+ if (scene === Scene.Signup && preflight && !preflight.cloud && preflight.initiated) {
// If user is on an initiated self-hosted instance, redirect away from signup
replace('/login')
return
@@ -44,8 +44,8 @@ function _App(): JSX.Element | null {
useEffect(() => {
if (user) {
- // If user is already logged in, redirect away from unauthenticated routes like signup
- if (sceneConfig.unauthenticated) {
+ // If user is already logged in, redirect away from unauthenticated-only routes like signup
+ if (sceneConfig.onlyUnauthenticated) {
replace('/')
return
}
@@ -86,7 +86,7 @@ function _App(): JSX.Element | null {
)
if (!user) {
- return sceneConfig.unauthenticated ? (
+ return sceneConfig.onlyUnauthenticated || sceneConfig.allowUnauthenticated ? (
{children}
+ {error?.detail}
+
+ {user ? (
+
+ You can either log out and create a new account under the new email address or ask the
+ organization admin to send a{' '}
+ new invite to the email address on your account, {user?.email}.
+
+ ) : (
+
+
+ ),
+ actions: user ?
+ You need to log in with the email address above, or create your own password.
+
+ )}
+
+ } href={window.location.pathname}>
+ Try again
+
+
+
+
+
+
+ {ErrorMessages[error.code].title}
+{ErrorMessages[error.code].detail}
+ {ErrorMessages[error.code].actions}
+
+
+ )
+}
+
+export const InviteSignup = hot(_InviteSignup)
+function _InviteSignup(): JSX.Element {
+ const { invite, inviteLoading } = useValues(inviteSignupLogic)
+ const { user } = useValues(userLogic)
+
+ if (inviteLoading) {
+ return
+
+
+
+
+
+ You have been invited to join {invite.organization_name}
+
+ You will accept the invite under your existing PostHog account ({user?.email})
+
+
+
+ )}
+
+
+
+
+ {!acceptedInvite ? (
+ <>
+
+
+
+
+
+
+ ) : (
+
+ )}
+
+
+ )
+}
diff --git a/frontend/src/scenes/onboarding/LoginSignup.scss b/frontend/src/scenes/onboarding/LoginSignup.scss
new file mode 100644
index 0000000000000..19db865f19012
--- /dev/null
+++ b/frontend/src/scenes/onboarding/LoginSignup.scss
@@ -0,0 +1,136 @@
+@import '~/vars';
+
+.login-signup {
+ height: 100vh;
+ position: relative;
+
+ .ant-row {
+ height: 100%;
+ }
+
+ .image-showcase-container {
+ height: 100%;
+ position: relative;
+
+ .image-showcase {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ background: $sky;
+
+ .the-mountains {
+ z-index: $z_city_background_image;
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ height: 180px;
+ background: url('./mountains.svg');
+ background-size: cover;
+ }
+ }
+
+ .main-logo {
+ padding-top: $default_spacing;
+ padding-left: $default_spacing * 2;
+ img {
+ height: 60px;
+ }
+ }
+
+ .company {
+ font-family: $gosha_sans;
+ font-size: 2.7rem;
+ margin-bottom: 0;
+ }
+
+ .showcase-content {
+ z-index: $z_city_background_content;
+ color: $text_light;
+ height: calc(100% - 100px);
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ padding: 0 $default_spacing * 2;
+ position: relative;
+
+ h1,
+ h2,
+ h3 {
+ b {
+ color: white;
+ }
+ }
+
+ .page-title {
+ color: rgba(255, 255, 255, 0.6);
+ }
+
+ h3 {
+ color: $text_light;
+ }
+
+ .mobile-continue {
+ display: none;
+ }
+ }
+ }
+
+ .rhs-content {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding-top: $default_spacing * 2;
+
+ .rhs-inner {
+ width: 100%;
+ max-width: 382px; // 350px + 32px padding
+ padding: 0 $default_spacing;
+ }
+
+ .password-login {
+ margin-top: $default_spacing * 2;
+ }
+ }
+
+ @media screen and (max-width: $md) {
+ overflow: auto;
+ scroll-behavior: smooth;
+
+ .image-showcase {
+ position: relative !important;
+ height: 100%;
+ }
+
+ .showcase-content {
+ .page-title {
+ margin-top: 0;
+ }
+
+ .mobile-continue {
+ display: block !important;
+ padding-top: $default_spacing;
+ }
+ }
+
+ .rhs-content {
+ height: initial;
+ overflow: initial;
+
+ .top-helper {
+ text-align: left;
+ margin-right: 0;
+ padding: 0 $default_spacing;
+ color: $text_muted;
+ b {
+ font-weight: normal;
+ }
+ }
+ }
+ }
+}
diff --git a/frontend/src/scenes/onboarding/LoginSignup.tsx b/frontend/src/scenes/onboarding/LoginSignup.tsx
new file mode 100644
index 0000000000000..ddae7b636b4d7
--- /dev/null
+++ b/frontend/src/scenes/onboarding/LoginSignup.tsx
@@ -0,0 +1,193 @@
+import { Button, Col, Input, Row } from 'antd'
+import React, { lazy, Suspense, useRef, useState } from 'react'
+import './LoginSignup.scss'
+import smLogo from 'public/icon-white.svg'
+import { SocialLoginButtons } from 'lib/components/SocialLoginButton'
+import { PrevalidatedInvite } from '~/types'
+import { Link } from 'lib/components/Link'
+import { ArrowDownOutlined } from '@ant-design/icons'
+import { useActions, useValues } from 'kea'
+import { inviteSignupLogic } from './inviteSignupLogic'
+import Checkbox from 'antd/lib/checkbox/Checkbox'
+import { preflightLogic } from 'scenes/PreflightCheck/logic'
+
+const PasswordStrength = lazy(() => import('../../lib/components/PasswordStrength'))
+
+interface LoginSignupProps {
+ invite?: PrevalidatedInvite | null
+}
+
+export function LoginSignup({ invite }: LoginSignupProps): JSX.Element {
+ /*
+ UI component for the login & signup pages.
+ Currently used for: InviteSignup.
+ */
+ const [formValues, setFormValues] = useState({
+ firstName: invite?.first_name || '',
+ password: '',
+ emailOptIn: true,
+ })
+ const [formState, setFormState] = useState({ submitted: false, passwordInvalid: false })
+ const mainContainerRef = useRef
+
+
+
+ )
+}
diff --git a/frontend/src/scenes/onboarding/index.js b/frontend/src/scenes/onboarding/Signup.js
similarity index 99%
rename from frontend/src/scenes/onboarding/index.js
rename to frontend/src/scenes/onboarding/Signup.js
index 0485f5345448f..84b4ba3a03bf6 100644
--- a/frontend/src/scenes/onboarding/index.js
+++ b/frontend/src/scenes/onboarding/Signup.js
@@ -1,3 +1,6 @@
+{
+ /* DEPRECATED in favor of LoginSignup.tsx (see #3339) */
+}
import React, { useState, useRef, lazy, Suspense } from 'react'
import { useActions, useValues } from 'kea'
import { signupLogic } from './logic'
diff --git a/frontend/src/scenes/onboarding/inviteSignupLogic.ts b/frontend/src/scenes/onboarding/inviteSignupLogic.ts
new file mode 100644
index 0000000000000..681e22f3cfc39
--- /dev/null
+++ b/frontend/src/scenes/onboarding/inviteSignupLogic.ts
@@ -0,0 +1,100 @@
+import { kea } from 'kea'
+import api from 'lib/api'
+import { toast } from 'react-toastify'
+import { PrevalidatedInvite } from '~/types'
+import { inviteSignupLogicType } from './inviteSignupLogicType'
+
+export enum ErrorCodes {
+ InvalidInvite = 'invalid_invite',
+ InvalidRecipient = 'invalid_recipient',
+ Unknown = 'unknown',
+}
+
+interface ErrorInterface {
+ code: ErrorCodes
+ detail?: string
+}
+
+interface AcceptInvitePayloadInterface {
+ first_name?: string
+ password: string
+ email_opt_in: boolean
+}
+
+export const inviteSignupLogic = kea<
+ inviteSignupLogicType
+
+
+
+
+ 
+
+
+
+ + Hello{invite?.first_name ? ` ${invite.first_name}` : ''}! You've been invited to join +
+{invite?.organization_name || 'us'}
+ on PostHog
+
+ } type="default" onClick={handleScroll}>
+ Continue
+
+
+
+
+
+
+
+ + {socialAuthAvailable ? 'Or create your own passowrd' : 'Create your PostHog account'} +
+ +
+ By clicking continue you agree to our{' '}
+
+ Terms of Service
+ {' '}
+ and{' '}
+
+ Privacy Policy
+
+ .
+
+
+ Already have an account? Log in
+
+