@drmhse/authos-cli 0.1.1 → 0.1.2

package/dist/index.js

@@ -70,6 +70,18 @@ function getAdapterPackage(framework) {
       return null;
   }
 }
+function readPackageJson(cwd) {
+  const packageJsonPath = path2__namespace.join(cwd, "package.json");
+  if (!fs__namespace.existsSync(packageJsonPath)) {
+    return null;
+  }
+  try {
+    const content = fs__namespace.readFileSync(packageJsonPath, "utf8");
+    return JSON.parse(content);
+  } catch {
+    return null;
+  }
+}
 function writeFile(filePath, content) {
   const dir = path2__namespace.dirname(filePath);
   if (!fs__namespace.existsSync(dir)) {
@@ -137,6 +149,31 @@ function getFrameworkName(framework) {
       return "Unknown";
   }
 }
+function detectTailwind(cwd) {
+  const packageJson = readPackageJson(cwd);
+  if (!packageJson) return false;
+  const deps = { ...packageJson.dependencies, ...packageJson.devDependencies };
+  return !!(deps["tailwindcss"] || deps["@tailwindcss/vite"] || deps["@tailwindcss/typography"]);
+}
+function hasTailwindConfig(cwd) {
+  const configFiles = [
+    "tailwind.config.js",
+    "tailwind.config.ts",
+    "tailwind.config.cjs",
+    "tailwind.config.mjs",
+    "tailwind.config.cts"
+  ];
+  return configFiles.some((file) => fs__namespace.existsSync(path2__namespace.join(cwd, file)));
+}
+function isTailwindConfigured(cwd) {
+  return detectTailwind(cwd) || hasTailwindConfig(cwd);
+}
+function detectStyling(cwd) {
+  if (isTailwindConfigured(cwd)) {
+    return "tailwind";
+  }
+  return "unknown";
+}
 
 // src/commands/init.ts
 async function initCommand(options = {}) {
@@ -995,6 +1032,510 @@ async function handleSignOut() {
   </div>
 </template>
 `;
+var loginFormReactCssModules = `"use client";
+
+import { useState } from "react";
+import { useAuthOS } from "@drmhse/authos-react";
+import { AuthErrorCodes } from "@drmhse/sso-sdk";
+import styles from "./LoginForm.module.css";
+
+interface LoginFormProps {
+  onSuccess?: () => void;
+  redirectTo?: string;
+}
+
+export function LoginForm({ onSuccess, redirectTo }: LoginFormProps) {
+  const { client } = useAuthOS();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [mfaRequired, setMfaRequired] = useState(false);
+  const [mfaCode, setMfaCode] = useState("");
+  const [mfaToken, setMfaToken] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+
+    try {
+      const response = await client.auth.login({ email, password });
+
+      if (response.mfa_required) {
+        setMfaRequired(true);
+        setMfaToken(response.mfa_token || null);
+      } else {
+        onSuccess?.();
+        if (redirectTo) {
+          window.location.href = redirectTo;
+        }
+      }
+    } catch (err: unknown) {
+      if (err && typeof err === "object" && "errorCode" in err) {
+        const apiError = err as { errorCode: string; message: string };
+        if (apiError.errorCode === AuthErrorCodes.MFA_REQUIRED) {
+          setMfaRequired(true);
+        } else {
+          setError(apiError.message || "Login failed");
+        }
+      } else {
+        setError("An unexpected error occurred");
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleMfaSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+
+    try {
+      await client.auth.verifyMfa({ code: mfaCode, mfa_token: mfaToken! });
+      onSuccess?.();
+      if (redirectTo) {
+        window.location.href = redirectTo;
+      }
+    } catch (err: unknown) {
+      if (err && typeof err === "object" && "message" in err) {
+        setError((err as { message: string }).message || "Invalid MFA code");
+      } else {
+        setError("Invalid MFA code");
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (mfaRequired) {
+    return (
+      <form onSubmit={handleMfaSubmit} className={styles.form}>
+        <div className={styles.header}>
+          <h2 className={styles.title}>Two-Factor Authentication</h2>
+          <p className={styles.subtitle}>Enter the code from your authenticator app</p>
+        </div>
+
+        {error && <div className={styles.error}>{error}</div>}
+
+        <div className={styles.field}>
+          <label htmlFor="mfa-code" className={styles.label}>Verification Code</label>
+          <input
+            id="mfa-code"
+            type="text"
+            inputMode="numeric"
+            autoComplete="one-time-code"
+            value={mfaCode}
+            onChange={(e) => setMfaCode(e.target.value)}
+            className={styles.input}
+            placeholder="000000"
+            maxLength={6}
+            required
+          />
+        </div>
+
+        <button type="submit" disabled={loading} className={styles.button}>
+          {loading ? "Verifying..." : "Verify"}
+        </button>
+
+        <button type="button" onClick={() => setMfaRequired(false)} className={styles.link}>
+          Back to login
+        </button>
+      </form>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className={styles.form}>
+      <div className={styles.header}>
+        <h2 className={styles.title}>Sign In</h2>
+        <p className={styles.subtitle}>Enter your credentials to continue</p>
+      </div>
+
+      {error && <div className={styles.error}>{error}</div>}
+
+      <div className={styles.field}>
+        <label htmlFor="email" className={styles.label}>Email</label>
+        <input
+          id="email"
+          type="email"
+          autoComplete="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          className={styles.input}
+          placeholder="you@example.com"
+          required
+        />
+      </div>
+
+      <div className={styles.field}>
+        <label htmlFor="password" className={styles.label}>Password</label>
+        <input
+          id="password"
+          type="password"
+          autoComplete="current-password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          className={styles.input}
+          placeholder="Your password"
+          required
+        />
+      </div>
+
+      <button type="submit" disabled={loading} className={styles.button}>
+        {loading ? "Signing in..." : "Sign In"}
+      </button>
+    </form>
+  );
+}
+`;
+var loginFormCssModulesStyles = `.form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+  max-width: 24rem;
+}
+
+.header {
+  text-align: center;
+  margin-bottom: 1.5rem;
+}
+
+.title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0;
+}
+
+.subtitle {
+  color: #6b7280;
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+}
+
+.label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  margin-bottom: 0.25rem;
+}
+
+.input {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.375rem;
+  font-size: 1rem;
+}
+
+.input:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.button {
+  width: 100%;
+  padding: 0.5rem 1rem;
+  background-color: #2563eb;
+  color: white;
+  border: none;
+  border-radius: 0.375rem;
+  font-weight: 500;
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+.button:hover {
+  background-color: #1d4ed8;
+}
+
+.button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.error {
+  background-color: #fef2f2;
+  color: #dc2626;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+}
+
+.link {
+  background: none;
+  border: none;
+  color: #6b7280;
+  font-size: 0.875rem;
+  cursor: pointer;
+  text-align: center;
+}
+
+.link:hover {
+  text-decoration: underline;
+}
+`;
+var loginFormVueScoped = `<script setup lang="ts">
+import { ref } from "vue";
+import { useAuthOS } from "@drmhse/authos-vue";
+import { AuthErrorCodes } from "@drmhse/sso-sdk";
+
+interface Props {
+  redirectTo?: string;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<{
+  success: [];
+}>();
+
+const { client } = useAuthOS();
+
+const email = ref("");
+const password = ref("");
+const error = ref<string | null>(null);
+const loading = ref(false);
+const mfaRequired = ref(false);
+const mfaCode = ref("");
+const mfaToken = ref<string | null>(null);
+
+async function handleSubmit() {
+  error.value = null;
+  loading.value = true;
+
+  try {
+    const response = await client.auth.login({
+      email: email.value,
+      password: password.value,
+    });
+
+    if (response.mfa_required) {
+      mfaRequired.value = true;
+      mfaToken.value = response.mfa_token || null;
+    } else {
+      emit("success");
+      if (props.redirectTo) {
+        window.location.href = props.redirectTo;
+      }
+    }
+  } catch (err: unknown) {
+    if (err && typeof err === "object" && "errorCode" in err) {
+      const apiError = err as { errorCode: string; message: string };
+      if (apiError.errorCode === AuthErrorCodes.MFA_REQUIRED) {
+        mfaRequired.value = true;
+      } else {
+        error.value = apiError.message || "Login failed";
+      }
+    } else {
+      error.value = "An unexpected error occurred";
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function handleMfaSubmit() {
+  error.value = null;
+  loading.value = true;
+
+  try {
+    await client.auth.verifyMfa({
+      code: mfaCode.value,
+      mfa_token: mfaToken.value!,
+    });
+    emit("success");
+    if (props.redirectTo) {
+      window.location.href = props.redirectTo;
+    }
+  } catch (err: unknown) {
+    if (err && typeof err === "object" && "message" in err) {
+      error.value = (err as { message: string }).message || "Invalid MFA code";
+    } else {
+      error.value = "Invalid MFA code";
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+function backToLogin() {
+  mfaRequired.value = false;
+  mfaCode.value = "";
+  error.value = null;
+}
+</script>
+
+<template>
+  <form v-if="mfaRequired" @submit.prevent="handleMfaSubmit" class="form">
+    <div class="header">
+      <h2 class="title">Two-Factor Authentication</h2>
+      <p class="subtitle">Enter the code from your authenticator app</p>
+    </div>
+
+    <div v-if="error" class="error">{{ error }}</div>
+
+    <div class="field">
+      <label for="mfa-code" class="label">Verification Code</label>
+      <input
+        id="mfa-code"
+        v-model="mfaCode"
+        type="text"
+        inputmode="numeric"
+        autocomplete="one-time-code"
+        class="input"
+        placeholder="000000"
+        maxlength="6"
+        required
+      />
+    </div>
+
+    <button type="submit" :disabled="loading" class="button">
+      {{ loading ? "Verifying..." : "Verify" }}
+    </button>
+
+    <button type="button" @click="backToLogin" class="link">Back to login</button>
+  </form>
+
+  <form v-else @submit.prevent="handleSubmit" class="form">
+    <div class="header">
+      <h2 class="title">Sign In</h2>
+      <p class="subtitle">Enter your credentials to continue</p>
+    </div>
+
+    <div v-if="error" class="error">{{ error }}</div>
+
+    <div class="field">
+      <label for="email" class="label">Email</label>
+      <input
+        id="email"
+        v-model="email"
+        type="email"
+        autocomplete="email"
+        class="input"
+        placeholder="you@example.com"
+        required
+      />
+    </div>
+
+    <div class="field">
+      <label for="password" class="label">Password</label>
+      <input
+        id="password"
+        v-model="password"
+        type="password"
+        autocomplete="current-password"
+        class="input"
+        placeholder="Your password"
+        required
+      />
+    </div>
+
+    <button type="submit" :disabled="loading" class="button">
+      {{ loading ? "Signing in..." : "Sign In" }}
+    </button>
+  </form>
+</template>
+
+<style scoped>
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+  max-width: 24rem;
+}
+
+.header {
+  text-align: center;
+  margin-bottom: 1.5rem;
+}
+
+.title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0;
+}
+
+.subtitle {
+  color: #6b7280;
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+}
+
+.label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  margin-bottom: 0.25rem;
+}
+
+.input {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.375rem;
+  font-size: 1rem;
+}
+
+.input:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.button {
+  width: 100%;
+  padding: 0.5rem 1rem;
+  background-color: #2563eb;
+  color: white;
+  border: none;
+  border-radius: 0.375rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.button:hover {
+  background-color: #1d4ed8;
+}
+
+.button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.error {
+  background-color: #fef2f2;
+  color: #dc2626;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+}
+
+.link {
+  background: none;
+  border: none;
+  color: #6b7280;
+  font-size: 0.875rem;
+  cursor: pointer;
+  text-align: center;
+}
+
+.link:hover {
+  text-decoration: underline;
+}
+</style>
+`;
 var templates = {
   "login-form": {
     name: "Login Form",
@@ -1003,11 +1544,33 @@ var templates = {
       {
         name: "LoginForm",
         content: {
-          react: loginFormReact,
-          next: loginFormReact,
-          vue: loginFormVue,
-          nuxt: loginFormVue,
-          unknown: loginFormReact
+          tailwind: {
+            react: loginFormReact,
+            next: loginFormReact,
+            vue: loginFormVue,
+            nuxt: loginFormVue,
+            unknown: loginFormReact
+          },
+          "css-modules": {
+            react: loginFormReactCssModules,
+            next: loginFormReactCssModules,
+            vue: loginFormVueScoped,
+            nuxt: loginFormVueScoped,
+            unknown: loginFormReactCssModules
+          },
+          none: {
+            react: loginFormReact,
+            // Fallback to tailwind for now
+            next: loginFormReact,
+            vue: loginFormVue,
+            nuxt: loginFormVue,
+            unknown: loginFormReact
+          }
+        },
+        extraFiles: {
+          "css-modules": [
+            { name: "LoginForm.module.css", content: loginFormCssModulesStyles }
+          ]
         }
       }
     ]
@@ -1019,11 +1582,28 @@ var templates = {
       {
         name: "OrganizationSwitcher",
         content: {
-          react: orgSwitcherReact,
-          next: orgSwitcherReact,
-          vue: orgSwitcherVue,
-          nuxt: orgSwitcherVue,
-          unknown: orgSwitcherReact
+          tailwind: {
+            react: orgSwitcherReact,
+            next: orgSwitcherReact,
+            vue: orgSwitcherVue,
+            nuxt: orgSwitcherVue,
+            unknown: orgSwitcherReact
+          },
+          "css-modules": {
+            react: orgSwitcherReact,
+            // Will add CSS modules variant later
+            next: orgSwitcherReact,
+            vue: orgSwitcherVue,
+            nuxt: orgSwitcherVue,
+            unknown: orgSwitcherReact
+          },
+          none: {
+            react: orgSwitcherReact,
+            next: orgSwitcherReact,
+            vue: orgSwitcherVue,
+            nuxt: orgSwitcherVue,
+            unknown: orgSwitcherReact
+          }
         }
       }
     ]
@@ -1035,11 +1615,28 @@ var templates = {
       {
         name: "UserProfile",
         content: {
-          react: userProfileReact,
-          next: userProfileReact,
-          vue: userProfileVue,
-          nuxt: userProfileVue,
-          unknown: userProfileReact
+          tailwind: {
+            react: userProfileReact,
+            next: userProfileReact,
+            vue: userProfileVue,
+            nuxt: userProfileVue,
+            unknown: userProfileReact
+          },
+          "css-modules": {
+            react: userProfileReact,
+            // Will add CSS modules variant later
+            next: userProfileReact,
+            vue: userProfileVue,
+            nuxt: userProfileVue,
+            unknown: userProfileReact
+          },
+          none: {
+            react: userProfileReact,
+            next: userProfileReact,
+            vue: userProfileVue,
+            nuxt: userProfileVue,
+            unknown: userProfileReact
+          }
         }
       }
     ]
@@ -1077,6 +1674,26 @@ async function addCommand(templateName, options = {}) {
   } else {
     log.info(`Detected ${getFrameworkName(framework)} project`);
   }
+  let styling = detectStyling(cwd);
+  if (styling === "unknown") {
+    const response = await prompts2__default.default({
+      type: "select",
+      name: "styling",
+      message: "How do you want to style this component?",
+      choices: [
+        { title: "Tailwind CSS (utility classes)", value: "tailwind" },
+        { title: "CSS Modules (.module.css)", value: "css-modules" },
+        { title: "Unstyled (headless)", value: "none" }
+      ]
+    });
+    if (!response.styling) {
+      log.error("Command cancelled.");
+      process.exit(1);
+    }
+    styling = response.styling;
+  } else {
+    log.info(`Using Tailwind CSS styling (detected)`);
+  }
   if (!templateName) {
     const availableTemplates = getAvailableTemplates();
     const choices = availableTemplates.map((name) => {
@@ -1127,9 +1744,29 @@ async function addCommand(templateName, options = {}) {
         continue;
       }
     }
-    const content = file.content[framework];
+    const content = file.content[styling]?.[framework] ?? file.content["none"]?.[framework] ?? "";
     writeFile(filePath, content);
     log.success(`Created ${path2__namespace.relative(cwd, filePath)}`);
+    const extraFiles = file.extraFiles?.[styling];
+    if (extraFiles) {
+      for (const extra of extraFiles) {
+        const extraPath = path2__namespace.join(componentsDir, extra.name);
+        if (fileExists(extraPath) && !options.force) {
+          const response = await prompts2__default.default({
+            type: "confirm",
+            name: "overwrite",
+            message: `${extra.name} already exists. Overwrite?`,
+            initial: false
+          });
+          if (!response.overwrite) {
+            log.warn(`Skipped ${extra.name}`);
+            continue;
+          }
+        }
+        writeFile(extraPath, extra.content);
+        log.success(`Created ${path2__namespace.relative(cwd, extraPath)}`);
+      }
+    }
   }
   console.log("\n");
   log.success(`Added ${template.name} component!`);