add: checkbox for accepting tnc

autonomys · Dec 2, 2024 · db5c1ef · db5c1ef
1 parent 0791042
commit db5c1ef
Showing 1 changed file with 28 additions and 4 deletions.
diff --git a/frontend/src/app/onboarding/page.tsx b/frontend/src/app/onboarding/page.tsx
@@ -1,12 +1,15 @@
 'use client';
 
-import { Button } from '@headlessui/react';
-import { useCallback } from 'react';
+import { Button, Checkbox } from '@headlessui/react';
+import { useCallback, useState } from 'react';
 import { ApiService } from '../../services/api';
 import Image from 'next/image';
 import { Disclaimer } from '../../components/common/Disclaimer';
+import { CheckIcon } from 'lucide-react';
 
 export default function OnboardingPage() {
+  const [accepted, setAccepted] = useState(false);
+
   const onboardUser = useCallback(async () => {
     ApiService.onboardUser()
       .then(() => {
@@ -27,13 +30,34 @@ export default function OnboardingPage() {
       </header>
       <div className='flex flex-col items-center gap-4'>
         <Disclaimer />
+        <div className='flex items-center gap-2'>
+          <Checkbox
+            checked={accepted}
+            onChange={() => setAccepted((e) => !e)}
+            className='group relative block size-4 rounded border bg-white data-[checked]:bg-blue-500'
+          >
+            <CheckIcon className='absolute left-1/2 top-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 stroke-white opacity-0 group-data-[checked]:opacity-100' />
+          </Checkbox>
+          <span className='text-sm'>
+            I have read and I accept the{' '}
+            <a
+              rel='noreferrer'
+              target='_blank'
+              href='https://www.autonomys.xyz/terms-of-use'
+              className='underline'
+            >
+              terms and conditions
+            </a>
+          </span>
+        </div>
         <Button
           className={
-            'rounded bg-black px-4 py-1 font-semibold text-white opacity-100 transition-all duration-300 hover:scale-105 hover:bg-gray-800'
+            'rounded bg-black px-4 py-1 font-semibold text-white opacity-100 transition-all duration-300 hover:scale-105 hover:bg-gray-800 disabled:opacity-50'
           }
+          disabled={!accepted}
           onClick={onboardUser}
         >
-          Accept
+          Start
         </Button>
       </div>
     </div>