+
+
+ My Profile
+
+
+ My Group
+
+
+ Admin
+
+
+ Log out
+
+
+
+ )}
+
+
+
+ setIsMenuOpen(false)}
+ >
+ Search
+
+
+
+ setIsMenuOpen(false)}
+ >
+ Axé
+
+
+
+ setIsMenuOpen(false)}
+ >
+ Organization
+
+
+
+
+
+
);
};
diff --git a/packages/app/components/OnboardingModal.tsx b/packages/app/components/OnboardingModal.tsx
new file mode 100644
index 0000000..fb993d4
--- /dev/null
+++ b/packages/app/components/OnboardingModal.tsx
@@ -0,0 +1,75 @@
+'use client';
+
+import { Button } from '@nextui-org/button';
+import { Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, useDisclosure } from '@nextui-org/modal';
+import { useAtomValue } from 'jotai';
+import { useCallback, useEffect } from 'react';
+
+import { PATHS } from '@/config/constants';
+import { currentUserAtom } from '@/hooks/state/currentUser';
+import { getCookie, setCookie } from 'cookies-next';
+import { useRouter } from 'next/navigation';
+
+/**
+ * This modal automatically opens on first login (and page reload) if the user hasn't filled out
+ * at least a name or nickname. It sets a cookie that expires after 24 hours to prevent the modal from
+ * showing up again. If the user still hasn't completed the described fields after that
+ * time, the modal would be displayed again.
+ */
+const OnboardingModal = () => {
+ const { isOpen, onOpen, onOpenChange } = useDisclosure();
+ const router = useRouter();
+ const { data: user } = useAtomValue(currentUserAtom);
+
+ useEffect(() => {
+ if (user && !user.name && !user.nickname) {
+ const skipOnboarding = getCookie('quilombo.skipOnboarding');
+ if (skipOnboarding === 'true') return;
+ onOpen();
+ }
+ }, [user, onOpen]);
+
+ const handleClose = useCallback(
+ async (target: string) => {
+ setCookie('quilombo.skipOnboarding', true, {
+ expires: new Date(Date.now() + 1000 * 60 * 60 * 24), // we give the user 24 hrs before reminding again
+ });
+
+ router.push(target);
+ },
+ [router],
+ );
+
+ return (
+
+
+ {(onClose) => (
+ <>
+ Hi There! Que bom te ver.
+
+
+ Nice to meet you! You probably just signed up or haven't filled out some basic information, yet, so
+ we don't know how to address you.
+
+
Do you have a nickname? Are you a mestre or mestra ... or initiante? Which group do you belong to?
+
+ Head over to 'My Profile' and let the community know who you are. You can also do this
+ later at any time by going to 'My Profile' in the user menu on the top right.
+
-
- Silk
- {' '}
- is a digital identity app that allows you to securely use the Quilombo App. Please click the below button
- and follow the instructions to create a Silk account or log into an existing one.
-
+ Here at Quilombo we use a ‘Digital Identity’ for login and to manage your Capoeira
+ profile. A digital identity is a secure way to prove who you are online. This is done with the help of
+ our partner{' '}
+
+ Silk
+
+ .
+
+
+ If you don't have a Silk account, yet, you can create one in a few easy steps and it's free:
+
+
+
+ Click on Connect with Silk
+
+
Enter your email and continue
+
Choose a name and a password and submit
+
Check your email inbox for a confirmation link from Silk and click it
+
+ Complete a bot challenge with a slider to proof you're human.
+
+
+
+ Important: logging into your Silk account always requires both steps: your password and
+ clicking a confirmation link sent via email.
+
+
+ After your Silk account is connected, you can sign in to Quilombo by{' '}
+ ‘signing a message’. This digital signature proves that you have unlocked your Silk
+ account 😉
+