ДИЗАЙН - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: Tasker workspace onboarding

plane-src/apps/web/core/components/workspace/create-workspace-form.tsx

@@ -36,6 +36,7 @@ type Props = {
     loading: string;
     default: string;
   };
+  variant?: "default" | "nodedc-auth";
 };
 
 const workspaceService = new WorkspaceService();
@@ -51,7 +52,25 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
       loading: "workspace_creation.button.loading",
       default: "workspace_creation.button.default",
     },
+    variant = "default",
   } = props;
+  const isNodeDCAuth = variant === "nodedc-auth";
+  const formClassName = isNodeDCAuth ? "space-y-7" : "space-y-6 sm:space-y-9";
+  const fieldsClassName = isNodeDCAuth ? "space-y-5" : "space-y-6 sm:space-y-7";
+  const fieldClassName = isNodeDCAuth ? "flex flex-col gap-2 text-12 text-secondary" : "flex flex-col gap-2 text-13";
+  const inputShellClassName = isNodeDCAuth ? "nodedc-auth-input-shell flex w-full items-center px-4" : "flex flex-col gap-1";
+  const inputClassName = isNodeDCAuth ? "nodedc-auth-input h-12 w-full px-0 py-0 text-14" : "w-full";
+  const urlShellClassName = isNodeDCAuth
+    ? "nodedc-auth-input-shell flex w-full items-center px-4"
+    : "flex w-full items-center rounded-md border border-subtle bg-layer-2 px-3";
+  const urlInputClassName = isNodeDCAuth
+    ? "nodedc-auth-input block h-12 w-full border-none bg-transparent !px-0 py-0 text-14"
+    : "block w-full rounded-md border-none bg-transparent !px-0 py-2 text-12";
+  const dropdownClassName = isNodeDCAuth
+    ? "nodedc-auth-input-shell flex min-h-12 items-center px-4 text-14 shadow-none"
+    : "rounded-md border border-subtle bg-layer-2 px-3 py-2 text-13 shadow-none";
+  const errorClassName = isNodeDCAuth ? "text-12 text-[rgb(var(--nodedc-accent-rgb))]" : "text-13 text-danger-primary";
+  const requiredMark = isNodeDCAuth ? null : <span className="ml-0.5 text-danger-primary">*</span>;
   // states
   const [slugError, setSlugError] = useState(false);
   const [invalidSlug, setInvalidSlug] = useState(false);
@@ -111,18 +130,18 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
 
   return (
     <form
-      className="space-y-6 sm:space-y-9"
+      className={formClassName}
       onSubmit={(e) => {
         void handleSubmit(handleCreateWorkspace)(e);
       }}
     >
-      <div className="space-y-6 sm:space-y-7">
-        <div className="flex flex-col gap-2 text-13">
+      <div className={fieldsClassName}>
+        <div className={fieldClassName}>
           <label htmlFor="workspaceName">
             {t("workspace_creation.form.name.label")}
-            <span className="ml-0.5 text-danger-primary">*</span>
+            {requiredMark}
           </label>
-          <div className="flex flex-col gap-1">
+          <div className={inputShellClassName} data-error={Boolean(errors.name)}>
             <Controller
               control={control}
               name="name"
@@ -149,20 +168,20 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
                   ref={ref}
                   hasError={Boolean(errors.name)}
                   placeholder={t("workspace_creation.form.name.placeholder")}
-                  className="w-full"
+                  className={inputClassName}
                 />
               )}
             />
-            <span className="text-11 text-danger-primary">{errors?.name?.message}</span>
           </div>
+          <span className={errorClassName}>{errors?.name?.message}</span>
         </div>
-        <div className="flex flex-col gap-2 text-13">
+        <div className={fieldClassName}>
           <label htmlFor="workspaceUrl">
             {t("workspace_creation.form.url.label")}
-            <span className="ml-0.5 text-danger-primary">*</span>
+            {requiredMark}
           </label>
-          <div className="flex w-full items-center rounded-md border border-subtle bg-layer-2 px-3">
-            <span className="text-12 whitespace-nowrap text-secondary">{window && window.location.host}/</span>
+          <div className={urlShellClassName} data-error={Boolean(errors.slug) || slugError || invalidSlug}>
+            <span className="mr-1 text-12 whitespace-nowrap text-secondary">{window && window.location.host}/</span>
             <Controller
               control={control}
               name="slug"
@@ -187,25 +206,25 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
                   ref={ref}
                   hasError={Boolean(errors.slug)}
                   placeholder={t("workspace_creation.form.url.placeholder")}
-                  className="block w-full rounded-md border-none bg-transparent !px-0 py-2 text-12"
+                  className={urlInputClassName}
                 />
               )}
             />
           </div>
           {slugError && (
-            <p className="-mt-3 text-13 text-danger-primary">
+            <p className={errorClassName}>
               {t("workspace_creation.errors.validation.url_already_taken")}
             </p>
           )}
           {invalidSlug && (
-            <p className="text-13 text-danger-primary">{t("workspace_creation.errors.validation.url_alphanumeric")}</p>
+            <p className={errorClassName}>{t("workspace_creation.errors.validation.url_alphanumeric")}</p>
           )}
-          {errors.slug && <span className="text-11 text-danger-primary">{errors.slug.message}</span>}
+          {errors.slug && <span className={errorClassName}>{errors.slug.message}</span>}
         </div>
-        <div className="flex flex-col gap-2 text-13">
+        <div className={fieldClassName}>
           <span>
             {t("workspace_creation.form.organization_size.label")}
-            <span className="ml-0.5 text-danger-primary">*</span>
+            {requiredMark}
           </span>
           <div className="w-full">
             <Controller
@@ -227,23 +246,36 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
                       </span>
                     )
                   }
-                  menuButtonWrapperClassName="rounded-md border border-subtle bg-layer-2 px-3 py-2 text-13 shadow-none"
+                  menuButtonWrapperClassName={dropdownClassName}
                 />
               )}
             />
             {errors.organization_size && (
-              <span className="text-13 text-danger-primary">{errors.organization_size.message}</span>
+              <span className={errorClassName}>{errors.organization_size.message}</span>
             )}
           </div>
         </div>
       </div>
-      <div className="flex items-center gap-4">
+      <div className={isNodeDCAuth ? "flex flex-col gap-3" : "flex items-center gap-4"}>
         {secondaryButton}
-        <Button variant="primary" type="submit" size="xl" disabled={!isValid} loading={isSubmitting}>
+        <Button
+          variant="primary"
+          type="submit"
+          size="xl"
+          disabled={!isValid}
+          loading={isSubmitting}
+          className={isNodeDCAuth ? "nodedc-auth-primary-button" : undefined}
+        >
           {isSubmitting ? t(primaryButtonText.loading) : t(primaryButtonText.default)}
         </Button>
         {!secondaryButton && (
-          <Button variant="secondary" type="button" size="xl" onClick={() => router.back()}>
+          <Button
+            variant="secondary"
+            type="button"
+            size="xl"
+            onClick={() => router.back()}
+            className={isNodeDCAuth ? "nodedc-auth-secondary-button" : undefined}
+          >
             {t("common.go_back")}
           </Button>
         )}