feat(clerk-js): Add open sign-in/up to sandbox (#4666)

clerk · Nov 28, 2024 · c02e208 · c02e208
1 parent b0d165a
commit c02e208
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 1 deletion.
diff --git a/.changeset/quiet-mails-attend.md b/.changeset/quiet-mails-attend.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/sandbox/app.ts b/packages/clerk-js/sandbox/app.ts
@@ -98,6 +98,24 @@ function mountIndex(element: HTMLDivElement) {
   element.innerHTML = `<pre><code>${JSON.stringify({ user }, null, 2)}</code></pre>`;
 }
 
+function mountOpenSignInButton(element: HTMLDivElement, props) {
+  const button = document.createElement('button');
+  button.textContent = 'Open Sign In';
+  button.onclick = () => {
+    Clerk?.openSignUp(props);
+  };
+  element.appendChild(button);
+}
+
+function mountOpenSignUpButton(element: HTMLDivElement, props) {
+  const button = document.createElement('button');
+  button.textContent = 'Open Sign Up';
+  button.onclick = () => {
+    Clerk?.openSignUp(props);
+  };
+  element.appendChild(button);
+}
+
 function addCurrentRouteIndicator(currentRoute: string) {
   const link = document.querySelector(`a[href="${currentRoute}"]`);
   if (!link) {
@@ -144,6 +162,12 @@ function addCurrentRouteIndicator(currentRoute: string) {
     '/accountless': () => {
       Clerk.__unstable__updateProps({ options: { __internal_claimAccountlessKeysUrl: '/test-url' } });
     },
+    '/open-sign-in': () => {
+      mountOpenSignInButton(app, componentControls.signIn.getProps() ?? {});
+    },
+    '/open-sign-up': () => {
+      mountOpenSignUpButton(app, componentControls.signUp.getProps() ?? {});
+    },
   };
 
   const route = window.location.pathname;

diff --git a/packages/clerk-js/sandbox/template.html b/packages/clerk-js/sandbox/template.html
@@ -159,7 +159,7 @@
           ></path>
         </svg>
         <div
-          class="bg-gray-25 mt-0.5 rounded-full px-2 py-1 text-[0.625rem]/3 font-medium text-gray-600 ring-1 ring-inset ring-gray-100 dark:bg-gray-900 dark:text-gray-400 dark:ring-gray-700"
+          class="bg-gray-25 mt-0.5 rounded-full px-2 py-1 text-[0.625rem]/3 font-medium text-gray-600 ring-1 ring-inset ring-gray-100"
         >
           Sandbox
         </div>
@@ -244,6 +244,22 @@
               Accountless
             </a>
           </li>
+          <li class="relative">
+            <a
+              class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
+              href="/open-sign-in"
+            >
+              Open sign in
+            </a>
+          </li>
+          <li class="relative">
+            <a
+              class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
+              href="/open-sign-up"
+            >
+              Open sign up
+            </a>
+          </li>
         </ul>
       </nav>
     </div>