fix(login): prettier setup (#11798)

# Which Problems Are Solved
Invalid formatting in the login codebase due to invalid prettier
configuration

# How the Problems Are Solved
Fxed .prettierignore wildcards for login source files

# Additional Changes
Removed .prettierrc file because there is already a prettier.config.mjs
file

# Additional Context

apps/login/src/components/idps/base-button.tsx

@@ -1,10 +1,10 @@
 "use client";
 
+import { APPEARANCE_STYLES, getComponentRoundness, getThemeConfig } from "@/lib/theme";
 import { clsx } from "clsx";
 import { Loader2Icon } from "lucide-react";
 import { ButtonHTMLAttributes, DetailedHTMLProps, forwardRef } from "react";
 import { useFormStatus } from "react-dom";
-import { getComponentRoundness, getThemeConfig, APPEARANCE_STYLES } from "@/lib/theme";
 
 export type SignInWithIdentityProviderProps = DetailedHTMLProps<
   ButtonHTMLAttributes<HTMLButtonElement>,

apps/login/src/components/idps/sign-in-with-apple.tsx

@@ -4,33 +4,26 @@ import { forwardRef } from "react";
 import { Translated } from "../translated";
 import { BaseButton, SignInWithIdentityProviderProps } from "./base-button";
 
-export const SignInWithApple = forwardRef<
-  HTMLButtonElement,
-  SignInWithIdentityProviderProps
->(function SignInWithApple(props, ref) {
-  const { children, name, ...restProps } = props;
+export const SignInWithApple = forwardRef<HTMLButtonElement, SignInWithIdentityProviderProps>(
+  function SignInWithApple(props, ref) {
+    const { children, name, ...restProps } = props;
 
-  return (
-    <BaseButton {...restProps} ref={ref}>
-      <div className="flex h-12 w-12 items-center justify-center">
-        <div className="h-6 w-6">
-          <svg viewBox="0 0 170 170" fill="currentColor">
-            <title>Apple Logo</title>
-            <path d="M150.37 130.25c-2.45 5.66-5.35 10.87-8.71 15.66-4.58 6.53-8.33 11.05-11.22 13.56-4.48 4.12-9.28 6.23-14.42 6.35-3.69 0-8.14-1.05-13.32-3.18-5.197-2.12-9.973-3.17-14.34-3.17-4.58 0-9.492 1.05-14.746 3.17-5.262 2.13-9.501 3.24-12.742 3.35-4.929.21-9.842-1.96-14.746-6.52-3.13-2.73-7.045-7.41-11.735-14.04-5.032-7.08-9.169-15.29-12.41-24.65-3.471-10.11-5.211-19.9-5.211-29.378 0-10.857 2.346-20.221 7.045-28.068 3.693-6.303 8.606-11.275 14.755-14.925s12.793-5.51 19.948-5.629c3.915 0 9.049 1.211 15.429 3.591 6.362 2.388 10.447 3.599 12.238 3.599 1.339 0 5.877-1.416 13.57-4.239 7.275-2.618 13.415-3.702 18.445-3.275 13.63 1.1 23.87 6.473 30.68 16.153-12.19 7.386-18.22 17.731-18.1 31.002.11 10.337 3.86 18.939 11.23 25.769 3.34 3.17 7.07 5.62 11.22 7.36-.9 2.61-1.85 5.11-2.86 7.51zM119.11 7.24c0 8.102-2.96 15.667-8.86 22.669-7.12 8.324-15.732 13.134-25.071 12.375a25.222 25.222 0 0 1-.188-3.07c0-7.778 3.386-16.102 9.399-22.908 3.002-3.446 6.82-6.311 11.45-8.597 4.62-2.252 8.99-3.497 13.1-3.71.12 1.083.17 2.166.17 3.24z" />
-          </svg>
+    return (
+      <BaseButton {...restProps} ref={ref}>
+        <div className="flex h-12 w-12 items-center justify-center">
+          <div className="h-6 w-6">
+            <svg viewBox="0 0 170 170" fill="currentColor">
+              <title>Apple Logo</title>
+              <path d="M150.37 130.25c-2.45 5.66-5.35 10.87-8.71 15.66-4.58 6.53-8.33 11.05-11.22 13.56-4.48 4.12-9.28 6.23-14.42 6.35-3.69 0-8.14-1.05-13.32-3.18-5.197-2.12-9.973-3.17-14.34-3.17-4.58 0-9.492 1.05-14.746 3.17-5.262 2.13-9.501 3.24-12.742 3.35-4.929.21-9.842-1.96-14.746-6.52-3.13-2.73-7.045-7.41-11.735-14.04-5.032-7.08-9.169-15.29-12.41-24.65-3.471-10.11-5.211-19.9-5.211-29.378 0-10.857 2.346-20.221 7.045-28.068 3.693-6.303 8.606-11.275 14.755-14.925s12.793-5.51 19.948-5.629c3.915 0 9.049 1.211 15.429 3.591 6.362 2.388 10.447 3.599 12.238 3.599 1.339 0 5.877-1.416 13.57-4.239 7.275-2.618 13.415-3.702 18.445-3.275 13.63 1.1 23.87 6.473 30.68 16.153-12.19 7.386-18.22 17.731-18.1 31.002.11 10.337 3.86 18.939 11.23 25.769 3.34 3.17 7.07 5.62 11.22 7.36-.9 2.61-1.85 5.11-2.86 7.51zM119.11 7.24c0 8.102-2.96 15.667-8.86 22.669-7.12 8.324-15.732 13.134-25.071 12.375a25.222 25.222 0 0 1-.188-3.07c0-7.778 3.386-16.102 9.399-22.908 3.002-3.446 6.82-6.311 11.45-8.597 4.62-2.252 8.99-3.497 13.1-3.71.12 1.083.17 2.166.17 3.24z" />
+            </svg>
+          </div>
         </div>
-      </div>
-      {children ? (
-        children
-      ) : (
-        <span className="ml-4">
-          {name ? (
-            name
-          ) : (
-            <Translated i18nKey="signInWithApple" namespace="idp" />
-          )}
-        </span>
-      )}
-    </BaseButton>
-  );
-});
+        {children ? (
+          children
+        ) : (
+          <span className="ml-4">{name ? name : <Translated i18nKey="signInWithApple" namespace="idp" />}</span>
+        )}
+      </BaseButton>
+    );
+  },
+);

apps/login/src/components/idps/sign-in-with-azure-ad.tsx

@@ -4,39 +4,26 @@ import { forwardRef } from "react";
 import { Translated } from "../translated";
 import { BaseButton, SignInWithIdentityProviderProps } from "./base-button";
 
-export const SignInWithAzureAd = forwardRef<
-  HTMLButtonElement,
-  SignInWithIdentityProviderProps
->(function SignInWithAzureAd(props, ref) {
-  const { children, name, ...restProps } = props;
+export const SignInWithAzureAd = forwardRef<HTMLButtonElement, SignInWithIdentityProviderProps>(
+  function SignInWithAzureAd(props, ref) {
+    const { children, name, ...restProps } = props;
 
-  return (
-    <BaseButton {...restProps} ref={ref}>
-      <div className="flex h-12 w-12 items-center justify-center p-[10px]">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="21"
-          height="21"
-          viewBox="0 0 21 21"
-          className="h-full w-full"
-        >
-          <path fill="#f25022" d="M1 1H10V10H1z"></path>
-          <path fill="#00a4ef" d="M1 11H10V20H1z"></path>
-          <path fill="#7fba00" d="M11 1H20V10H11z"></path>
-          <path fill="#ffb900" d="M11 11H20V20H11z"></path>
-        </svg>
-      </div>
-      {children ? (
-        children
-      ) : (
-        <span className="ml-4">
-          {name ? (
-            name
-          ) : (
-            <Translated i18nKey="signInWithAzureAD" namespace="idp" />
-          )}
-        </span>
-      )}
-    </BaseButton>
-  );
-});
+    return (
+      <BaseButton {...restProps} ref={ref}>
+        <div className="flex h-12 w-12 items-center justify-center p-[10px]">
+          <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21" className="h-full w-full">
+            <path fill="#f25022" d="M1 1H10V10H1z"></path>
+            <path fill="#00a4ef" d="M1 11H10V20H1z"></path>
+            <path fill="#7fba00" d="M11 1H20V10H11z"></path>
+            <path fill="#ffb900" d="M11 11H20V20H11z"></path>
+          </svg>
+        </div>
+        {children ? (
+          children
+        ) : (
+          <span className="ml-4">{name ? name : <Translated i18nKey="signInWithAzureAD" namespace="idp" />}</span>
+        )}
+      </BaseButton>
+    );
+  },
+);

apps/login/src/components/idps/sign-in-with-generic.tsx

@@ -3,19 +3,13 @@
 import { forwardRef } from "react";
 import { BaseButton, SignInWithIdentityProviderProps } from "./base-button";
 
-export const SignInWithGeneric = forwardRef<
-  HTMLButtonElement,
-  SignInWithIdentityProviderProps
->(function SignInWithGeneric(props, ref) {
-  const {
-    children,
-    name = "",
-    className = "h-[50px] pl-20",
-    ...restProps
-  } = props;
-  return (
-    <BaseButton {...restProps} ref={ref} className={className}>
-      {children ? children : <span>{name}</span>}
-    </BaseButton>
-  );
-});
+export const SignInWithGeneric = forwardRef<HTMLButtonElement, SignInWithIdentityProviderProps>(
+  function SignInWithGeneric(props, ref) {
+    const { children, name = "", className = "h-[50px] pl-20", ...restProps } = props;
+    return (
+      <BaseButton {...restProps} ref={ref} className={className}>
+        {children ? children : <span>{name}</span>}
+      </BaseButton>
+    );
+  },
+);

apps/login/src/components/idps/sign-in-with-github.tsx

@@ -7,12 +7,7 @@ import { BaseButton, SignInWithIdentityProviderProps } from "./base-button";
 function GitHubLogo() {
   return (
     <>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 1024 1024"
-        className="hidden h-8 w-8 dark:block"
-      >
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1024 1024" className="hidden h-8 w-8 dark:block">
         <path
           fill="#fafafa"
           fillRule="evenodd"
@@ -20,12 +15,7 @@ function GitHubLogo() {
           clipRule="evenodd"
         ></path>
       </svg>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 1024 1024"
-        className="block h-8 w-8 dark:hidden"
-      >
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1024 1024" className="block h-8 w-8 dark:hidden">
         <path
           fill="#1B1F23"
           fillRule="evenodd"
@@ -37,28 +27,21 @@ function GitHubLogo() {
   );
 }
 
-export const SignInWithGithub = forwardRef<
-  HTMLButtonElement,
-  SignInWithIdentityProviderProps
->(function SignInWithGithub(props, ref) {
-  const { children, name, ...restProps } = props;
+export const SignInWithGithub = forwardRef<HTMLButtonElement, SignInWithIdentityProviderProps>(
+  function SignInWithGithub(props, ref) {
+    const { children, name, ...restProps } = props;
 
-  return (
-    <BaseButton {...restProps} ref={ref}>
-      <div className="mx-2 my-2 flex items-center justify-center">
-        <GitHubLogo />
-      </div>
-      {children ? (
-        children
-      ) : (
-        <span className="ml-4">
-          {name ? (
-            name
-          ) : (
-            <Translated i18nKey="signInWithGithub" namespace="idp" />
-          )}
-        </span>
-      )}
-    </BaseButton>
-  );
-});
+    return (
+      <BaseButton {...restProps} ref={ref}>
+        <div className="mx-2 my-2 flex items-center justify-center">
+          <GitHubLogo />
+        </div>
+        {children ? (
+          children
+        ) : (
+          <span className="ml-4">{name ? name : <Translated i18nKey="signInWithGithub" namespace="idp" />}</span>
+        )}
+      </BaseButton>
+    );
+  },
+);

apps/login/src/components/idps/sign-in-with-gitlab.tsx

@@ -4,50 +4,38 @@ import { forwardRef } from "react";
 import { Translated } from "../translated";
 import { BaseButton, SignInWithIdentityProviderProps } from "./base-button";
 
-export const SignInWithGitlab = forwardRef<
-  HTMLButtonElement,
-  SignInWithIdentityProviderProps
->(function SignInWithGitlab(props, ref) {
-  const { children, name, ...restProps } = props;
+export const SignInWithGitlab = forwardRef<HTMLButtonElement, SignInWithIdentityProviderProps>(
+  function SignInWithGitlab(props, ref) {
+    const { children, name, ...restProps } = props;
 
-  return (
-    <BaseButton {...restProps} ref={ref}>
-      <div className="flex h-12 w-12 items-center justify-center">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width={25}
-          height={24}
-          fill="none"
-        >
-          <path
-            fill="#e24329"
-            d="m24.507 9.5-.034-.09L21.082.562a.896.896 0 0 0-1.694.091l-2.29 7.01H7.825L5.535.653a.898.898 0 0 0-1.694-.09L.451 9.411.416 9.5a6.297 6.297 0 0 0 2.09 7.278l.012.01.03.022 5.16 3.867 2.56 1.935 1.554 1.176a1.051 1.051 0 0 0 1.268 0l1.555-1.176 2.56-1.935 5.197-3.89.014-.01A6.297 6.297 0 0 0 24.507 9.5z"
-          />
-          <path
-            fill="#fc6d26"
-            d="m24.507 9.5-.034-.09a11.44 11.44 0 0 0-4.56 2.051l-7.447 5.632 4.742 3.584 5.197-3.89.014-.01A6.297 6.297 0 0 0 24.507 9.5z"
-          />
-          <path
-            fill="#fca326"
-            d="m7.707 20.677 2.56 1.935 1.555 1.176a1.051 1.051 0 0 0 1.268 0l1.555-1.176 2.56-1.935-4.743-3.584-4.755 3.584z"
-          />
-          <path
-            fill="#fc6d26"
-            d="M5.01 11.461a11.43 11.43 0 0 0-4.56-2.05L.416 9.5a6.297 6.297 0 0 0 2.09 7.278l.012.01.03.022 5.16 3.867 4.745-3.584-7.444-5.632z"
-          />
-        </svg>
-      </div>
-      {children ? (
-        children
-      ) : (
-        <span className="ml-4">
-          {name ? (
-            name
-          ) : (
-            <Translated i18nKey="signInWithGitlab" namespace="idp" />
-          )}
-        </span>
-      )}
-    </BaseButton>
-  );
-});
+    return (
+      <BaseButton {...restProps} ref={ref}>
+        <div className="flex h-12 w-12 items-center justify-center">
+          <svg xmlns="http://www.w3.org/2000/svg" width={25} height={24} fill="none">
+            <path
+              fill="#e24329"
+              d="m24.507 9.5-.034-.09L21.082.562a.896.896 0 0 0-1.694.091l-2.29 7.01H7.825L5.535.653a.898.898 0 0 0-1.694-.09L.451 9.411.416 9.5a6.297 6.297 0 0 0 2.09 7.278l.012.01.03.022 5.16 3.867 2.56 1.935 1.554 1.176a1.051 1.051 0 0 0 1.268 0l1.555-1.176 2.56-1.935 5.197-3.89.014-.01A6.297 6.297 0 0 0 24.507 9.5z"
+            />
+            <path
+              fill="#fc6d26"
+              d="m24.507 9.5-.034-.09a11.44 11.44 0 0 0-4.56 2.051l-7.447 5.632 4.742 3.584 5.197-3.89.014-.01A6.297 6.297 0 0 0 24.507 9.5z"
+            />
+            <path
+              fill="#fca326"
+              d="m7.707 20.677 2.56 1.935 1.555 1.176a1.051 1.051 0 0 0 1.268 0l1.555-1.176 2.56-1.935-4.743-3.584-4.755 3.584z"
+            />
+            <path
+              fill="#fc6d26"
+              d="M5.01 11.461a11.43 11.43 0 0 0-4.56-2.05L.416 9.5a6.297 6.297 0 0 0 2.09 7.278l.012.01.03.022 5.16 3.867 4.745-3.584-7.444-5.632z"
+            />
+          </svg>
+        </div>
+        {children ? (
+          children
+        ) : (
+          <span className="ml-4">{name ? name : <Translated i18nKey="signInWithGitlab" namespace="idp" />}</span>
+        )}
+      </BaseButton>
+    );
+  },
+);

apps/login/src/components/idps/sign-in-with-google.tsx

@@ -4,63 +4,51 @@ import { forwardRef } from "react";
 import { Translated } from "../translated";
 import { BaseButton, SignInWithIdentityProviderProps } from "./base-button";
 
-export const SignInWithGoogle = forwardRef<
-  HTMLButtonElement,
-  SignInWithIdentityProviderProps
->(function SignInWithGoogle(props, ref) {
-  const { children, name, ...restProps } = props;
+export const SignInWithGoogle = forwardRef<HTMLButtonElement, SignInWithIdentityProviderProps>(
+  function SignInWithGoogle(props, ref) {
+    const { children, name, ...restProps } = props;
 
-  return (
-    <BaseButton {...restProps} ref={ref}>
-      <div className="flex h-12 w-12 items-center justify-center">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          xmlSpace="preserve"
-          id="Capa_1"
-          viewBox="0 0 150 150"
-        >
-          <style>
-            {
-              ".st0{fill:#1a73e8}.st1{fill:#ea4335}.st2{fill:#4285f4}.st3{fill:#fbbc04}.st4{fill:#34a853}.st5{fill:#4caf50}.st6{fill:#1e88e5}.st7{fill:#e53935}.st8{fill:#c62828}.st9{fill:#fbc02d}.st10{fill:#1565c0}.st11{fill:#2e7d32}.st16{clip-path:url(#SVGID_2_)}.st17{fill:#188038}.st18,.st19{opacity:.2;fill:#fff;enable-background:new}.st19{opacity:.3;fill:#0d652d}.st20{clip-path:url(#SVGID_4_)}.st21{opacity:.3;fill:url(#_45_shadow_1_);enable-background:new}.st22{clip-path:url(#SVGID_6_)}.st23{fill:#fa7b17}.st24,.st25,.st26{opacity:.3;fill:#174ea6;enable-background:new}.st25,.st26{fill:#a50e0e}.st26{fill:#e37400}.st27{fill:url(#Finish_mask_1_)}.st28{fill:#fff}.st29{fill:#0c9d58}.st30,.st31{opacity:.2;fill:#004d40;enable-background:new}.st31{fill:#3e2723}.st32{fill:#ffc107}.st33{fill:#1a237e;enable-background:new}.st33,.st34{opacity:.2}.st35{fill:#1a237e}.st36{fill:url(#SVGID_7_)}.st37{fill:#fbbc05}.st38{clip-path:url(#SVGID_9_);fill:#e53935}.st39{clip-path:url(#SVGID_11_);fill:#fbc02d}.st40{clip-path:url(#SVGID_13_);fill:#e53935}.st41{clip-path:url(#SVGID_15_);fill:#fbc02d}"
-            }
-          </style>
-          <path
-            d="M120 76.1c0-3.1-.3-6.3-.8-9.3H75.9v17.7h24.8c-1 5.7-4.3 10.7-9.2 13.9l14.8 11.5C115 101.8 120 90 120 76.1z"
-            style={{
-              fill: "#4280ef",
-            }}
-          />
-          <path
-            d="M75.9 120.9c12.4 0 22.8-4.1 30.4-11.1L91.5 98.4c-4.1 2.8-9.4 4.4-15.6 4.4-12 0-22.1-8.1-25.8-18.9L34.9 95.6c7.8 15.5 23.6 25.3 41 25.3z"
-            style={{
-              fill: "#34a353",
-            }}
-          />
-          <path
-            d="M50.1 83.8c-1.9-5.7-1.9-11.9 0-17.6L34.9 54.4c-6.5 13-6.5 28.3 0 41.2l15.2-11.8z"
-            style={{
-              fill: "#f6b704",
-            }}
-          />
-          <path
-            d="M75.9 47.3c6.5-.1 12.9 2.4 17.6 6.9L106.6 41c-8.3-7.8-19.3-12-30.7-11.9-17.4 0-33.2 9.8-41 25.3l15.2 11.8c3.7-10.9 13.8-18.9 25.8-18.9z"
-            style={{
-              fill: "#e54335",
-            }}
-          />
-        </svg>
-      </div>
-      {children ? (
-        children
-      ) : (
-        <span className="ml-4">
-          {name ? (
-            name
-          ) : (
-            <Translated i18nKey="signInWithGoogle" namespace="idp" />
-          )}
-        </span>
-      )}
-    </BaseButton>
-  );
-});
+    return (
+      <BaseButton {...restProps} ref={ref}>
+        <div className="flex h-12 w-12 items-center justify-center">
+          <svg xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve" id="Capa_1" viewBox="0 0 150 150">
+            <style>
+              {
+                ".st0{fill:#1a73e8}.st1{fill:#ea4335}.st2{fill:#4285f4}.st3{fill:#fbbc04}.st4{fill:#34a853}.st5{fill:#4caf50}.st6{fill:#1e88e5}.st7{fill:#e53935}.st8{fill:#c62828}.st9{fill:#fbc02d}.st10{fill:#1565c0}.st11{fill:#2e7d32}.st16{clip-path:url(#SVGID_2_)}.st17{fill:#188038}.st18,.st19{opacity:.2;fill:#fff;enable-background:new}.st19{opacity:.3;fill:#0d652d}.st20{clip-path:url(#SVGID_4_)}.st21{opacity:.3;fill:url(#_45_shadow_1_);enable-background:new}.st22{clip-path:url(#SVGID_6_)}.st23{fill:#fa7b17}.st24,.st25,.st26{opacity:.3;fill:#174ea6;enable-background:new}.st25,.st26{fill:#a50e0e}.st26{fill:#e37400}.st27{fill:url(#Finish_mask_1_)}.st28{fill:#fff}.st29{fill:#0c9d58}.st30,.st31{opacity:.2;fill:#004d40;enable-background:new}.st31{fill:#3e2723}.st32{fill:#ffc107}.st33{fill:#1a237e;enable-background:new}.st33,.st34{opacity:.2}.st35{fill:#1a237e}.st36{fill:url(#SVGID_7_)}.st37{fill:#fbbc05}.st38{clip-path:url(#SVGID_9_);fill:#e53935}.st39{clip-path:url(#SVGID_11_);fill:#fbc02d}.st40{clip-path:url(#SVGID_13_);fill:#e53935}.st41{clip-path:url(#SVGID_15_);fill:#fbc02d}"
+              }
+            </style>
+            <path
+              d="M120 76.1c0-3.1-.3-6.3-.8-9.3H75.9v17.7h24.8c-1 5.7-4.3 10.7-9.2 13.9l14.8 11.5C115 101.8 120 90 120 76.1z"
+              style={{
+                fill: "#4280ef",
+              }}
+            />
+            <path
+              d="M75.9 120.9c12.4 0 22.8-4.1 30.4-11.1L91.5 98.4c-4.1 2.8-9.4 4.4-15.6 4.4-12 0-22.1-8.1-25.8-18.9L34.9 95.6c7.8 15.5 23.6 25.3 41 25.3z"
+              style={{
+                fill: "#34a353",
+              }}
+            />
+            <path
+              d="M50.1 83.8c-1.9-5.7-1.9-11.9 0-17.6L34.9 54.4c-6.5 13-6.5 28.3 0 41.2l15.2-11.8z"
+              style={{
+                fill: "#f6b704",
+              }}
+            />
+            <path
+              d="M75.9 47.3c6.5-.1 12.9 2.4 17.6 6.9L106.6 41c-8.3-7.8-19.3-12-30.7-11.9-17.4 0-33.2 9.8-41 25.3l15.2 11.8c3.7-10.9 13.8-18.9 25.8-18.9z"
+              style={{
+                fill: "#e54335",
+              }}
+            />
+          </svg>
+        </div>
+        {children ? (
+          children
+        ) : (
+          <span className="ml-4">{name ? name : <Translated i18nKey="signInWithGoogle" namespace="idp" />}</span>
+        )}
+      </BaseButton>
+    );
+  },
+);