login cleanup, react

2025-12-12 06:02:23 +00:00 · 2023-04-14 17:22:59 +02:00
parent e651eacf2b
commit 770f186abb
19 changed files with 418 additions and 120 deletions
--- a/packages/zitadel-react/README.md
+++ b/packages/zitadel-react/README.md
@@ -0,0 +1,39 @@
+# How to use
+
+### Install
+
+```sh
+npm install @zitadel/react
+```
+
+or
+
+```sh
+yarn add @zitadel/react
+```
+
+### Import styles file
+
+To get the styles, import them in `_app.tsx` or global styling file
+
+```
+import "@zitadel/react/styles.css";
+```
+
+### Setup Dark mode
+
+to set dark theme, wrap your components in a `ui-dark` class.
+
+### Use components
+
+```tsx
+import { SignInWithGoogle } from "@zitadel/react";
+
+export default function IdentityProviders() {
+  return (
+    <div className="py-4">
+      <SignInWithGoogle />
+    </div>
+  );
+}
+```
--- a/packages/zitadel-react/src/components/SignInWithGitlab.tsx
+++ b/packages/zitadel-react/src/components/SignInWithGitlab.tsx
@@ -0,0 +1,41 @@
+import * as React from "react";
+
+export interface SignInWithGitlabProps {
+  children?: React.ReactNode;
+}
+
+export function SignInWithGitlab(props: SignInWithGitlabProps) {
+  return (
+    <div className="ui-flex ui-flex-row ui-items-center ui-bg-white ui-text-black dark:ui-bg-transparent dark:ui-text-white border ui-border-gray-200 dark:ui-border-gray-800 rounded-md px-4 py-2 text-sm">
+      <div className="ui-h-12 ui-w-12">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width={25}
+          height={24}
+          fill="none"
+          {...props}
+        >
+          <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>
+      <span className="ui-ml-4">Sign in with Gitlab</span>
+    </div>
+  );
+}
+
+SignInWithGitlab.displayName = "SignInWithGitlab";
--- a/packages/zitadel-react/src/components/SignInWithGoogle.tsx
+++ b/packages/zitadel-react/src/components/SignInWithGoogle.tsx
@@ -6,14 +6,49 @@ export interface SignInWithGoogleProps {

 export function SignInWithGoogle(props: SignInWithGoogleProps) {
  return (
-    <div className="ui-flex ui-flex-row ui-items-center ui-bg-white ui-text-black dark:ui-bg-transparent dark:ui-text-white rounded-md p-4 text-sm">
-      <img
-        className="h-8 w-8"
-        src="./public/google.png"
-        alt="google"
-        height={24}
-        width={24}
-      />
+    <div className="ui-flex ui-flex-row ui-items-center ui-bg-white ui-text-black dark:ui-bg-transparent dark:ui-text-white border ui-border-gray-200 dark:ui-border-gray-800 rounded-md px-4 text-sm">
+      <div className="ui-h-12 ui-w-12 ui-flex ui-items-center ui-justify-center">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          xmlSpace="preserve"
+          id="Capa_1"
+          //   style={{
+          //     enableBackground: "new 0 0 150 150",
+          //   }}
+          viewBox="0 0 150 150"
+          {...props}
+        >
+          <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>
      <span className="ui-ml-4">Sign in with Google</span>
    </div>
  );
--- a/packages/zitadel-react/src/index.tsx
+++ b/packages/zitadel-react/src/index.tsx
@@ -4,3 +4,8 @@ export {
  SignInWithGoogle,
  type SignInWithGoogleProps,
 } from "./components/SignInWithGoogle";
+
+export {
+  SignInWithGitlab,
+  type SignInWithGitlabProps,
+} from "./components/SignInWithGitlab";
--- a/packages/zitadel-react/src/styles.css
+++ b/packages/zitadel-react/src/styles.css
@@ -1,7 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
-
-.hello {
-  color: yellow;
-}
--- a/packages/zitadel-react/tsup.config.ts
+++ b/packages/zitadel-react/tsup.config.ts
@@ -4,7 +4,7 @@ export default defineConfig((options: Options) => ({
  treeshake: true,
  splitting: true,
  publicDir: true,
-  entry: ["src/**/*.{tsx,png,svg}"],
+  entry: ["src/**/*.tsx"],
  format: ["esm"],
  dts: true,
  minify: true,