feat(admin-ui): Implements redesign of public pages (#3504)

* redesign public pages

* rm build files

* fix size of button

packages/admin-ui/ui/src/components/organisms/login-card/index.tsx

@@ -1,7 +1,7 @@
 import { useAdminLogin } from "medusa-react"
-import React, { useState } from "react"
 import { useForm } from "react-hook-form"
 import { useNavigate } from "react-router-dom"
+import InputError from "../../atoms/input-error"
 import Button from "../../fundamentals/button"
 import SigninInput from "../../molecules/input-signin"
 
@@ -14,57 +14,63 @@ type LoginCardProps = {
   toResetPassword: () => void
 }
 
-const LoginCard: React.FC<LoginCardProps> = ({ toResetPassword }) => {
-  const [isInvalidLogin, setIsInvalidLogin] = useState(false)
-  const { register, handleSubmit, reset } = useForm<FormValues>()
+const LoginCard = ({ toResetPassword }: LoginCardProps) => {
+  const {
+    register,
+    handleSubmit,
+    setError,
+    formState: { errors },
+  } = useForm<FormValues>()
   const navigate = useNavigate()
-  const login = useAdminLogin()
+  const { mutate, isLoading } = useAdminLogin()
 
   const onSubmit = (values: FormValues) => {
-    login.mutate(values, {
+    mutate(values, {
       onSuccess: () => {
         navigate("/a/orders")
       },
       onError: () => {
-        setIsInvalidLogin(true)
-        reset()
+        setError(
+          "password",
+          {
+            type: "manual",
+            message: "These credentials do not match our records.",
+          },
+          {
+            shouldFocus: true,
+          }
+        )
       },
     })
   }
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="flex flex-col items-center">
-        <span className="inter-2xlarge-semibold text-grey-90 mt-4">
-          Welcome back!
-        </span>
-        <span className="inter-base-regular text-grey-50 mt-2">
-          It's great to see you 👋🏼
-        </span>
-        <span className="inter-base-regular text-grey-50 mb-xlarge">
-          Log in to your account below
-        </span>
-        <SigninInput
-          placeholder="Email..."
-          {...register("email", { required: true })}
-          autoComplete="email"
-        />
-        <SigninInput
-          placeholder="Password..."
-          type={"password"}
-          {...register("password", { required: true })}
-          autoComplete="current-password"
-        />
-        {isInvalidLogin && (
-          <span className="inter-small-regular mt-2 w-full text-rose-50">
-            These credentials do not match our records
-          </span>
-        )}
+        <h1 className="inter-xlarge-semibold text-grey-90 mb-large text-[20px]">
+          Log in to Medusa
+        </h1>
+        <div>
+          <SigninInput
+            placeholder="Email"
+            {...register("email", { required: true })}
+            autoComplete="email"
+            className="mb-small"
+          />
+          <SigninInput
+            placeholder="Password"
+            type={"password"}
+            {...register("password", { required: true })}
+            autoComplete="current-password"
+            className="mb-xsmall"
+          />
+          <InputError errors={errors} name="password" />
+        </div>
         <Button
-          className="rounded-rounded inter-base-regular mt-4 w-[320px]"
-          variant="primary"
-          size="large"
+          className="rounded-rounded inter-base-regular mt-4 w-[280px]"
+          variant="secondary"
+          size="medium"
           type="submit"
-          loading={login.isLoading}
+          loading={isLoading}
         >
           Continue
         </Button>
@@ -72,7 +78,7 @@ const LoginCard: React.FC<LoginCardProps> = ({ toResetPassword }) => {
           className="inter-small-regular text-grey-50 mt-8 cursor-pointer"
           onClick={toResetPassword}
         >
-          Reset password
+          Forgot your password?
         </span>
       </div>
     </form>

packages/admin-ui/ui/src/components/organisms/reset-token-card/index.tsx

@@ -1,7 +1,12 @@
 import { useAdminSendResetPasswordToken } from "medusa-react"
 import React, { useState } from "react"
 import { useForm } from "react-hook-form"
-import CheckCircleIcon from "../../fundamentals/icons/check-circle-icon"
+import useNotification from "../../../hooks/use-notification"
+import { getErrorMessage } from "../../../utils/error-messages"
+import FormValidator from "../../../utils/form-validator"
+import InputError from "../../atoms/input-error"
+import Button from "../../fundamentals/button"
+import CheckCircleFillIcon from "../../fundamentals/icons/check-circle-fill-icon"
 import SigninInput from "../../molecules/input-signin"
 
 type ResetTokenCardProps = {
@@ -12,26 +17,23 @@ type FormValues = {
   email: string
 }
 
-const checkMail = /^\S+@\S+$/i
+const emailRegex = new RegExp(
+  "^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$"
+)
 
 const ResetTokenCard: React.FC<ResetTokenCardProps> = ({ goBack }) => {
-  const [unrecognizedEmail, setUnrecognizedEmail] = useState(false)
-  const [invalidEmail, setInvalidEmail] = useState(false)
   const [mailSent, setSentMail] = useState(false)
-  const { register, handleSubmit } = useForm<FormValues>()
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<FormValues>()
 
-  const sendEmail = useAdminSendResetPasswordToken()
+  const { mutate, isLoading } = useAdminSendResetPasswordToken()
+  const notification = useNotification()
 
-  const onSubmit = (values: FormValues) => {
-    if (!checkMail.test(values.email)) {
-      setInvalidEmail(true)
-      return
-    }
-
-    setInvalidEmail(false)
-    setUnrecognizedEmail(false)
-
-    sendEmail.mutate(
+  const onSubmit = handleSubmit((values: FormValues) => {
+    mutate(
       {
         email: values.email,
       },
@@ -39,66 +41,60 @@ const ResetTokenCard: React.FC<ResetTokenCardProps> = ({ goBack }) => {
         onSuccess: () => {
           setSentMail(true)
         },
-        onError: () => {
-          setUnrecognizedEmail(true)
+        onError: (error) => {
+          notification("Error", getErrorMessage(error), "error")
         },
       }
     )
-  }
+  })
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)}>
+    <form onSubmit={onSubmit}>
       <div className="flex flex-col items-center">
-        <span className="inter-2xlarge-semibold mt-base text-grey-90">
+        <h1 className="inter-xlarge-semibold text-grey-90 mb-xsmall text-[20px]">
           Reset your password
-        </span>
-        <span className="inter-base-regular text-grey-50 mt-xsmall text-center">
-          Enter your email address below, and we'll send you
+        </h1>
+        <span className="inter-base-regular text-grey-50 mb-large text-center">
+          Enter your email address below, and we&apos;ll
           <br />
-          instructions on how to reset your password.
+          send you instructions on how to reset
+          <br />
+          your password.
         </span>
         {!mailSent ? (
           <>
-            <SigninInput
-              placeholder="lebron@james.com..."
-              {...register("email", { required: true })}
-              className="mt-xlarge mb-0"
-            />
-            {unrecognizedEmail && (
-              <div className="mt-xsmall w-[318px]">
-                <span className="inter-small-regular text-left text-rose-50">
-                  We can't find a user with that email address
-                </span>
-              </div>
-            )}
-            {invalidEmail && (
-              <div className="mt-xsmall w-[318px]">
-                <span className="inter-small-regular text-left text-rose-50">
-                  Not a valid email address
-                </span>
-              </div>
-            )}
-            <button
-              className="text-grey-0 rounded-rounded inter-base-regular mt-4 h-[48px] w-[320px] border bg-violet-50 py-3 px-4"
+            <div className="w-[280px]">
+              <SigninInput
+                placeholder="Email"
+                {...register("email", {
+                  required: FormValidator.required("Email"),
+                  pattern: {
+                    value: emailRegex,
+                    message: "This is not a valid email",
+                  },
+                })}
+              />
+              <InputError errors={errors} name="email" />
+            </div>
+            <Button
+              variant="secondary"
+              size="medium"
+              className="mt-large w-[280px]"
               type="submit"
+              loading={isLoading}
             >
               Send reset instructions
-            </button>
+            </Button>
           </>
         ) : (
-          <div className="text-violet-60 rounded-rounded bg-violet-10 p-base gap-x-small mt-large flex">
+          <div className="text-grey-60 rounded-rounded bg-grey-5 border-grey-20 p-base gap-x-small flex w-[280px] items-center border">
             <div>
-              <CheckCircleIcon size={20} />
+              <CheckCircleFillIcon className="text-blue-50" size={20} />
             </div>
             <div className="gap-y-2xsmall flex flex-col">
-              <span className="inter-small-semibold">
+              <span className="inter-base-regular">
                 Succesfully sent you an email
               </span>
-              <span className="inter-small-regular">
-                We've sent you an email which you can use to reset your
-                password. Check your spam folder if you haven't received it
-                after a few minutes.
-              </span>
             </div>
           </div>
         )}