implement saved return urls after login

Author: jsladerman

www/src/components/login/CurrentUser.tsx

@@ -18,6 +18,7 @@ import BillingPlatformPlansProvider from '../account/billing/BillingPlatformPlan
 import BillingSubscriptionProvider from '../account/billing/BillingSubscriptionProvider'
 import { PLATFORM_PLANS_QUERY } from '../account/billing/queries'
 import LoadingIndicator from '../utils/LoadingIndicator'
+import { getLoginUrlWithReturn } from 'components/users/utils'
 
 export function handlePreviousUserClick({ jwt }: any) {
   setToken(jwt)
@@ -82,7 +83,7 @@ export function PluralProvider({ children }: any) {
   if (error || !data?.me?.id) {
     wipeToken()
 
-    return <Navigate to="/login" />
+    return <Navigate to={getLoginUrlWithReturn()} />
   }
 
   const { configuration } = data

www/src/components/overview/clusters/Clusters.tsx

@@ -254,16 +254,16 @@ const PaperplaneIcon = () => (
     <path
       d="M10.2918 9.18724H7.48804"
       stroke="white"
-      stroke-width="0.70095"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="0.70095"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
     <path
       d="M6.10755 13.2744C6.08291 13.3417 6.07949 13.415 6.09776 13.4843C6.11603 13.5536 6.15511 13.6156 6.20973 13.662C6.26434 13.7084 6.33188 13.737 6.40322 13.7438C6.47456 13.7506 6.54629 13.7354 6.60873 13.7002L13.9687 9.4906C14.0235 9.46029 14.0691 9.41586 14.1009 9.36193C14.1327 9.308 14.1495 9.24654 14.1495 9.18393C14.1495 9.12133 14.1327 9.05986 14.1009 9.00593C14.0691 8.952 14.0235 8.90757 13.9687 8.87727L6.60873 4.67814C6.54648 4.64332 6.47509 4.62833 6.40409 4.63516C6.33309 4.64199 6.26587 4.67031 6.2114 4.71636C6.15693 4.7624 6.1178 4.82397 6.09924 4.89284C6.08069 4.9617 6.08358 5.03459 6.10755 5.10177L7.48798 9.18787L6.10755 13.2744Z"
       stroke="#C5C9D3"
-      stroke-width="0.70095"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="0.70095"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
   </svg>
 )

www/src/components/users/EmailConfirmation.tsx

@@ -1,8 +1,6 @@
-import { useMutation } from '@apollo/client'
 import { Button, Flex, SendMessageIcon, Toast } from '@pluralsh/design-system'
-import { Box } from 'grommet'
 import { useCallback, useContext, useEffect, useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 
 import { useTheme } from 'styled-components'
 
@@ -12,16 +10,24 @@ import { Alert, AlertStatus, GqlError } from '../utils/Alert'
 import LoadingIndicator from '../utils/LoadingIndicator'
 
 import { LoginPortal } from './LoginPortal'
-import { CREATE_RESET_TOKEN, REALIZE_TOKEN } from './queries'
-import { ResetTokenType } from './types'
+
+import {
+  ResetTokenType,
+  useCreateResetTokenMutation,
+  useRealizeResetTokenMutation,
+} from 'generated/graphql'
+
+export const FROM_EMAIL_CONFIRMATION_KEY = 'fromEmailConfirmation'
 
 export function EmailConfirmed() {
-  const { id } = useParams()
-  const [mutation, { data, error }] = useMutation(REALIZE_TOKEN, {
+  const { id = '' } = useParams()
+  const navigate = useNavigate()
+
+  const [mutation, { data, error }] = useRealizeResetTokenMutation({
     variables: { id, attributes: {} },
     onCompleted: () => {
       setTimeout(() => {
-        ;(window as Window).location = '/'
+        navigate(`/account/edit?${FROM_EMAIL_CONFIRMATION_KEY}=true`)
       }, 2000)
     },
   })
@@ -32,7 +38,8 @@ export function EmailConfirmed() {
 
   return (
     <LoginPortal>
-      <Box
+      <Flex
+        direction="column"
         gap="small"
         width="400px"
       >
@@ -50,7 +57,7 @@ export function EmailConfirmed() {
             error={error}
           />
         )}
-      </Box>
+      </Flex>
     </LoginPortal>
   )
 }
@@ -59,8 +66,8 @@ export function VerifyEmailConfirmed() {
   const theme = useTheme()
   const [open, setOpen] = useState(true)
   const me = useContext(CurrentUserContext)
-  const [mutation] = useMutation(CREATE_RESET_TOKEN, {
-    variables: { attributes: { email: me.email, type: ResetTokenType.EMAIL } },
+  const [mutation] = useCreateResetTokenMutation({
+    variables: { attributes: { email: me.email, type: ResetTokenType.Email } },
     onCompleted: () => setOpen(false),
   })
   const isCurrentlyOnboarding = useIsCurrentlyOnboarding()

www/src/components/users/LoginPortal.tsx

@@ -1,8 +1,9 @@
 import { Flex, styledTheme } from '@pluralsh/design-system'
 
+import styled from 'styled-components'
 import { Footer, FooterBalancer } from './LoginFooter'
-import styled, { useTheme } from 'styled-components'
-import { themProviderPropTypes } from 'honorable'
+import { Suspense } from 'react'
+import LoadingIndicator from 'components/utils/LoadingIndicator'
 
 export const RIGHT_CONTENT_MAX_WIDTH = 512
 export const RIGHT_CONTENT_PAD = styledTheme.spacing.xxlarge
@@ -13,7 +14,6 @@ export const LOGIN_BREAKPOINT = `@media screen and (min-width: ${
 const HERO_IMAGE_URL = '/login-bg-img.webp'
 
 export function LoginPortal({ children }: any) {
-  const { colors } = useTheme()
   return (
     <WrapperSC>
       <Flex
@@ -32,7 +32,7 @@ export function LoginPortal({ children }: any) {
             width: '100%',
           }}
         >
-          {children}
+          <Suspense fallback={<LoadingIndicator />}>{children}</Suspense>
         </div>
         <Footer />
       </Flex>

www/src/components/users/MagicLogin.tsx

@@ -1,3 +1,8 @@
+import { useApolloClient } from '@apollo/client'
+import { Divider, LoadingSpinner } from '@pluralsh/design-system'
+import { Box, Collapsible, Form, Text } from 'grommet'
+import { A, Button, Div, Flex, Icon } from 'honorable'
+import queryString from 'query-string'
 import {
   RefObject,
   createElement,
@@ -6,16 +11,11 @@ import {
   useRef,
   useState,
 } from 'react'
-import { Box, Collapsible, Form, Text } from 'grommet'
-import { Divider, LoadingSpinner } from '@pluralsh/design-system'
-import { useApolloClient } from '@apollo/client'
-import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'
-import queryString from 'query-string'
-import { A, Button, Div, Flex, Icon } from 'honorable'
 import {
   GoogleReCaptchaProvider,
   useGoogleReCaptcha,
 } from 'react-google-recaptcha-v3'
+import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'
 import styled, { useTheme } from 'styled-components'
 
 import {
@@ -31,23 +31,23 @@ import {
 import { WelcomeHeader } from '../utils/WelcomeHeader'
 
 import { fetchToken, setToken } from '../../helpers/authentication'
-import { Alert, AlertStatus, GqlError } from '../utils/Alert'
-import { PLURAL_MARK_WHITE } from '../constants'
 import { host } from '../../helpers/hostname'
-import { useHistory } from '../../router'
+import { PLURAL_MARK_WHITE } from '../constants'
+import { Alert, AlertStatus, GqlError } from '../utils/Alert'
 
+import { getLocalReturnUrl } from './utils'
 import { isValidEmail } from '../../utils/email'
 
+import { finishedDeviceLogin } from './DeviceLoginNotif'
+import { LabelledInput } from './LabelledInput'
+import { LOGIN_BREAKPOINT, LoginPortal } from './LoginPortal'
 import {
   METHOD_ICONS,
   saveChallenge,
   saveDeviceToken,
   wipeChallenge,
   wipeDeviceToken,
 } from './utils'
-import { finishedDeviceLogin } from './DeviceLoginNotif'
-import { LabelledInput } from './LabelledInput'
-import { LOGIN_BREAKPOINT, LoginPortal } from './LoginPortal'
 
 export function PasswordlessLogin() {
   const { token } = useParams()
@@ -120,7 +120,7 @@ export function handleOauthChallenge(client, challenge) {
 }
 
 function LoginPoller({ challenge, token, deviceToken }: any) {
-  const history = useHistory()
+  const navigate = useNavigate()
   const client = useApolloClient()
   const [success, setSuccess] = useState(false)
 
@@ -145,7 +145,7 @@ function LoginPoller({ challenge, token, deviceToken }: any) {
             if (challenge) {
               handleOauthChallenge(client, challenge)
             } else {
-              history.navigate('/')
+              navigate(getLocalReturnUrl())
             }
           }
         )
@@ -255,7 +255,6 @@ function LoginInternal() {
   const navigate = useNavigate()
   const [state, setState] = useState<LoginState>(State.Initial)
   const prevState = useRef<LoginState>(State.Initial)
-  const history = useHistory()
   const client = useApolloClient()
   const location = useLocation()
   const jwt = fetchToken()
@@ -312,7 +311,7 @@ function LoginInternal() {
         if (challenge) {
           handleOauthChallenge(client, challenge)
         } else {
-          history.navigate('/')
+          navigate(getLocalReturnUrl())
         }
       },
     })
@@ -392,7 +391,7 @@ function LoginInternal() {
       setRan(true)
       handleOauthChallenge(client, challenge)
     } else if (!deviceToken && !challenge && jwt) {
-      history.navigate('/')
+      navigate(getLocalReturnUrl())
     }
   }, [challenge, deviceToken, history, client, jwt, ran, setRan])
 

www/src/components/users/OAuthCallback.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react'
 import { useApolloClient, useMutation } from '@apollo/client'
-import { useLocation, useParams } from 'react-router-dom'
+import { useLocation, useNavigate, useParams } from 'react-router-dom'
 import qs from 'query-string'
 import { Box } from 'grommet'
 
@@ -13,8 +13,10 @@ import { handleOauthChallenge } from './MagicLogin'
 import { OAUTH_CALLBACK } from './queries'
 import { getChallenge, getDeviceToken } from './utils'
 import { finishedDeviceLogin } from './DeviceLoginNotif'
+import { getLocalReturnUrl } from './utils'
 
 export function OAuthCallback() {
+  const navigate = useNavigate()
   const location = useLocation()
   const client = useApolloClient()
   const { service } = useParams()
@@ -36,7 +38,7 @@ export function OAuthCallback() {
       if (challenge) {
         handleOauthChallenge(client, challenge)
       } else {
-        window.location.href = '/'
+        navigate(getLocalReturnUrl())
       }
     },
   })

www/src/components/users/SSOCallback.tsx

@@ -1,7 +1,7 @@
 import { Box } from 'grommet'
 import { useEffect } from 'react'
 import { useApolloClient, useMutation } from '@apollo/client'
-import { useLocation } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import qs from 'query-string'
 
 import { setToken } from '../../helpers/authentication'
@@ -12,8 +12,10 @@ import { handleOauthChallenge } from './MagicLogin'
 import { SSO_CALLBACK } from './queries'
 import { getChallenge, getDeviceToken } from './utils'
 import { finishedDeviceLogin } from './DeviceLoginNotif'
+import { getLocalReturnUrl } from './utils'
 
 export function SSOCallback() {
+  const navigate = useNavigate()
   const location = useLocation()
   const client = useApolloClient()
   const { code } = qs.parse(location.search)
@@ -29,7 +31,7 @@ export function SSOCallback() {
       if (challenge) {
         handleOauthChallenge(client, challenge)
       } else {
-        window.location.href = '/'
+        navigate(getLocalReturnUrl())
       }
     },
   })

www/src/components/users/queries.ts

@@ -126,18 +126,6 @@ export const DELETE_CARD = gql`
   ${AccountFragment}
 `
 
-export const CREATE_RESET_TOKEN = gql`
-  mutation Reset($attributes: ResetTokenAttributes!) {
-    createResetToken(attributes: $attributes)
-  }
-`
-
-export const REALIZE_TOKEN = gql`
-  mutation Realize($id: ID!, $attributes: ResetTokenRealization!) {
-    realizeResetToken(id: $id, attributes: $attributes)
-  }
-`
-
 export const LIST_KEYS = gql`
   query Keys($cursor: String) {
     publicKeys(after: $cursor, first: 20) {

www/src/components/users/types.ts

@@ -1,8 +1,3 @@
-export const ResetTokenType = {
-  PASSWORD: 'PASSWORD',
-  EMAIL: 'EMAIL',
-}
-
 export const LoginMethod = {
   PASSWORD: 'PASSWORD',
   PASSWORDLESS: 'PASSWORDLESS',

www/src/components/users/utils.ts

@@ -8,6 +8,7 @@ export const obscure = (token) => token.substring(0, 9) + 'x'.repeat(15)
 
 const CHALLENGE_KEY = 'oauth-challenge'
 const DEVICE_TOKEN_KEY = 'device-token'
+const RETURN_TO_KEY = `return-to`
 
 export const saveChallenge = (challenge) =>
   localStorage.setItem(CHALLENGE_KEY, challenge)
@@ -19,6 +20,27 @@ export const saveDeviceToken = (deviceToken) =>
 export const getDeviceToken = () => localStorage.getItem(DEVICE_TOKEN_KEY)
 export const wipeDeviceToken = () => localStorage.removeItem(DEVICE_TOKEN_KEY)
 
+export function getLoginUrlWithReturn() {
+  const returnPath = window.location.pathname + window.location.search
+  if (returnPath) localStorage.setItem(RETURN_TO_KEY, returnPath)
+
+  return '/login'
+}
+
+export function getLocalReturnUrl(defaultPath: string = '/'): string {
+  const returnTo = localStorage.getItem(RETURN_TO_KEY)
+  localStorage.removeItem(RETURN_TO_KEY)
+
+  if (
+    typeof returnTo === 'string' &&
+    returnTo.startsWith('/') &&
+    !returnTo.startsWith('//')
+  )
+    return returnTo
+
+  return defaultPath
+}
+
 export const METHOD_ICONS = {
   GOOGLE: GoogleLogoIcon,
   GITHUB: GitHubLogoIcon,