refactor: Refactor login page

coder · BrunoQuaresma · Nov 23, 2022 · Nov 22, 2022 · Nov 23, 2022 · Nov 23, 2022
commit 71c7a9662f77c0c524b0b859d8997b985f734933
diff --git a/site/src/components/SignInForm/SignInForm.tsx b/site/src/components/SignInForm/SignInForm.tsx
@@ -11,7 +11,6 @@ import { FC } from "react"
 import * as Yup from "yup"
 import { AuthMethods } from "../../api/typesGenerated"
 import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
-import { Welcome } from "../Welcome/Welcome"
 import { LoadingButton } from "./../LoadingButton/LoadingButton"
 import { AlertBanner } from "components/AlertBanner/AlertBanner"
 
@@ -57,6 +56,27 @@ const validationSchema = Yup.object({
 })
 
 const useStyles = makeStyles((theme) => ({
+  wrapper: {
+    maxWidth: 385,
+    width: "100%",
+
+    [theme.breakpoints.down("sm")]: {
+      maxWidth: "none",
+    },
+  },
+
+  title: {
+    fontSize: theme.spacing(4),
+    fontWeight: 400,
+    margin: 0,
+    marginBottom: theme.spacing(4),
+    lineHeight: 1,
+
+    "& strong": {
+      fontWeight: 600,
+    },
+  },
+
   buttonIcon: {
     width: 14,
     height: 14,
@@ -87,13 +107,7 @@ export interface SignInFormProps {
   redirectTo: string
   loginErrors: Partial<Record<LoginErrors, Error | unknown>>
   authMethods?: AuthMethods
-  onSubmit: ({
-    email,
-    password,
-  }: {
-    email: string
-    password: string
-  }) => Promise<void>
+  onSubmit: (credentials: { email: string; password: string }) => void
   // initialTouched is only used for testing the error state of the form.
   initialTouched?: FormikTouched<BuiltInAuthFormValues>
 }
@@ -129,8 +143,10 @@ export const SignInForm: FC<React.PropsWithChildren<SignInFormProps>> = ({
   )
 
   return (
-    <>
-      <Welcome />
+    <div className={styles.wrapper}>
+      <h1 className={styles.title}>
+        Sign in to <strong>Coder</strong>
+      </h1>
       <form onSubmit={form.handleSubmit}>
         <Stack>
           {Object.keys(loginErrors).map(
@@ -176,7 +192,7 @@ export const SignInForm: FC<React.PropsWithChildren<SignInFormProps>> = ({
         </Stack>
       </form>
       {(authMethods?.github || authMethods?.oidc) && (
-        <>
+        <div>
           <div className={styles.divider}>
             <div className={styles.dividerLine} />
             <div className={styles.dividerLabel}>Or</div>
@@ -222,8 +238,8 @@ export const SignInForm: FC<React.PropsWithChildren<SignInFormProps>> = ({
               </Link>
             )}
           </Box>
-        </>
+        </div>
       )}
-    </>
+    </div>
   )
 }
diff --git a/site/src/components/WorkspacesTable/WorkspacesTableBody.tsx b/site/src/components/WorkspacesTable/WorkspacesTableBody.tsx
@@ -62,7 +62,7 @@ export const WorkspacesTableBody: FC<
                   }
                   image={
                     <div className={styles.emptyImage}>
-                      <img src="/empty/workspaces.webp" alt="" />
+                      <img src="/featured/workspaces.webp" alt="" />
                     </div>
                   }
                 />

diff --git a/site/src/pages/LoginPage/LoginPage.tsx b/site/src/pages/LoginPage/LoginPage.tsx
@@ -1,40 +1,16 @@
 import { useActor } from "@xstate/react"
-import { FullScreenLoader } from "components/Loader/FullScreenLoader"
-import { SignInLayout } from "components/SignInLayout/SignInLayout"
-import React, { useContext } from "react"
+import { FC, useContext } from "react"
 import { Helmet } from "react-helmet-async"
 import { Navigate, useLocation } from "react-router-dom"
-import { LoginErrors, SignInForm } from "../../components/SignInForm/SignInForm"
-import { pageTitle } from "../../util/page"
 import { retrieveRedirect } from "../../util/redirect"
 import { XServiceContext } from "../../xServices/StateContext"
+import { LoginPageView } from "./LoginPageView"
 
-interface LocationState {
-  isRedirect: boolean
-}
-
-export const LoginPage: React.FC = () => {
+export const LoginPage: FC = () => {
   const location = useLocation()
   const xServices = useContext(XServiceContext)
   const [authState, authSend] = useActor(xServices.authXService)
-  const isLoading = authState.hasTag("loading")
   const redirectTo = retrieveRedirect(location.search)
-  const locationState = location.state
-    ? (location.state as LocationState)
-    : null
-  const isRedirected = locationState ? locationState.isRedirect : false
-  const { authError, getUserError, checkPermissionsError, getMethodsError } =
-    authState.context
-
-  const onSubmit = async ({
-    email,
-    password,
-  }: {
-    email: string
-    password: string
-  }) => {
-    authSend({ type: "SIGN_IN", email, password })
-  }
 
   if (authState.matches("signedIn")) {
     return <Navigate to={redirectTo} replace />
@@ -44,28 +20,15 @@ export const LoginPage: React.FC = () => {
     return (
       <>
         <Helmet>
-          <title>{pageTitle("Login")}</title>
+          <title>Sign in to Coder</title>
         </Helmet>
-        {authState.hasTag("loading") ? (
-          <FullScreenLoader />
-        ) : (
-          <SignInLayout>
-            <SignInForm
-              authMethods={authState.context.methods}
-              redirectTo={redirectTo}
-              isLoading={isLoading}
-              loginErrors={{
-                [LoginErrors.AUTH_ERROR]: authError,
-                [LoginErrors.GET_USER_ERROR]: isRedirected
-                  ? getUserError
-                  : null,
-                [LoginErrors.CHECK_PERMISSIONS_ERROR]: checkPermissionsError,
-                [LoginErrors.GET_METHODS_ERROR]: getMethodsError,
-              }}
-              onSubmit={onSubmit}
-            />
-          </SignInLayout>
-        )}
+        <LoginPageView
+          context={authState.context}
+          isLoading={authState.hasTag("loading")}
+          onSignIn={({ email, password }) => {
+            authSend({ type: "SIGN_IN", email, password })
+          }}
+        />
       </>
     )
   }

diff --git a/site/src/pages/LoginPage/LoginPageView.stories.tsx b/site/src/pages/LoginPage/LoginPageView.stories.tsx
@@ -0,0 +1,19 @@
+import { action } from "@storybook/addon-actions"
+import { ComponentMeta, Story } from "@storybook/react"
+import { LoginPageView, LoginPageViewProps } from "./LoginPageView"
+
+export default {
+  title: "pages/LoginPageView",
+  component: LoginPageView,
+} as ComponentMeta<typeof LoginPageView>
+
+const Template: Story<LoginPageViewProps> = (args) => (
+  <LoginPageView {...args} />
+)
+
+export const Example = Template.bind({})
+Example.args = {
+  isLoading: false,
+  onSignIn: action("onSignIn"),
+  context: {},
+}
diff --git a/site/src/pages/LoginPage/LoginPageView.tsx b/site/src/pages/LoginPage/LoginPageView.tsx
@@ -0,0 +1,167 @@
+import { makeStyles } from "@material-ui/core/styles"
+import { Logo } from "components/Icons/Logo"
+import { FullScreenLoader } from "components/Loader/FullScreenLoader"
+import { FC } from "react"
+import { useLocation } from "react-router-dom"
+import { AuthContext } from "xServices/auth/authXService"
+import { LoginErrors, SignInForm } from "../../components/SignInForm/SignInForm"
+import { retrieveRedirect } from "../../util/redirect"
+
+interface LocationState {
+  isRedirect: boolean
+}
+
+export interface LoginPageViewProps {
+  context: AuthContext
+  isLoading: boolean
+  onSignIn: (credentials: { email: string; password: string }) => void
+}
+
+export const LoginPageView: FC<LoginPageViewProps> = ({
+  context,
+  isLoading,
+  onSignIn,
+}) => {
+  const location = useLocation()
+  const redirectTo = retrieveRedirect(location.search)
+  const locationState = location.state
+    ? (location.state as LocationState)
+    : null
+  const isRedirected = locationState ? locationState.isRedirect : false
+  const { authError, getUserError, checkPermissionsError, getMethodsError } =
+    context
+  const styles = useStyles()
+
+  return isLoading ? (
+    <FullScreenLoader />
+  ) : (
+    <div className={styles.container}>
+      <div className={styles.left}>
+        <Logo fill="white" opacity={1} width={110} />
+
+        <div className={styles.formSection}>
+          <SignInForm
+            authMethods={context.methods}
+            redirectTo={redirectTo}
+            isLoading={isLoading}
+            loginErrors={{
+              [LoginErrors.AUTH_ERROR]: authError,
+              [LoginErrors.GET_USER_ERROR]: isRedirected ? getUserError : null,
+              [LoginErrors.CHECK_PERMISSIONS_ERROR]: checkPermissionsError,
+              [LoginErrors.GET_METHODS_ERROR]: getMethodsError,
+            }}
+            onSubmit={onSignIn}
+          />
+        </div>
+
+        <footer className={styles.footer}>
+          Copyright © 2022 Coder Technologies, Inc.
+        </footer>
+      </div>
+
+      <div className={styles.right}>
+        <div className={styles.tipWrapper}>
+          <div className={styles.tipContent}>
+            <h2 className={styles.tipTitle}>Scheduling</h2>
+            <p>
+              Coder automates your cloud cost control by ensuring developer
+              resources are only online while used.
+            </p>
+            <img
+              src="/featured/scheduling.webp"
+              alt=""
+              className={styles.tipImage}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    padding: theme.spacing(5),
+    margin: "auto",
+    display: "flex",
+    height: "100vh",
+
+    [theme.breakpoints.down("md")]: {
+      height: "auto",
+      minHeight: "100vh",
+    },
+
+    [theme.breakpoints.down("sm")]: {
+      padding: theme.spacing(4),
+    },
+  },
+
+  left: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(4),
+  },
+
+  right: {
+    flex: 1,
+
+    [theme.breakpoints.down("md")]: {
+      display: "none",
+    },
+  },
+
+  formSection: {
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+
+  footer: {
+    fontSize: 12,
+    color: theme.palette.text.secondary,
+  },
+
+  tipWrapper: {
+    width: "100%",
+    height: "100%",
+    borderRadius: theme.shape.borderRadius,
+    background: theme.palette.background.paper,
+    padding: theme.spacing(5),
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+
+  tipContent: {
+    maxWidth: 570,
+    textAlign: "center",
+    fontSize: 16,
+    color: theme.palette.text.secondary,
+    lineHeight: "160%",
+
+    "& p": {
+      maxWidth: 440,
+      margin: "auto",
+    },
+
+    "& strong": {
+      color: theme.palette.text.primary,
+    },
+  },
+
+  tipTitle: {
+    fontWeight: 400,
+    fontSize: 24,
+    margin: 0,
+    lineHeight: 1,
+    marginBottom: theme.spacing(2),
+    color: theme.palette.text.primary,
+  },
+
+  tipImage: {
+    maxWidth: 570,
+    marginTop: theme.spacing(4),
+  },
+}))
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
@@ -185,7 +185,7 @@ export const TemplatesPageView: FC<
                       cta={<CodeExample code="coder templates init" />}
                       image={
                         <div className={styles.emptyImage}>
-                          <img src="/empty/templates.webp" alt="" />
+                          <img src="/featured/templates.webp" alt="" />
                         </div>
                       }
                     />

diff --git a/site/static/featured/scheduling.webp b/site/static/featured/scheduling.webp
diff --git a/site/static/empty/templates.webp → site/static/featured/templates.webp b/site/static/empty/templates.webp → site/static/featured/templates.webp
diff --git a/site/static/empty/workspaces.webp → site/static/featured/workspaces.webp b/site/static/empty/workspaces.webp → site/static/featured/workspaces.webp
-Original file line number
+Diff line change
@@ Expand Up / @@ -62,7 +62,7 @@ export const WorkspacesTableBody: FC< @@
                       }
                       image={
                         <div className={styles.emptyImage}>
-                          <img src="/empty/workspaces.webp" alt="" />
+                          <img src="/featured/workspaces.webp" alt="" />
                         </div>
                       }
                     />
@@ Expand Down @@