chore: Move remaining auth methods to plugins (#4900)

* Move Google, Email, and Azure to plugins

* Move OIDC provider, remove old loading code

* Move AuthLogo to plugin

* AuthLogo -> PluginIcon

* Lazy load plugin settings

app/components/AuthLogo/GoogleLogo.tsx

@@ -1,26 +0,0 @@
-import * as React from "react";
-
-type Props = {
-  size?: number;
-  fill?: string;
-  className?: string;
-};
-
-function GoogleLogo({ size = 34, fill = "#FFF", className }: Props) {
-  return (
-    <svg
-      fill={fill}
-      width={size}
-      height={size}
-      viewBox="0 0 34 34"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-    >
-      <g>
-        <path d="M32.6162791,13.9090909 L16.8837209,13.9090909 L16.8837209,20.4772727 L25.9395349,20.4772727 C25.0953488,24.65 21.5651163,27.0454545 16.8837209,27.0454545 C11.3581395,27.0454545 6.90697674,22.5636364 6.90697674,17 C6.90697674,11.4363636 11.3581395,6.95454545 16.8837209,6.95454545 C19.2627907,6.95454545 21.4116279,7.80454545 23.1,9.19545455 L28.0116279,4.25 C25.0186047,1.62272727 21.1813953,0 16.8837209,0 C7.52093023,0 0,7.57272727 0,17 C0,26.4272727 7.52093023,34 16.8837209,34 C25.3255814,34 33,27.8181818 33,17 C33,15.9954545 32.8465116,14.9136364 32.6162791,13.9090909 Z" />
-      </g>
-    </svg>
-  );
-}
-
-export default GoogleLogo;

app/components/AuthLogo/MicrosoftLogo.tsx

@@ -1,43 +0,0 @@
-import * as React from "react";
-
-type Props = {
-  size?: number;
-  fill?: string;
-  className?: string;
-};
-
-function MicrosoftLogo({ size = 34, fill = "#FFF", className }: Props) {
-  return (
-    <svg
-      fill={fill}
-      width={size}
-      height={size}
-      viewBox="0 0 34 34"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M18.0002 1H33.9998C33.9998 5.8172 34.0007 10.6344 33.9988 15.4516C28.6666 15.4508 23.3334 15.4516 18.0012 15.4516C17.9993 10.6344 18.0002 5.8172 18.0002 1Z"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M18.0009 17.5173C23.3333 17.5155 28.6667 17.5164 34 17.5164V33H18C18.0009 27.8388 17.9991 22.6776 18.0009 17.5173V17.5173Z"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M0 1H16L15.9988 15.4516H0V1Z"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M0 17.5161C5.3332 17.5179 10.6664 17.5155 15.9996 17.5179C16.0005 22.6789 15.9996 27.839 15.9996 33H0V17.5161Z"
-      />
-    </svg>
-  );
-}
-
-export default MicrosoftLogo;

app/components/AuthLogo/index.tsx

@@ -1,49 +0,0 @@
-import * as React from "react";
-import styled from "styled-components";
-import GoogleLogo from "./GoogleLogo";
-import MicrosoftLogo from "./MicrosoftLogo";
-import SlackLogo from "./SlackLogo";
-
-type Props = {
-  providerName: string;
-  size?: number;
-  color?: string;
-};
-
-function AuthLogo({ providerName, color, size = 16 }: Props) {
-  switch (providerName) {
-    case "slack":
-      return (
-        <Logo>
-          <SlackLogo size={size} fill={color} />
-        </Logo>
-      );
-
-    case "google":
-      return (
-        <Logo>
-          <GoogleLogo size={size} fill={color} />
-        </Logo>
-      );
-
-    case "azure":
-      return (
-        <Logo>
-          <MicrosoftLogo size={size} fill={color} />
-        </Logo>
-      );
-
-    default:
-      return null;
-  }
-}
-
-const Logo = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-`;
-
-export default AuthLogo;

app/components/PluginIcon.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import styled from "styled-components";
+import PluginLoader from "~/utils/PluginLoader";
+
+type Props = {
+  id: string;
+  size?: number;
+  color?: string;
+};
+
+function PluginIcon({ id, color, size = 24 }: Props) {
+  const plugin = PluginLoader.plugins[id];
+  const Icon = plugin?.icon;
+
+  if (Icon) {
+    return (
+      <Wrapper>
+        <Icon size={size} fill={color} />
+      </Wrapper>
+    );
+  }
+
+  return null;
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+`;
+
+export default PluginIcon;