Revert "Revert "[C-3388] Improve sign-on root (#6753)" (#6764)"

This reverts commit 29abb47.
AudiusProject · Nov 23, 2023 · 57e4ed7 · 57e4ed7
1 parent 482e382
commit 57e4ed7
Show file tree

Hide file tree

Showing 25 changed files with 320 additions and 297 deletions.
diff --git a/packages/harmony/src/components/button/BaseButton/BaseButton.tsx b/packages/harmony/src/components/button/BaseButton/BaseButton.tsx
@@ -17,6 +17,7 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
     const {
       iconLeft: LeftIconComponent,
       iconRight: RightIconComponent,
+      isStaticIcon,
       disabled,
       isLoading,
       widthToHideText,
@@ -93,7 +94,7 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
       })
     }
 
-    const iconCss = {
+    const iconCss = !isStaticIcon && {
       '& path': {
         fill: 'currentcolor'
       }

diff --git a/packages/harmony/src/components/button/types.ts b/packages/harmony/src/components/button/types.ts
@@ -53,6 +53,10 @@ export type BaseButtonProps = {
    */
   iconRight?: IconComponent
 
+  /**
+   * When true, do not override icon's fill colors
+   */
+  isStaticIcon?: boolean
   /**
    * Show a spinning loading state instead of the left icon
    */

diff --git a/packages/harmony/src/components/text-link/TextLink.stories.tsx b/packages/harmony/src/components/text-link/TextLink.stories.tsx
@@ -18,7 +18,7 @@ const meta: Meta<typeof TextLink> = {
   render: (props) => (
     <Flex direction='row' gap='4xl'>
       <TextLink {...props} />
-      <TextLink {...props} _isHovered />
+      <TextLink {...props} showUnderline />
     </Flex>
   )
 }

diff --git a/packages/harmony/src/components/text-link/TextLink.tsx b/packages/harmony/src/components/text-link/TextLink.tsx
@@ -10,13 +10,13 @@ import type { TextLinkProps } from './types'
  */
 export const TextLink = (props: TextLinkProps) => {
   const {
-    _isHovered = false,
     asChild = false,
     children,
     variant = 'default',
     isExternal = false,
     onClick,
     textVariant,
+    showUnderline,
     ...other
   } = props
 
@@ -48,7 +48,7 @@ export const TextLink = (props: TextLinkProps) => {
         color: variantColors[variant],
         textDecoration: 'none',
         ':hover': hoverStyles,
-        ...(_isHovered && hoverStyles)
+        ...(showUnderline && hoverStyles)
       }}
       variant={textVariant}
       {...other}

diff --git a/packages/harmony/src/components/text-link/types.ts b/packages/harmony/src/components/text-link/types.ts
@@ -28,22 +28,15 @@ export type TextLinkProps = TextLinkTextProps &
     textVariant?: TextProps['variant']
 
     /**
-     * If true, prevent the click event from being propagated to other elements.
-     * @default true
+     * When true, always show the link underline. This can help emphasize that
+     * a text-link is present when next to other text.
      */
-    stopPropagation?: boolean
+    showUnderline?: boolean
 
     /**
      * Mark as true if the link destination is outside of the app. Causes the
      * link to open in a new tab.
      * @default false
      */
     isExternal?: boolean
-
-    // Internal props
-
-    /**
-     * @ignore: This prop is for internal use only
-     */
-    _isHovered?: boolean
   }
diff --git a/packages/harmony/src/icons/Logos.stories.mdx b/packages/harmony/src/icons/Logos.stories.mdx
@@ -11,6 +11,7 @@ import {
   IconLogoLinkByStripe,
   IconDiscord,
   IconFacebook,
+  IconMetamask,
   IconSnapChat,
   IconTelegram,
   IconTwitter,
@@ -67,6 +68,7 @@ Logos are used as a visual representation of our brand and other businesses we p
   <IconTelegram />
   <IconSnapChat />
   <IconTikTok />
+  <IconMetamask />
 </Flex>
 
 <Divider />

diff --git a/packages/harmony/src/icons/logos.ts b/packages/harmony/src/icons/logos.ts
@@ -7,6 +7,7 @@ export { default as IconLogoCoinbase } from '../assets/icons/Coinbase.svg'
 export { default as IconLogoLinkByStripe } from '../assets/icons/LinkByStripe.svg'
 export { default as IconDiscord } from '../assets/icons/Discord.svg'
 export { default as IconFacebook } from '../assets/icons/Facebook.svg'
+export { default as IconMetamask } from '../assets/icons/Metamask.svg'
 export { default as IconSnapChat } from '../assets/icons/SnapChat.svg'
 export { default as IconTelegram } from '../assets/icons/Telegram.svg'
 export { default as IconTwitter } from '../assets/icons/Twitter.svg'

diff --git a/packages/web/src/app/App.tsx b/packages/web/src/app/App.tsx
@@ -19,8 +19,7 @@ import WebPlayer from './web-player/WebPlayer'
 import '../services/webVitals'
 
 const SignOn = lazy(() => import('pages/sign-on/SignOn'))
-const SignInPage = lazy(() => import('pages/sign-in-page'))
-const SignUpPage = lazy(() => import('pages/sign-up-page'))
+const SignOnPage = lazy(() => import('pages/sign-on-page'))
 
 export const AppInner = () => {
   const { isEnabled: isSignInRedesignEnabled } = useFlag(
@@ -31,11 +30,8 @@ export const AppInner = () => {
     <>
       <SomethingWrong />
       <Switch>
-        <Route path={SIGN_IN_PAGE}>
-          {isSignInRedesignEnabled ? <SignInPage /> : <SignOn signIn />}
-        </Route>
-        <Route path={SIGN_UP_PAGE}>
-          {isSignInRedesignEnabled ? <SignUpPage /> : <SignOn signIn={false} />}
+        <Route path={[SIGN_IN_PAGE, SIGN_UP_PAGE]}>
+          {isSignInRedesignEnabled ? <SignOnPage /> : <SignOn signIn />}
         </Route>
         <Route exact path='/oauth/auth'>
           <OAuthLoginPage />

diff --git a/packages/web/src/assets/img/DJportrait.jpg b/packages/web/src/assets/img/DJportrait.jpg
diff --git a/packages/web/src/components/background-animations/BackgroundWaves.jsx b/packages/web/src/components/background-animations/BackgroundWaves.jsx
@@ -104,7 +104,7 @@ const BackgroundWaves = (props) => {
     <div
       ref={canvasRef}
       className={cn({ [props.className]: !!props.className })}
-      style={{
+      css={{
         position: 'fixed',
         top: 0,
         left: 0,

diff --git a/packages/web/src/components/preload-image/PreloadImage.tsx b/packages/web/src/components/preload-image/PreloadImage.tsx
@@ -18,7 +18,7 @@ const PreloadImage = ({
   alt?: string
   asBackground?: boolean
   preloaded?: boolean
-  className: string
+  className?: string
 }) => {
   const [isLoaded, setIsLoaded] = useState(preloaded)
   useEffect(() => {

diff --git a/packages/web/src/pages/sign-in-page/SignInPage.module.css b/packages/web/src/pages/sign-in-page/SignInPage.module.css
diff --git a/packages/web/src/pages/sign-in-page/SignInPage.tsx b/packages/web/src/pages/sign-in-page/SignInPage.tsx
@@ -1,23 +1,41 @@
 import { useCallback } from 'react'
 
-import { Box, IconCloseAlt, useTheme } from '@audius/harmony'
-import { Formik } from 'formik'
+import {
+  Flex,
+  Text,
+  IconAudiusLogoHorizontalColor,
+  Button,
+  IconArrowRight,
+  TextLink,
+  ButtonType,
+  Box
+} from '@audius/harmony'
+import { Form, Formik } from 'formik'
+import { Helmet } from 'react-helmet'
 import { useDispatch } from 'react-redux'
-import { Link, useHistory } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 
+import audiusLogoColored from 'assets/img/audiusLogoColored.png'
 import { signIn } from 'common/store/pages/signon/actions'
-import BackgroundWaves from 'components/background-animations/BackgroundWaves'
-import MobilePageContainer from 'components/mobile-page-container/MobilePageContainer'
-import Page from 'components/page/Page'
+import { HarmonyPasswordField } from 'components/form-fields/HarmonyPasswordField'
+import { HarmonyTextField } from 'components/form-fields/HarmonyTextField'
+import PreloadImage from 'components/preload-image/PreloadImage'
 import { useMedia } from 'hooks/useMedia'
-import { BASE_URL, SIGN_IN_PAGE, TRENDING_PAGE } from 'utils/route'
+import { SIGN_UP_PAGE } from 'utils/route'
 
-import { SignInPageDesktop } from './SignInPageDesktop'
-import { SignInPageMobile } from './SignInPageMobile'
+import { SignInWithMetaMaskButton } from './SignInWithMetaMaskButton'
 
 const messages = {
-  title: 'Sign In',
-  description: 'Sign into your Audius account'
+  metaTitle: 'Sign In • Audius',
+  metaDescription: 'Sign into your Audius account',
+
+  title: 'Sign Into Audius',
+  emailLabel: 'Email',
+  passwordLabel: 'Password',
+  signIn: 'Sign In',
+  newToAudius: 'New to Audius?',
+  createAccount: 'Create an Account',
+  forgotPassword: 'Forgot password?'
 }
 
 type SignInValues = {
@@ -32,7 +50,7 @@ const initialValues = {
 
 export const SignInPage = () => {
   const dispatch = useDispatch()
-  const history = useHistory()
+  const { isMobile } = useMedia()
 
   const handleSubmit = useCallback(
     (values: SignInValues) => {
@@ -42,41 +60,76 @@ export const SignInPage = () => {
     [dispatch]
   )
 
-  const { isMobile } = useMedia()
-  const { spacing } = useTheme()
-
-  const pageProps = {
-    title: messages.title,
-    description: messages.description,
-    canonicalUrl: `${BASE_URL}/${SIGN_IN_PAGE}`
-  }
-
   return (
-    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
-      {isMobile ? (
-        <MobilePageContainer {...pageProps} fullHeight>
-          <SignInPageMobile />
-        </MobilePageContainer>
-      ) : (
-        <Page>
-          <BackgroundWaves />
-          <Link to={TRENDING_PAGE}>
-            <IconCloseAlt
-              color='staticWhite'
-              css={{
-                position: 'absolute',
-                left: spacing['2xl'],
-                top: spacing['2xl'],
-                zIndex: 1
-              }}
-              onClick={history.goBack}
-            />
-          </Link>
-          <Box css={{ zIndex: 1 }}>
-            <SignInPageDesktop />
-          </Box>
-        </Page>
-      )}
-    </Formik>
+    <>
+      <Helmet>
+        <title>{messages.metaTitle}</title>
+        <meta name='description' content={messages.metaDescription} />
+      </Helmet>
+      <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+        <Flex
+          flex={1}
+          direction='column'
+          justifyContent='space-between'
+          h='100%'
+          p='2xl'
+          pb={!isMobile ? 'unit14' : undefined}
+        >
+          <Flex as={Form} direction='column' gap='2xl'>
+            <Box alignSelf='center'>
+              {isMobile ? (
+                <IconAudiusLogoHorizontalColor />
+              ) : (
+                <PreloadImage
+                  src={audiusLogoColored}
+                  alt='Audius Logo'
+                  css={{
+                    maxHeight: '160px',
+                    maxWidth: '160px',
+                    height: '100%',
+                    width: '100%',
+                    objectFit: 'contain'
+                  }}
+                />
+              )}
+            </Box>
+            <Text
+              variant='heading'
+              size='l'
+              tag='h1'
+              color='accent'
+              css={{ textAlign: isMobile ? 'center' : undefined }}
+            >
+              {messages.title}
+            </Text>
+            <Flex direction='column' gap='l'>
+              <HarmonyTextField name='email' label={messages.emailLabel} />
+              <HarmonyPasswordField
+                name='password'
+                label={messages.passwordLabel}
+              />
+            </Flex>
+            <Flex direction='column' gap='l' w='100%'>
+              <Button iconRight={IconArrowRight} type='submit'>
+                {messages.signIn}
+              </Button>
+              {!isMobile ? <SignInWithMetaMaskButton /> : null}
+              <TextLink
+                variant='visible'
+                textVariant='body'
+                css={{ textAlign: isMobile ? 'center' : undefined }}
+              >
+                {messages.forgotPassword}
+              </TextLink>
+            </Flex>
+          </Flex>
+          {!isMobile ? (
+            <Button variant={ButtonType.SECONDARY} asChild>
+              <Link to={SIGN_UP_PAGE}>{messages.createAccount}</Link>
+            </Button>
+          ) : null}
+        </Flex>
+      </Formik>
+    </>
   )
 }