Merge pull request #111 from autonomys/update/tnc

Update onboarding page terms & conditions

frontend/src/app/onboarding/page.tsx

@@ -1,91 +1,25 @@
 'use client';
 
-import { Button } from '@headlessui/react';
+import { Button, Checkbox } from '@headlessui/react';
 import { useCallback, useState } from 'react';
 import { ApiService } from '../../services/api';
-import { Loader } from 'lucide-react';
 import Image from 'next/image';
+import { Disclaimer } from '../../components/common/Disclaimer';
+import { CheckIcon } from 'lucide-react';
 
 export default function OnboardingPage() {
-  const [step, setStep] = useState(0);
-  const [transitioning, setTransitioning] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
+  const [accepted, setAccepted] = useState(false);
 
   const onboardUser = useCallback(async () => {
-    setIsLoading(true);
     ApiService.onboardUser()
       .then(() => {
         window.location.assign('/drive');
       })
       .catch((error) => {
         console.error(error);
-      })
-      .finally(() => {
-        setIsLoading(false);
       });
   }, []);
 
-  const nextStep = useCallback(() => {
-    setTransitioning(true);
-    setTimeout(() => {
-      setStep((a) => a + 1);
-      setTransitioning(false);
-    }, 300); // Match this duration with the CSS transition duration
-  }, []);
-
-  const steps = [
-    <div className='flex flex-col items-center gap-4' key={0}>
-      <span className='text-2xl font-bold'>Welcome to Auto Drive</span>
-      <span className='w-[20rem] text-center text-sm text-gray-500'>
-        Auto-Drive is a file storage and sharing service that allows you to
-        store and share files with others.
-      </span>
-      <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'
-        }
-        onClick={nextStep}
-      >
-        Accept
-      </Button>
-    </div>,
-    <div className='flex flex-col items-center gap-4' key={1}>
-      <span className='text-2xl font-bold'>Terms of Service</span>
-      <span className='text-sm text-gray-500'>
-        Auto-Drive <strong>is public by default.</strong>
-      </span>
-      <span className='text-sm text-gray-500'>
-        You <strong>can setup encryption</strong> but the encrypted file would
-        be public.
-      </span>
-      <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'
-        }
-        onClick={nextStep}
-      >
-        Accept
-      </Button>
-    </div>,
-    <div className='flex flex-col items-center gap-4' key={2}>
-      <span className='text-2xl font-bold'>Terms of Service</span>
-      <span className='text-sm text-gray-500'>
-        Auto-Drive saves files in Autonomy&apos;s network so files{' '}
-        <strong>won&apos;t be able to be deleted</strong> by anyone.
-      </span>
-      <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'
-        }
-        onClick={onboardUser}
-      >
-        {isLoading ? <Loader className='h-4 w-4 animate-spin' /> : 'Accept'}
-      </Button>
-    </div>,
-  ];
-
-  const currentStep = steps[step];
-
   return (
     <div className='flex h-screen flex-col items-center justify-center'>
       <header className='mb-8 flex flex-col items-center justify-between gap-4 md:flex-row md:gap-0'>
@@ -94,12 +28,37 @@ export default function OnboardingPage() {
           <span className='text-xl font-semibold'>Auto Drive</span>
         </div>
       </header>
-      <div
-        className={`transition-opacity duration-300 ${
-          transitioning ? 'opacity-0' : 'opacity-100'
-        }`}
-      >
-        {currentStep}
+      <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 disabled:opacity-50'
+          }
+          disabled={!accepted}
+          onClick={onboardUser}
+        >
+          Start
+        </Button>
       </div>
     </div>
   );

frontend/src/components/common/Disclaimer.tsx

@@ -2,14 +2,15 @@ export const Disclaimer = () => {
   return (
     <div className='relative rounded-lg border border-red-300 bg-red-50 bg-opacity-60 p-4'>
       <h3 className='mb-2 font-semibold'>Please, note:</h3>
-      <ul className='list-inside list-disc space-y-1 text-sm'>
+      <ul className='list-inside list-disc space-y-1 text-sm font-bold'>
         <li>Uploaded content will be visible and searchable by everyone</li>
         <li>Anyone can download your files</li>
-        <li>Storage is permanent and irreversible</li>
         <li>
-          Your uploads & downloads are limitted to <strong>100MB</strong> and{' '}
-          <strong>5GB</strong> monthly respectively
+          Files are stored on Autonomy&apos;s network so they can&apos;t be
+          deleted by anyone
         </li>
+        <li>Storage is permanent and irreversible</li>
+        <li>Encryption is available but the encrypted file will be public</li>
       </ul>
     </div>
   );