Skip to content

Commit 257e118

Browse files
omar-bearomar-bear
committed
feat(demo): add DemoModeWarningModal and integrate with LoginPage; remove EnvironmentVariablesModal
1 parent 24b1208 commit 257e118

File tree

8 files changed

+146
-136
lines changed

8 files changed

+146
-136
lines changed

‎.env.example‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@ API_URL='https://demo.start-ui.com/api/rest'
22
OPEN_API_URL='https://demo.start-ui.com/api/openapi/app/schema'
33
BETTER_AUTH_OPEN_API='https://demo.start-ui.com/api/openapi/auth/schema'
44
MODE="DEV"
5+
DEMO_MODE=false

‎src/components/DemoModeWarningModal/DemoModeWarningModal.tsx‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import React from 'react';
2+
3+
import { useTranslation } from 'react-i18next';
4+
import {
5+
Box,
6+
DraggableModal,
7+
Flex,
8+
Text,
9+
VStack,
10+
useColorModeValue,
11+
} from 'react-native-ficus-ui';
12+
13+
import { ButtonIcon } from '../ButtonIcon';
14+
15+
interface DemoModeWarningModalProps {
16+
isOpen: boolean;
17+
onClose: () => void;
18+
}
19+
20+
export const DemoModeWarningModal: React.FC<DemoModeWarningModalProps> = ({
21+
isOpen,
22+
onClose,
23+
}) => {
24+
const { t } = useTranslation();
25+
const textColor = useColorModeValue('neutral.700', 'neutral.200');
26+
const sectionBgColor = useColorModeValue('neutral.50', 'neutral.800');
27+
28+
return (
29+
<DraggableModal
30+
isOpen={isOpen}
31+
onClose={onClose}
32+
h={450}
33+
android_keyboardInputMode="adjustResize"
34+
>
35+
<Flex p="xl" pt="md">
36+
<Box mb="lg">
37+
<Text fontWeight="bold" fontSize="xl" mb="sm">
38+
👋 {t('auth:demoMode.title')}
39+
</Text>
40+
</Box>
41+
42+
<VStack spacing="md">
43+
<Text color={textColor} fontSize="md">
44+
{t('auth:demoMode.description')}
45+
</Text>
46+
47+
<Text color={textColor} fontSize="md" fontWeight="semibold">
48+
{t('auth:demoMode.enableGithub')}
49+
</Text>
50+
51+
{/* Option 1 */}
52+
<Box bg={sectionBgColor} p="md" borderRadius="md">
53+
<Text fontWeight="bold" fontSize="sm" color={textColor} mb="xs">
54+
{t('auth:demoMode.option1Title')}
55+
</Text>
56+
<VStack spacing="xs">
57+
<Text fontSize="sm" color={textColor}>
58+
{t('auth:demoMode.option1Step1')}
59+
</Text>
60+
<Text fontSize="sm" color={textColor}>
61+
{t('auth:demoMode.option1Step2')}
62+
</Text>
63+
<Text fontSize="sm" color={textColor}>
64+
{t('auth:demoMode.option1Step3')}
65+
</Text>
66+
</VStack>
67+
</Box>
68+
69+
{/* Option 2 */}
70+
<Box bg={sectionBgColor} p="md" borderRadius="md">
71+
<Text fontWeight="bold" fontSize="sm" color={textColor} mb="xs">
72+
{t('auth:demoMode.option2Title')}
73+
</Text>
74+
<VStack spacing="xs">
75+
<Text fontSize="sm" color={textColor}>
76+
{t('auth:demoMode.option2Step1')}
77+
</Text>
78+
<Text fontSize="sm" color={textColor}>
79+
{t('auth:demoMode.option2Step2')}
80+
</Text>
81+
<Text fontSize="sm" color={textColor}>
82+
{t('auth:demoMode.option2Step3')}
83+
</Text>
84+
</VStack>
85+
</Box>
86+
</VStack>
87+
88+
<VStack spacing="md" mt="lg">
89+
<ButtonIcon colorScheme="blue" onPress={onClose} full>
90+
{t('auth:demoMode.understand')}
91+
</ButtonIcon>
92+
</VStack>
93+
</Flex>
94+
</DraggableModal>
95+
);
96+
};

‎src/components/DemoModeWarningModal/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { DemoModeWarningModal } from './DemoModeWarningModal';

‎src/components/EnvironmentVariablesModal/EnvironmentVariablesModal.tsx‎

Lines changed: 0 additions & 120 deletions
This file was deleted.

‎src/components/EnvironmentVariablesModal/index.tsx‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/locales/en/auth.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,19 @@
1010
"step4": "Try logging in with GitHub again",
1111
"documentation": "Check the documentation for setup instructions",
1212
"understand": "I Understand"
13+
},
14+
"demoMode": {
15+
"title": "Demo Mode",
16+
"description": "This demo is connected to the Start UI Web demo environment. Social login is disabled for security reasons.",
17+
"enableGithub": "To enable GitHub login, you have two options:",
18+
"option1Title": "Option 1 - Deploy your own:",
19+
"option1Step1": "1. Deploy your own Start UI Web instance",
20+
"option1Step2": "2. Configure your GitHub Client ID and Secret",
21+
"option1Step3": "3. Set DEMO_MODE=false",
22+
"option2Title": "Option 2 - Run locally:",
23+
"option2Step1": "1. Run Start UI Web locally",
24+
"option2Step2": "2. Configure your GitHub Client ID and Secret",
25+
"option2Step3": "3. Connect using your IP address instead of localhost",
26+
"understand": "I Understand"
1327
}
1428
}

‎src/locales/fr/auth.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,19 @@
1010
"step4": "Essayez de vous connecter avec GitHub à nouveau",
1111
"documentation": "Consultez la documentation pour les instructions de configuration",
1212
"understand": "J'ai compris"
13+
},
14+
"demoMode": {
15+
"title": "Mode Démo",
16+
"description": "Cette démo est connectée à l'environnement de démonstration Start UI Web. La connexion sociale est désactivée pour des raisons de sécurité.",
17+
"enableGithub": "Pour activer la connexion GitHub, vous avez deux options :",
18+
"option1Title": "Option 1 - Déployer le vôtre :",
19+
"option1Step1": "1. Déployez votre propre instance Start UI Web",
20+
"option1Step2": "2. Configurez votre Client ID et Secret GitHub",
21+
"option1Step3": "3. Définissez DEMO_MODE=false",
22+
"option2Title": "Option 2 - Exécuter localement :",
23+
"option2Step1": "1. Exécutez Start UI Web localement",
24+
"option2Step2": "2. Configurez votre Client ID et Secret GitHub",
25+
"option2Step3": "3. Connectez-vous en utilisant votre adresse IP au lieu de localhost",
26+
"understand": "J'ai Compris"
1327
}
1428
}

‎src/modules/auth/pages/LoginPage.tsx‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ import {
99
HStack,
1010
Text,
1111
useColorModeValue,
12+
useDisclosure,
1213
} from 'react-native-ficus-ui';
1314

14-
import { EnvironmentVariablesModal } from '@/components/EnvironmentVariablesModal';
15+
import { DemoModeWarningModal } from '@/components/DemoModeWarningModal';
1516
import { FieldInput } from '@/components/FieldInput';
16-
import { useEnvironmentCheck } from '@/hooks/useEnvironmentCheck';
1717
import { Container } from '@/layout/Container';
1818
import { Content } from '@/layout/Content';
1919
import { authClient } from '@/lib/auth-client';
@@ -49,11 +49,10 @@ const LoginPage = () => {
4949
const { showError } = useToast();
5050
const router = useRouter();
5151
const {
52-
isModalVisible,
53-
missingVariables,
54-
showEnvironmentModal,
55-
hideEnvironmentModal,
56-
} = useEnvironmentCheck();
52+
isOpen: isOpenDemoWarning,
53+
onOpen: onOpenDemoWarning,
54+
onClose: closeDemoWarning,
55+
} = useDisclosure();
5756

5857
const loginForm = useForm<{ email: string }>({
5958
onValidSubmit: async ({ email }) => {
@@ -104,10 +103,17 @@ const LoginPage = () => {
104103
});
105104

106105
const handleGitHubLogin = () => {
107-
const canProceed = showEnvironmentModal();
108-
if (canProceed) {
109-
social.mutate('github');
106+
// Check if demo mode is active
107+
if (process.env.DEMO_MODE === 'true') {
108+
onOpenDemoWarning();
109+
return;
110110
}
111+
112+
social.mutate('github');
113+
};
114+
115+
const handleDemoWarningClose = () => {
116+
closeDemoWarning();
111117
};
112118

113119
return (
@@ -171,18 +177,17 @@ const LoginPage = () => {
171177
<Button
172178
variant="outline"
173179
full
174-
isLoading={social.isLoading}
180+
// isLoading={social.isLoading}
175181
onPress={handleGitHubLogin}
176182
>
177183
{t('login:actions.loginWithGitHub')}
178184
</Button>
179185
</Content>
180186
</Formiz>
181187

182-
<EnvironmentVariablesModal
183-
isOpen={isModalVisible}
184-
onClose={hideEnvironmentModal}
185-
missingVariables={missingVariables}
188+
<DemoModeWarningModal
189+
isOpen={isOpenDemoWarning}
190+
onClose={handleDemoWarningClose}
186191
/>
187192
</Container>
188193
);

0 commit comments

Comments
 (0)