Fix long url and show password (#4738)

Co-authored-by: Omar López <zomars@me.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

apps/web/pages/auth/setup.tsx

@@ -1,5 +1,6 @@
 import { CheckIcon } from "@heroicons/react/solid";
 import { zodResolver } from "@hookform/resolvers/zod";
+import classNames from "classnames";
 import { useRouter } from "next/router";
 import { useState } from "react";
 import { Controller, FormProvider, useForm } from "react-hook-form";
@@ -9,7 +10,7 @@ import { isPasswordValid } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import prisma from "@calcom/prisma";
 import { inferSSRProps } from "@calcom/types/inferSSRProps";
-import { TextField, EmailField, PasswordField } from "@calcom/ui/v2";
+import { TextField, EmailField, PasswordField, Label } from "@calcom/ui/v2";
 import WizardForm from "@calcom/ui/v2/core/WizardForm";
 
 const StepDone = () => {
@@ -85,6 +86,8 @@ const SetupFormStep1 = (props: { setIsLoading: (val: boolean) => void }) => {
     }
   }, onError);
 
+  const longWebsiteUrl = process.env.NEXT_PUBLIC_WEBSITE_URL.length > 30;
+
   return (
     <FormProvider {...formMethods}>
       <form id="setup-step-1" name="setup-step-1" className="space-y-4" onSubmit={onSubmit}>
@@ -93,22 +96,36 @@ const SetupFormStep1 = (props: { setIsLoading: (val: boolean) => void }) => {
             name="username"
             control={formMethods.control}
             render={({ field: { onBlur, onChange, value } }) => (
-              <TextField
-                addOnLeading={
-                  <span className="items-centerpx-3 inline-flex rounded-none text-sm text-gray-500">
-                    {process.env.NEXT_PUBLIC_WEBSITE_URL}/
-                  </span>
-                }
-                value={value || ""}
-                className="my-0"
-                onBlur={onBlur}
-                name="username"
-                onChange={async (e) => {
-                  onChange(e.target.value);
-                  formMethods.setValue("username", e.target.value);
-                  await formMethods.trigger("username");
-                }}
-              />
+              <>
+                <Label htmlFor="username" className={classNames(longWebsiteUrl && "mb-0")}>
+                  <span className="block">{t("username")}</span>
+                  {longWebsiteUrl && (
+                    <small className="items-centerpx-3 mt-2 inline-flex rounded-t-md border border-b-0 border-gray-300 bg-gray-100 py-1 px-3 text-gray-500">
+                      {process.env.NEXT_PUBLIC_WEBSITE_URL}
+                    </small>
+                  )}
+                </Label>
+                <TextField
+                  addOnLeading={
+                    !longWebsiteUrl && (
+                      <span className="items-centerpx-3 inline-flex rounded-none text-sm text-gray-500">
+                        {process.env.NEXT_PUBLIC_WEBSITE_URL}/
+                      </span>
+                    )
+                  }
+                  id="username"
+                  labelSrOnly={true}
+                  value={value || ""}
+                  className={classNames("my-0", longWebsiteUrl && "rounded-t-none")}
+                  onBlur={onBlur}
+                  name="username"
+                  onChange={async (e) => {
+                    onChange(e.target.value);
+                    formMethods.setValue("username", e.target.value);
+                    await formMethods.trigger("username");
+                  }}
+                />
+              </>
             )}
           />
         </div>

packages/ui/v2/core/form/fields.tsx

@@ -268,7 +268,7 @@ export const PasswordField = forwardRef<HTMLInputElement, InputFieldProps>(funct
     <div className="relative">
       <InputField
         type={isPasswordVisible ? "text" : "password"}
-        placeholder="•••••••••••••"
+        placeholder={isPasswordVisible ? "0hMy4P4ssw0rd" : "•••••••••••••"}
         ref={ref}
         {...props}
         className={classNames("mb-0 pr-10", props.className)}
@@ -276,7 +276,10 @@ export const PasswordField = forwardRef<HTMLInputElement, InputFieldProps>(funct
 
       <Tooltip content={textLabel}>
         <button
-          className="absolute bottom-0 right-3 h-9 text-gray-900"
+          className={classNames(
+            "absolute right-3 h-9 text-gray-900",
+            props.hintErrors ? "top-[22px]" : "bottom-0"
+          )}
           type="button"
           onClick={() => toggleIsPasswordVisible()}>
           {isPasswordVisible ? (