feat(ui): Sign out of other sessions checkbox (#3801)

.changeset/unlucky-yaks-turn.md

@@ -0,0 +1,2 @@
+---
+---

packages/ui/src/common/checkbox-field.tsx

@@ -0,0 +1,42 @@
+import * as Common from '@clerk/elements/common';
+import React from 'react';
+
+import * as Field from '../primitives/field';
+
+export function CheckboxField({
+  label,
+  name,
+  ...props
+}: { name: React.ComponentProps<typeof Common.Field>['name']; label: React.ReactNode } & Omit<
+  React.ComponentProps<typeof Common.Input>,
+  'className' | 'type'
+>) {
+  return (
+    <Common.Field
+      name={name}
+      asChild
+    >
+      <Field.Root>
+        <div className='flex gap-2'>
+          <Common.Input
+            type='checkbox'
+            asChild
+            {...props}
+          >
+            <Field.Checkbox />
+          </Common.Input>
+
+          <Common.Label asChild>
+            <Field.Label>{label}</Field.Label>
+          </Common.Label>
+        </div>
+
+        <Common.FieldError asChild>
+          {({ message }) => {
+            return <Field.Message intent='error'>{message}</Field.Message>;
+          }}
+        </Common.FieldError>
+      </Field.Root>
+    </Common.Field>
+  );
+}

packages/ui/src/components/sign-in/sign-in.tsx

@@ -4,6 +4,7 @@ import * as SignIn from '@clerk/elements/sign-in';
 import * as React from 'react';
 
 import { BackupCodeField } from '~/common/backup-code-field';
+import { CheckboxField } from '~/common/checkbox-field';
 import { Connections } from '~/common/connections';
 import { EmailField } from '~/common/email-field';
 import { EmailOrPhoneNumberField } from '~/common/email-or-phone-number-field';
@@ -1141,28 +1142,36 @@ export function SignInComponentLoaded() {
                         return <Alert>{message}</Alert>;
                       }}
                     </Common.GlobalError>
-                    <div className='flex flex-col justify-center gap-4'>
-                      <PasswordField
-                        validatePassword
-                        name='password'
-                        label={t('formFieldLabel__newPassword')}
-                      />
-                      <PasswordField
-                        name='confirmPassword'
-                        label={t('formFieldLabel__confirmPassword')}
-                      />
+                    <div className='flex flex-col justify-center gap-6'>
+                      <div className='flex flex-col justify-center gap-4'>
+                        <PasswordField
+                          validatePassword
+                          name='password'
+                          label={t('formFieldLabel__newPassword')}
+                        />
+                        <PasswordField
+                          name='confirmPassword'
+                          label={t('formFieldLabel__confirmPassword')}
+                        />
 
+                        <CheckboxField
+                          name='signOutOfOtherSessions'
+                          label={t('formFieldLabel__signOutOfOtherSessions')}
+                          defaultChecked
+                        />
+                      </div>
                       <Common.Loading>
                         {isSubmitting => {
                           return (
-                            <>
+                            <div className='flex flex-col justify-center gap-4'>
                               <SignIn.Action
                                 submit
                                 asChild
                               >
                                 <Button
                                   busy={isSubmitting}
                                   disabled={isGlobalLoading || isSubmitting}
+                                  spinnerWhenBusy
                                 >
                                   {t('signIn.resetPassword.formButtonPrimary')}
                                 </Button>
@@ -1174,7 +1183,7 @@ export function SignInComponentLoaded() {
                               >
                                 <LinkButton>{t('backButton')}</LinkButton>
                               </SignIn.Action>
-                            </>
+                            </div>
                           );
                         }}
                       </Common.Loading>

packages/ui/src/primitives/field.tsx

@@ -15,6 +15,7 @@ export const Root = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
       ref={forwardedRef}
       {...props}
       className={cx(
+        'has-[[data-field-checkbox]]:[--cl-field-label-cursor:pointer]',
         'has-[[data-field-input][disabled]]:[--cl-field-label-opacity:0.5]',
         'flex flex-col gap-2',
         className,
@@ -41,7 +42,11 @@ export const Label = React.forwardRef(function Label(
       className={cx(
         visuallyHidden
           ? 'sr-only'
-          : 'text-gray-12 flex items-center gap-x-1 text-base font-medium opacity-[--cl-field-label-opacity,1]',
+          : [
+              'text-gray-12 flex items-center gap-x-1 text-base font-medium opacity-[--cl-field-label-opacity,1]',
+              'cursor-[--cl-field-label-cursor,auto]',
+            ],
+
         className,
       )}
     >
@@ -80,6 +85,21 @@ export const Hint = React.forwardRef(function Hint(
   );
 });
 
+export const Checkbox = React.forwardRef(function FieldCheckbox(
+  props: React.InputHTMLAttributes<HTMLInputElement>,
+  forwardedRef: React.ForwardedRef<HTMLInputElement>,
+) {
+  return (
+    <input
+      ref={forwardedRef}
+      type='checkbox'
+      data-field-checkbox
+      className={cx('accent-accent-9 mt-[0.1875em] size-3 cursor-pointer')}
+      {...props}
+    />
+  );
+});
+
 export const Input = React.forwardRef(function Input(
   {
     asChild,