@drmhse/authos-vue 0.2.1 → 0.2.3

package/dist/index.js

@@ -92,23 +92,38 @@ var AUTHOS_STYLES = `
    Base Form Styles
    ========================================================================== */
 
+/* ==========================================================================
+   Base Form Styles (Card Layout)
+   ========================================================================== */
+
 [data-authos-signin],
 [data-authos-signup],
-[data-authos-magiclink],
+[data-authos-magic-link],
 [data-authos-passkey] {
   font-family: var(--authos-font-family);
   font-size: var(--authos-font-size-sm);
   color: var(--authos-color-foreground);
+  
+  /* Card Styling */
+  background-color: var(--authos-color-surface);
+  border: 1px solid var(--authos-color-border);
+  border-radius: var(--authos-border-radius-lg);
+  box-shadow: var(--authos-shadow);
+  padding: 2rem;
   width: 100%;
+  max-width: 25rem; /* 400px */
+  margin: 0 auto;   /* Center horizontally */
 }
 
+/* Ensure forms inside take full width */
 [data-authos-signin] form,
 [data-authos-signup] form,
-[data-authos-magiclink] form,
+[data-authos-magic-link] form,
 [data-authos-passkey] form {
   display: flex;
   flex-direction: column;
   gap: var(--authos-spacing-md);
+  width: 100%;
 }
 
 /* ==========================================================================
@@ -486,6 +501,16 @@ function createAuthOS(options) {
       if (options.appearance?.variables) {
         applyVariables(options.appearance.variables);
       }
+      if (options.org && !options.service) {
+        console.warn(
+          '[AuthOS] You provided "org" but not "service". OAuth flows may not work correctly.'
+        );
+      }
+      if (!options.org && options.service) {
+        console.warn(
+          '[AuthOS] You provided "service" but not "org". OAuth flows may not work correctly.'
+        );
+      }
       vue.nextTick(() => {
         setInitialToken();
       });
@@ -857,6 +882,133 @@ var SignIn = vue.defineComponent({
     };
   }
 });
+var PROVIDER_NAMES = {
+  github: "GitHub",
+  google: "Google",
+  microsoft: "Microsoft"
+};
+function getProviderIcon(provider) {
+  switch (provider) {
+    case "github":
+      return vue.h("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "currentColor",
+        "aria-hidden": "true"
+      }, [
+        vue.h("path", {
+          d: "M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"
+        })
+      ]);
+    case "google":
+      return vue.h("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        "aria-hidden": "true"
+      }, [
+        vue.h("path", {
+          fill: "#4285F4",
+          d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+        }),
+        vue.h("path", {
+          fill: "#34A853",
+          d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+        }),
+        vue.h("path", {
+          fill: "#FBBC05",
+          d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+        }),
+        vue.h("path", {
+          fill: "#EA4335",
+          d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+        })
+      ]);
+    case "microsoft":
+      return vue.h("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 23 23",
+        "aria-hidden": "true"
+      }, [
+        vue.h("path", { fill: "#f35325", d: "M1 1h10v10H1z" }),
+        vue.h("path", { fill: "#81bc06", d: "M12 1h10v10H12z" }),
+        vue.h("path", { fill: "#05a6f0", d: "M1 12h10v10H1z" }),
+        vue.h("path", { fill: "#ffba08", d: "M12 12h10v10H12z" })
+      ]);
+  }
+}
+var OAuthButton = vue.defineComponent({
+  name: "OAuthButton",
+  props: {
+    provider: {
+      type: String,
+      required: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["redirect"],
+  setup(props, { slots, emit }) {
+    const { client, options } = useAuthOS();
+    const isConfigured = vue.computed(() => !!(options.org && options.service));
+    const providerName = vue.computed(() => PROVIDER_NAMES[props.provider]);
+    function handleClick() {
+      if (!options.org || !options.service) {
+        console.error(
+          `[AuthOS] OAuth login requires "org" and "service" in createAuthOS options.
+Current options: { org: ${options.org ? `"${options.org}"` : "undefined"}, service: ${options.service ? `"${options.service}"` : "undefined"} }
+
+Example:
+  app.use(createAuthOS({
+    baseURL: "${options.baseURL}",
+    org: "your-org-slug",
+    service: "your-service-slug",
+  }));
+
+See: https://docs.authos.dev/vue/oauth-setup`
+        );
+        return;
+      }
+      const redirectUri = options.redirectUri ?? (typeof window !== "undefined" ? window.location.origin + "/callback" : void 0);
+      const url = client.auth.getLoginUrl(props.provider, {
+        org: options.org,
+        service: options.service,
+        redirect_uri: redirectUri
+      });
+      emit("redirect");
+      window.location.href = url;
+    }
+    return () => {
+      const slotProps = {
+        provider: props.provider,
+        providerName: providerName.value,
+        isConfigured: isConfigured.value,
+        disabled: props.disabled,
+        handleClick
+      };
+      if (slots.default) {
+        return slots.default(slotProps);
+      }
+      return vue.h(
+        "button",
+        {
+          type: "button",
+          onClick: handleClick,
+          disabled: props.disabled || !isConfigured.value,
+          "data-authos-oauth": "",
+          "data-provider": props.provider
+        },
+        [
+          getProviderIcon(props.provider),
+          vue.h("span", `Continue with ${providerName.value}`)
+        ]
+      );
+    };
+  }
+});
+
+// src/components/SignUp.ts
 var SignUp = vue.defineComponent({
   name: "SignUp",
   props: {
@@ -877,25 +1029,53 @@ var SignUp = vue.defineComponent({
     serviceSlug: {
       type: String,
       default: void 0
+    },
+    /** List of OAuth providers to display buttons for */
+    providers: {
+      type: [Array, Boolean],
+      default: false
+    },
+    /** Show divider between OAuth and email form */
+    showDivider: {
+      type: Boolean,
+      default: true
+    },
+    /** Show sign in link */
+    showSignIn: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ["success", "error"],
   setup(props, { slots, emit }) {
-    const { client } = useAuthOS();
+    const { client, options } = useAuthOS();
     const email = vue.ref("");
     const password = vue.ref("");
+    const confirmPassword = vue.ref("");
     const error = vue.ref(null);
     const isSubmitting = vue.ref(false);
+    const isSuccess = vue.ref(false);
+    const hasOAuthConfig = !!(options.org && options.service);
+    const oauthProviders = Array.isArray(props.providers) ? props.providers : [];
     async function submit() {
       error.value = null;
+      if (password.value !== confirmPassword.value) {
+        error.value = "Passwords do not match";
+        return;
+      }
+      if (password.value.length < 8) {
+        error.value = "Password must be at least 8 characters";
+        return;
+      }
       isSubmitting.value = true;
       try {
         await client.auth.register({
           email: email.value,
           password: password.value,
-          org_slug: props.orgSlug,
-          service_slug: props.serviceSlug
+          org_slug: props.orgSlug ?? options.org,
+          service_slug: props.serviceSlug ?? options.service
         });
+        isSuccess.value = true;
         emit("success");
         props.onSuccess?.();
       } catch (err) {
@@ -921,7 +1101,33 @@ var SignUp = vue.defineComponent({
       if (slots.default) {
         return slots.default(slotProps);
       }
+      if (isSuccess.value) {
+        return vue.h("div", { "data-authos-signup": "", "data-state": "success" }, [
+          vue.h("div", { "data-authos-success": "" }, [
+            vue.h("h2", "Check your email"),
+            vue.h("p", `We've sent a verification link to ${email.value}. Please click the link to verify your account.`)
+          ])
+        ]);
+      }
       return vue.h("div", { "data-authos-signup": "", "data-state": "credentials" }, [
+        // OAuth Section
+        oauthProviders.length > 0 && vue.h("div", { "data-authos-oauth-section": "" }, [
+          oauthProviders.map(
+            (provider) => vue.h(OAuthButton, {
+              key: provider,
+              provider,
+              disabled: isSubmitting.value || !hasOAuthConfig
+            })
+          ),
+          !hasOAuthConfig && vue.h("p", {
+            "data-authos-oauth-warning": "",
+            style: { color: "orange", fontSize: "0.875rem" }
+          }, "OAuth requires org and service in plugin options")
+        ]),
+        // Divider
+        oauthProviders.length > 0 && props.showDivider && vue.h("div", { "data-authos-divider": "" }, [
+          vue.h("span", "or")
+        ]),
         vue.h("form", { onSubmit: (e) => {
           e.preventDefault();
           submit();
@@ -952,12 +1158,31 @@ var SignUp = vue.defineComponent({
               onInput: (e) => password.value = e.target.value
             })
           ]),
+          // Confirm Password
+          vue.h("div", { "data-authos-field": "confirm-password" }, [
+            vue.h("label", { for: "authos-signup-confirm" }, "Confirm Password"),
+            vue.h("input", {
+              id: "authos-signup-confirm",
+              type: "password",
+              autocomplete: "new-password",
+              value: confirmPassword.value,
+              placeholder: "Confirm your password",
+              required: true,
+              disabled: isSubmitting.value,
+              onInput: (e) => confirmPassword.value = e.target.value
+            })
+          ]),
           error.value && vue.h("div", { "data-authos-error": "" }, error.value),
           vue.h("button", {
             type: "submit",
             disabled: isSubmitting.value,
             "data-authos-submit": ""
-          }, isSubmitting.value ? "Creating account..." : "Sign Up")
+          }, isSubmitting.value ? "Creating account..." : "Sign Up"),
+          // Sign In Link
+          props.showSignIn && vue.h("div", { "data-authos-signin-prompt": "" }, [
+            "Already have an account? ",
+            vue.h("a", { href: "/signin", "data-authos-link": "signin" }, "Sign in")
+          ])
         ])
       ]);
     };
@@ -1125,131 +1350,6 @@ var Protect = vue.defineComponent({
     };
   }
 });
-var PROVIDER_NAMES = {
-  github: "GitHub",
-  google: "Google",
-  microsoft: "Microsoft"
-};
-function getProviderIcon(provider) {
-  switch (provider) {
-    case "github":
-      return vue.h("svg", {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 24 24",
-        fill: "currentColor",
-        "aria-hidden": "true"
-      }, [
-        vue.h("path", {
-          d: "M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"
-        })
-      ]);
-    case "google":
-      return vue.h("svg", {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 24 24",
-        "aria-hidden": "true"
-      }, [
-        vue.h("path", {
-          fill: "#4285F4",
-          d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
-        }),
-        vue.h("path", {
-          fill: "#34A853",
-          d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
-        }),
-        vue.h("path", {
-          fill: "#FBBC05",
-          d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
-        }),
-        vue.h("path", {
-          fill: "#EA4335",
-          d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
-        })
-      ]);
-    case "microsoft":
-      return vue.h("svg", {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 23 23",
-        "aria-hidden": "true"
-      }, [
-        vue.h("path", { fill: "#f35325", d: "M1 1h10v10H1z" }),
-        vue.h("path", { fill: "#81bc06", d: "M12 1h10v10H12z" }),
-        vue.h("path", { fill: "#05a6f0", d: "M1 12h10v10H1z" }),
-        vue.h("path", { fill: "#ffba08", d: "M12 12h10v10H12z" })
-      ]);
-  }
-}
-var OAuthButton = vue.defineComponent({
-  name: "OAuthButton",
-  props: {
-    provider: {
-      type: String,
-      required: true
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ["redirect"],
-  setup(props, { slots, emit }) {
-    const { client, options } = useAuthOS();
-    const isConfigured = vue.computed(() => !!(options.org && options.service));
-    const providerName = vue.computed(() => PROVIDER_NAMES[props.provider]);
-    function handleClick() {
-      if (!options.org || !options.service) {
-        console.error(
-          `[AuthOS] OAuth login requires "org" and "service" in createAuthOS options.
-Current options: { org: ${options.org ? `"${options.org}"` : "undefined"}, service: ${options.service ? `"${options.service}"` : "undefined"} }
-
-Example:
-  app.use(createAuthOS({
-    baseURL: "${options.baseURL}",
-    org: "your-org-slug",
-    service: "your-service-slug",
-  }));
-
-See: https://docs.authos.dev/vue/oauth-setup`
-        );
-        return;
-      }
-      const redirectUri = options.redirectUri ?? (typeof window !== "undefined" ? window.location.origin + "/callback" : void 0);
-      const url = client.auth.getLoginUrl(props.provider, {
-        org: options.org,
-        service: options.service,
-        redirect_uri: redirectUri
-      });
-      emit("redirect");
-      window.location.href = url;
-    }
-    return () => {
-      const slotProps = {
-        provider: props.provider,
-        providerName: providerName.value,
-        isConfigured: isConfigured.value,
-        disabled: props.disabled,
-        handleClick
-      };
-      if (slots.default) {
-        return slots.default(slotProps);
-      }
-      return vue.h(
-        "button",
-        {
-          type: "button",
-          onClick: handleClick,
-          disabled: props.disabled || !isConfigured.value,
-          "data-authos-oauth": "",
-          "data-provider": props.provider
-        },
-        [
-          getProviderIcon(props.provider),
-          vue.h("span", `Continue with ${providerName.value}`)
-        ]
-      );
-    };
-  }
-});
 var SignedIn = vue.defineComponent({
   name: "SignedIn",
   setup(_, { slots }) {