Initial commit: GBCM Mobile App React Native with authentication and services
This commit is contained in:
dahoud
112
.gitignore
vendored
Normal file
112
.gitignore
vendored
Normal file
@@ -0,0 +1,112 @@
|
||||
# React Native
|
||||
|
||||
# OSX
|
||||
.DS_Store
|
||||
|
||||
# Xcode
|
||||
build/
|
||||
*.pbxuser
|
||||
!default.pbxuser
|
||||
*.mode1v3
|
||||
!default.mode1v3
|
||||
*.mode2v3
|
||||
!default.mode2v3
|
||||
*.perspectivev3
|
||||
!default.perspectivev3
|
||||
xcuserdata
|
||||
*.xccheckout
|
||||
*.moved-aside
|
||||
DerivedData
|
||||
*.hmap
|
||||
*.ipa
|
||||
*.xcuserstate
|
||||
project.xcworkspace
|
||||
|
||||
# Android/IntelliJ
|
||||
build/
|
||||
.idea
|
||||
.gradle
|
||||
local.properties
|
||||
*.iml
|
||||
*.hprof
|
||||
.cxx/
|
||||
|
||||
# node.js
|
||||
node_modules/
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
|
||||
# BUCK
|
||||
buck-out/
|
||||
\.buckd/
|
||||
*.keystore
|
||||
!debug.keystore
|
||||
|
||||
# Bundle artifacts
|
||||
*.jsbundle
|
||||
|
||||
# CocoaPods
|
||||
/ios/Pods/
|
||||
|
||||
# Expo
|
||||
.expo/
|
||||
web-build/
|
||||
|
||||
# Flipper
|
||||
ios/Flipper-Folly
|
||||
|
||||
# Environment variables
|
||||
.env
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
# Temporary files
|
||||
*.tmp
|
||||
*.temp
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# Metro
|
||||
.metro-health-check*
|
||||
|
||||
# Testing
|
||||
coverage/
|
||||
|
||||
# Detox
|
||||
e2e/artifacts/
|
||||
|
||||
# TypeScript
|
||||
*.tsbuildinfo
|
||||
|
||||
# VS Code
|
||||
.vscode/
|
||||
|
||||
# Watchman
|
||||
.watchmanconfig
|
||||
|
||||
# React Native CLI
|
||||
.react-native-cli.config.js
|
||||
|
||||
# Fastlane
|
||||
ios/fastlane/report.xml
|
||||
ios/fastlane/Preview.html
|
||||
ios/fastlane/screenshots
|
||||
ios/fastlane/test_output
|
||||
android/fastlane/report.xml
|
||||
android/fastlane/Preview.html
|
||||
android/fastlane/screenshots
|
||||
android/fastlane/test_output
|
||||
|
||||
# Bundle artifact
|
||||
*.jsbundle
|
||||
|
||||
# Ruby / CocoaPods
|
||||
/ios/Pods/
|
||||
/vendor/bundle/
|
||||
|
||||
# Temporary files created by Metro to check the health of the file watcher
|
||||
.metro-health-check*
|
||||
283
README.md
Normal file
283
README.md
Normal file
@@ -0,0 +1,283 @@
|
||||
# GBCM Mobile App
|
||||
|
||||
Application mobile pour la plateforme GBCM (Global Business Consulting and Management) développée avec React Native.
|
||||
|
||||
## Description
|
||||
|
||||
Application mobile native iOS et Android permettant aux utilisateurs GBCM d'accéder à leurs services de coaching, ateliers et tableaux de bord depuis leurs appareils mobiles.
|
||||
|
||||
## Technologies
|
||||
|
||||
- **React Native 0.72.6** - Framework mobile cross-platform
|
||||
- **React 18.2.0** - Bibliothèque UI
|
||||
- **React Navigation 6** - Navigation
|
||||
- **Redux Toolkit** - Gestion d'état
|
||||
- **React Native Paper** - Composants Material Design
|
||||
- **React Hook Form** - Gestion des formulaires
|
||||
- **Axios** - Client HTTP
|
||||
- **React Native Keychain** - Stockage sécurisé
|
||||
- **React Native Chart Kit** - Graphiques
|
||||
- **React Native Calendars** - Calendrier
|
||||
|
||||
## Prérequis
|
||||
|
||||
### Environnement de développement
|
||||
- Node.js 16+
|
||||
- npm ou yarn
|
||||
- React Native CLI
|
||||
- Java 11+ (Android)
|
||||
- Xcode 14+ (iOS)
|
||||
- Android Studio (Android)
|
||||
|
||||
### Appareils/Simulateurs
|
||||
- iOS Simulator (macOS uniquement)
|
||||
- Android Emulator
|
||||
- Appareils physiques iOS/Android
|
||||
|
||||
## Installation
|
||||
|
||||
1. Cloner le repository
|
||||
```bash
|
||||
git clone https://git.lions.dev/gbcm/gbcm-mobile-app.git
|
||||
cd gbcm-mobile-app
|
||||
```
|
||||
|
||||
2. Installer les dépendances
|
||||
```bash
|
||||
npm install
|
||||
# ou
|
||||
yarn install
|
||||
```
|
||||
|
||||
3. Installation des pods iOS (macOS uniquement)
|
||||
```bash
|
||||
cd ios && pod install && cd ..
|
||||
```
|
||||
|
||||
4. Configuration
|
||||
Copier `.env.example` vers `.env` et configurer :
|
||||
```
|
||||
API_BASE_URL=https://api.gbcm.com/v1
|
||||
API_TIMEOUT=10000
|
||||
ENVIRONMENT=development
|
||||
```
|
||||
|
||||
## Développement
|
||||
|
||||
### Démarrage du Metro bundler
|
||||
```bash
|
||||
npm start
|
||||
# ou
|
||||
yarn start
|
||||
```
|
||||
|
||||
### Lancement sur iOS
|
||||
```bash
|
||||
npm run ios
|
||||
# ou
|
||||
yarn ios
|
||||
```
|
||||
|
||||
### Lancement sur Android
|
||||
```bash
|
||||
npm run android
|
||||
# ou
|
||||
yarn android
|
||||
```
|
||||
|
||||
### Tests
|
||||
```bash
|
||||
npm test
|
||||
# ou
|
||||
yarn test
|
||||
```
|
||||
|
||||
## Structure du projet
|
||||
|
||||
```
|
||||
src/
|
||||
├── components/ # Composants réutilisables
|
||||
│ ├── common/ # Composants communs
|
||||
│ ├── forms/ # Composants de formulaires
|
||||
│ └── charts/ # Graphiques
|
||||
├── screens/ # Écrans de l'application
|
||||
│ ├── auth/ # Authentification
|
||||
│ ├── dashboard/ # Tableaux de bord
|
||||
│ ├── coaching/ # Sessions de coaching
|
||||
│ ├── workshops/ # Ateliers
|
||||
│ └── profile/ # Profil utilisateur
|
||||
├── navigation/ # Configuration navigation
|
||||
├── services/ # Services API
|
||||
├── store/ # Gestion d'état Redux
|
||||
├── utils/ # Utilitaires
|
||||
└── assets/ # Ressources statiques
|
||||
```
|
||||
|
||||
## Fonctionnalités
|
||||
|
||||
### Authentification
|
||||
- Connexion/déconnexion sécurisée
|
||||
- Authentification biométrique (Touch ID/Face ID)
|
||||
- Stockage sécurisé des tokens
|
||||
- Gestion des sessions
|
||||
|
||||
### Dashboard
|
||||
- Vue d'ensemble personnalisée
|
||||
- Métriques et KPIs
|
||||
- Notifications push
|
||||
- Accès rapide aux services
|
||||
|
||||
### Coaching
|
||||
- Liste des sessions programmées
|
||||
- Détails des sessions
|
||||
- Historique des sessions
|
||||
- Évaluation des sessions
|
||||
|
||||
### Ateliers
|
||||
- Catalogue des ateliers disponibles
|
||||
- Inscription aux ateliers
|
||||
- Calendrier des événements
|
||||
- Matériel de formation
|
||||
|
||||
### Profil
|
||||
- Informations personnelles
|
||||
- Paramètres de l'application
|
||||
- Préférences de notification
|
||||
- Support et aide
|
||||
|
||||
## Services API
|
||||
|
||||
### Configuration
|
||||
```javascript
|
||||
// src/services/api.js
|
||||
const API_BASE_URL = 'https://api.gbcm.com/v1';
|
||||
```
|
||||
|
||||
### Services disponibles
|
||||
- `authService` - Authentification
|
||||
- `userService` - Gestion utilisateur
|
||||
- `coachingService` - Services de coaching
|
||||
- `workshopService` - Gestion des ateliers
|
||||
- `notificationService` - Notifications
|
||||
|
||||
## Gestion d'état
|
||||
|
||||
### Redux Store
|
||||
```javascript
|
||||
// Structure du store
|
||||
{
|
||||
auth: {
|
||||
user: null,
|
||||
token: null,
|
||||
isAuthenticated: false,
|
||||
loading: false
|
||||
},
|
||||
coaching: {
|
||||
sessions: [],
|
||||
currentSession: null
|
||||
},
|
||||
workshops: {
|
||||
available: [],
|
||||
registered: []
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Navigation
|
||||
|
||||
### Structure de navigation
|
||||
- **Auth Stack** - Écrans d'authentification
|
||||
- **Main Tab Navigator** - Navigation principale
|
||||
- Dashboard
|
||||
- Coaching
|
||||
- Ateliers
|
||||
- Profil
|
||||
- **Modal Stack** - Écrans modaux
|
||||
|
||||
## Build et déploiement
|
||||
|
||||
### Build Android
|
||||
```bash
|
||||
cd android
|
||||
./gradlew assembleRelease
|
||||
```
|
||||
|
||||
### Build iOS
|
||||
```bash
|
||||
cd ios
|
||||
xcodebuild -workspace GBCMMobile.xcworkspace \
|
||||
-scheme GBCMMobile \
|
||||
-configuration Release \
|
||||
-destination generic/platform=iOS \
|
||||
-archivePath GBCMMobile.xcarchive archive
|
||||
```
|
||||
|
||||
### Distribution
|
||||
- **Android**: Google Play Store
|
||||
- **iOS**: Apple App Store
|
||||
- **Enterprise**: Distribution interne
|
||||
|
||||
## Tests
|
||||
|
||||
### Tests unitaires
|
||||
```bash
|
||||
npm run test:unit
|
||||
```
|
||||
|
||||
### Tests d'intégration
|
||||
```bash
|
||||
npm run test:integration
|
||||
```
|
||||
|
||||
### Tests E2E avec Detox
|
||||
```bash
|
||||
npm run test:e2e:ios
|
||||
npm run test:e2e:android
|
||||
```
|
||||
|
||||
## Performance
|
||||
|
||||
### Optimisations
|
||||
- Lazy loading des écrans
|
||||
- Mise en cache des images
|
||||
- Optimisation des re-renders
|
||||
- Bundle splitting
|
||||
|
||||
### Monitoring
|
||||
- Crash reporting (Crashlytics)
|
||||
- Performance monitoring
|
||||
- Analytics utilisateur
|
||||
|
||||
## Sécurité
|
||||
|
||||
### Stockage sécurisé
|
||||
- Tokens dans Keychain/Keystore
|
||||
- Chiffrement des données sensibles
|
||||
- Validation côté client
|
||||
|
||||
### Communication
|
||||
- HTTPS uniquement
|
||||
- Certificate pinning
|
||||
- Validation des certificats
|
||||
|
||||
## Configuration
|
||||
|
||||
### Variables d'environnement
|
||||
- `API_BASE_URL` - URL de l'API
|
||||
- `API_TIMEOUT` - Timeout des requêtes
|
||||
- `ENVIRONMENT` - Environnement (dev/staging/prod)
|
||||
|
||||
### Configuration par environnement
|
||||
- `config/development.js`
|
||||
- `config/staging.js`
|
||||
- `config/production.js`
|
||||
|
||||
## Support
|
||||
|
||||
- Email: mobile-support@gbcm.com
|
||||
- Documentation: https://docs.gbcm.com/mobile
|
||||
- Issues: https://git.lions.dev/gbcm/gbcm-mobile-app/issues
|
||||
|
||||
## Licence
|
||||
|
||||
Propriétaire - GBCM LLC © 2024
|
||||
93
package.json
Normal file
93
package.json
Normal file
@@ -0,0 +1,93 @@
|
||||
{
|
||||
"name": "gbcm-mobile-app",
|
||||
"version": "1.0.0",
|
||||
"description": "Application mobile GBCM pour iOS et Android",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"android": "react-native run-android",
|
||||
"ios": "react-native run-ios",
|
||||
"start": "react-native start",
|
||||
"test": "jest",
|
||||
"lint": "eslint . --ext .js,.jsx,.ts,.tsx",
|
||||
"build:android": "cd android && ./gradlew assembleRelease",
|
||||
"build:ios": "cd ios && xcodebuild -workspace GBCMMobile.xcworkspace -scheme GBCMMobile -configuration Release -destination generic/platform=iOS -archivePath GBCMMobile.xcarchive archive",
|
||||
"clean": "react-native clean-project-auto",
|
||||
"postinstall": "cd ios && pod install"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "18.2.0",
|
||||
"react-native": "0.72.6",
|
||||
"@react-navigation/native": "^6.1.9",
|
||||
"@react-navigation/stack": "^6.3.20",
|
||||
"@react-navigation/bottom-tabs": "^6.5.11",
|
||||
"@react-navigation/drawer": "^6.6.6",
|
||||
"react-native-screens": "^3.27.0",
|
||||
"react-native-safe-area-context": "^4.7.4",
|
||||
"react-native-gesture-handler": "^2.13.4",
|
||||
"react-native-reanimated": "^3.5.4",
|
||||
"@reduxjs/toolkit": "^1.9.7",
|
||||
"react-redux": "^8.1.3",
|
||||
"redux-persist": "^6.0.0",
|
||||
"axios": "^1.6.0",
|
||||
"react-native-keychain": "^8.1.3",
|
||||
"react-native-vector-icons": "^10.0.2",
|
||||
"react-native-paper": "^5.11.1",
|
||||
"react-native-chart-kit": "^6.12.0",
|
||||
"react-native-svg": "^13.14.0",
|
||||
"react-native-calendars": "^1.1301.0",
|
||||
"react-native-image-picker": "^7.0.3",
|
||||
"react-native-permissions": "^3.10.1",
|
||||
"react-native-push-notification": "^8.1.1",
|
||||
"@react-native-async-storage/async-storage": "^1.19.5",
|
||||
"react-native-device-info": "^10.11.0",
|
||||
"react-native-biometrics": "^3.0.1",
|
||||
"react-native-config": "^1.5.1",
|
||||
"react-native-splash-screen": "^3.3.0",
|
||||
"react-hook-form": "^7.47.0",
|
||||
"yup": "^1.3.3",
|
||||
"@hookform/resolvers": "^3.3.2",
|
||||
"date-fns": "^2.30.0",
|
||||
"lodash": "^4.17.21"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.20.0",
|
||||
"@babel/preset-env": "^7.20.0",
|
||||
"@babel/runtime": "^7.20.0",
|
||||
"@react-native/eslint-config": "^0.72.2",
|
||||
"@react-native/metro-config": "^0.72.11",
|
||||
"@tsconfig/react-native": "^3.0.0",
|
||||
"@types/react": "^18.0.24",
|
||||
"@types/react-test-renderer": "^18.0.0",
|
||||
"babel-jest": "^29.2.1",
|
||||
"eslint": "^8.19.0",
|
||||
"jest": "^29.2.1",
|
||||
"metro-react-native-babel-preset": "0.76.8",
|
||||
"prettier": "^2.4.1",
|
||||
"react-test-renderer": "18.2.0",
|
||||
"typescript": "4.8.4",
|
||||
"@types/lodash": "^4.14.200",
|
||||
"detox": "^20.13.5",
|
||||
"flipper-plugin-redux-debugger": "^0.8.7"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16"
|
||||
},
|
||||
"jest": {
|
||||
"preset": "react-native",
|
||||
"setupFilesAfterEnv": ["<rootDir>/jest.setup.js"],
|
||||
"transformIgnorePatterns": [
|
||||
"node_modules/(?!(react-native|@react-native|react-native-vector-icons|react-native-paper)/)"
|
||||
]
|
||||
},
|
||||
"keywords": [
|
||||
"react-native",
|
||||
"mobile",
|
||||
"gbcm",
|
||||
"coaching",
|
||||
"consulting",
|
||||
"business"
|
||||
],
|
||||
"author": "GBCM LLC",
|
||||
"license": "Proprietary",
|
||||
"private": true
|
||||
}
|
||||
264
src/screens/auth/LoginScreen.js
Normal file
264
src/screens/auth/LoginScreen.js
Normal file
@@ -0,0 +1,264 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
View,
|
||||
StyleSheet,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
ScrollView,
|
||||
Alert,
|
||||
} from 'react-native';
|
||||
import {
|
||||
TextInput,
|
||||
Button,
|
||||
Card,
|
||||
Title,
|
||||
Paragraph,
|
||||
Checkbox,
|
||||
ActivityIndicator,
|
||||
useTheme,
|
||||
} from 'react-native-paper';
|
||||
import { useForm, Controller } from 'react-hook-form';
|
||||
import { yupResolver } from '@hookform/resolvers/yup';
|
||||
import * as yup from 'yup';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { loginUser } from '../../store/slices/authSlice';
|
||||
|
||||
// Schéma de validation
|
||||
const loginSchema = yup.object().shape({
|
||||
email: yup
|
||||
.string()
|
||||
.email('Format d\'email invalide')
|
||||
.required('L\'email est obligatoire'),
|
||||
password: yup
|
||||
.string()
|
||||
.min(6, 'Le mot de passe doit contenir au moins 6 caractères')
|
||||
.required('Le mot de passe est obligatoire'),
|
||||
});
|
||||
|
||||
const LoginScreen = ({ navigation }) => {
|
||||
const theme = useTheme();
|
||||
const dispatch = useDispatch();
|
||||
const { loading, error } = useSelector((state) => state.auth);
|
||||
const [rememberMe, setRememberMe] = useState(false);
|
||||
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm({
|
||||
resolver: yupResolver(loginSchema),
|
||||
defaultValues: {
|
||||
email: '',
|
||||
password: '',
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = async (data) => {
|
||||
try {
|
||||
const loginData = {
|
||||
...data,
|
||||
rememberMe,
|
||||
};
|
||||
|
||||
const result = await dispatch(loginUser(loginData)).unwrap();
|
||||
|
||||
if (result.success) {
|
||||
// Navigation gérée automatiquement par le store
|
||||
Alert.alert('Succès', 'Connexion réussie !');
|
||||
}
|
||||
} catch (error) {
|
||||
Alert.alert('Erreur', error.message || 'Erreur de connexion');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
style={styles.container}
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
||||
>
|
||||
<ScrollView contentContainerStyle={styles.scrollContainer}>
|
||||
<View style={styles.logoContainer}>
|
||||
<Title style={[styles.title, { color: theme.colors.primary }]}>
|
||||
GBCM
|
||||
</Title>
|
||||
<Paragraph style={styles.subtitle}>
|
||||
Global Business Consulting and Management
|
||||
</Paragraph>
|
||||
</View>
|
||||
|
||||
<Card style={styles.card}>
|
||||
<Card.Content>
|
||||
<Title style={styles.cardTitle}>Connexion</Title>
|
||||
|
||||
<Controller
|
||||
control={control}
|
||||
name="email"
|
||||
render={({ field: { onChange, onBlur, value } }) => (
|
||||
<TextInput
|
||||
label="Email"
|
||||
mode="outlined"
|
||||
value={value}
|
||||
onBlur={onBlur}
|
||||
onChangeText={onChange}
|
||||
error={!!errors.email}
|
||||
keyboardType="email-address"
|
||||
autoCapitalize="none"
|
||||
autoComplete="email"
|
||||
style={styles.input}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.email && (
|
||||
<Paragraph style={styles.errorText}>
|
||||
{errors.email.message}
|
||||
</Paragraph>
|
||||
)}
|
||||
|
||||
<Controller
|
||||
control={control}
|
||||
name="password"
|
||||
render={({ field: { onChange, onBlur, value } }) => (
|
||||
<TextInput
|
||||
label="Mot de passe"
|
||||
mode="outlined"
|
||||
value={value}
|
||||
onBlur={onBlur}
|
||||
onChangeText={onChange}
|
||||
error={!!errors.password}
|
||||
secureTextEntry
|
||||
autoComplete="password"
|
||||
style={styles.input}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.password && (
|
||||
<Paragraph style={styles.errorText}>
|
||||
{errors.password.message}
|
||||
</Paragraph>
|
||||
)}
|
||||
|
||||
<View style={styles.checkboxContainer}>
|
||||
<Checkbox
|
||||
status={rememberMe ? 'checked' : 'unchecked'}
|
||||
onPress={() => setRememberMe(!rememberMe)}
|
||||
/>
|
||||
<Paragraph style={styles.checkboxLabel}>
|
||||
Se souvenir de moi
|
||||
</Paragraph>
|
||||
</View>
|
||||
|
||||
{error && (
|
||||
<Paragraph style={styles.errorText}>
|
||||
{error}
|
||||
</Paragraph>
|
||||
)}
|
||||
|
||||
<Button
|
||||
mode="contained"
|
||||
onPress={handleSubmit(onSubmit)}
|
||||
disabled={loading}
|
||||
style={styles.loginButton}
|
||||
contentStyle={styles.loginButtonContent}
|
||||
>
|
||||
{loading ? (
|
||||
<ActivityIndicator color={theme.colors.onPrimary} />
|
||||
) : (
|
||||
'Se connecter'
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<View style={styles.linkContainer}>
|
||||
<Button
|
||||
mode="text"
|
||||
onPress={() => navigation.navigate('ForgotPassword')}
|
||||
style={styles.linkButton}
|
||||
>
|
||||
Mot de passe oublié ?
|
||||
</Button>
|
||||
</View>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
|
||||
<View style={styles.footer}>
|
||||
<Paragraph style={styles.footerText}>
|
||||
© 2024 GBCM LLC - Version 1.0.0
|
||||
</Paragraph>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#f5f5f5',
|
||||
},
|
||||
scrollContainer: {
|
||||
flexGrow: 1,
|
||||
justifyContent: 'center',
|
||||
padding: 20,
|
||||
},
|
||||
logoContainer: {
|
||||
alignItems: 'center',
|
||||
marginBottom: 30,
|
||||
},
|
||||
title: {
|
||||
fontSize: 32,
|
||||
fontWeight: 'bold',
|
||||
marginBottom: 8,
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: 14,
|
||||
textAlign: 'center',
|
||||
opacity: 0.7,
|
||||
},
|
||||
card: {
|
||||
elevation: 4,
|
||||
marginBottom: 20,
|
||||
},
|
||||
cardTitle: {
|
||||
textAlign: 'center',
|
||||
marginBottom: 20,
|
||||
},
|
||||
input: {
|
||||
marginBottom: 10,
|
||||
},
|
||||
errorText: {
|
||||
color: '#d32f2f',
|
||||
fontSize: 12,
|
||||
marginBottom: 10,
|
||||
},
|
||||
checkboxContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginVertical: 10,
|
||||
},
|
||||
checkboxLabel: {
|
||||
marginLeft: 8,
|
||||
},
|
||||
loginButton: {
|
||||
marginTop: 20,
|
||||
marginBottom: 10,
|
||||
},
|
||||
loginButtonContent: {
|
||||
paddingVertical: 8,
|
||||
},
|
||||
linkContainer: {
|
||||
alignItems: 'center',
|
||||
marginTop: 10,
|
||||
},
|
||||
linkButton: {
|
||||
marginVertical: 5,
|
||||
},
|
||||
footer: {
|
||||
alignItems: 'center',
|
||||
marginTop: 20,
|
||||
},
|
||||
footerText: {
|
||||
fontSize: 12,
|
||||
opacity: 0.6,
|
||||
},
|
||||
});
|
||||
|
||||
export default LoginScreen;
|
||||
302
src/services/authService.js
Normal file
302
src/services/authService.js
Normal file
@@ -0,0 +1,302 @@
|
||||
import api from './api';
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
import Keychain from 'react-native-keychain';
|
||||
|
||||
/**
|
||||
* Service d'authentification pour l'application mobile GBCM
|
||||
*/
|
||||
class AuthService {
|
||||
constructor() {
|
||||
this.TOKEN_KEY = 'gbcm_auth_token';
|
||||
this.REFRESH_TOKEN_KEY = 'gbcm_refresh_token';
|
||||
this.USER_KEY = 'gbcm_user_data';
|
||||
}
|
||||
|
||||
/**
|
||||
* Connexion utilisateur
|
||||
*/
|
||||
async login(credentials) {
|
||||
try {
|
||||
const response = await api.post('/auth/login', credentials);
|
||||
|
||||
if (response.data.success) {
|
||||
const { token, refreshToken, user, expiresAt } = response.data;
|
||||
|
||||
// Stockage sécurisé du token principal
|
||||
await this.storeToken(token);
|
||||
|
||||
// Stockage du refresh token si disponible
|
||||
if (refreshToken) {
|
||||
await this.storeRefreshToken(refreshToken);
|
||||
}
|
||||
|
||||
// Stockage des données utilisateur
|
||||
await this.storeUserData(user);
|
||||
|
||||
// Configuration du header d'autorisation pour les futures requêtes
|
||||
this.setAuthHeader(token);
|
||||
|
||||
return {
|
||||
success: true,
|
||||
user,
|
||||
token,
|
||||
expiresAt,
|
||||
};
|
||||
} else {
|
||||
throw new Error(response.data.message || 'Erreur de connexion');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erreur lors de la connexion:', error);
|
||||
throw this.handleError(error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Déconnexion utilisateur
|
||||
*/
|
||||
async logout() {
|
||||
try {
|
||||
const token = await this.getToken();
|
||||
|
||||
if (token) {
|
||||
// Appel API de déconnexion
|
||||
try {
|
||||
await api.post('/auth/logout', {}, {
|
||||
headers: { Authorization: `Bearer ${token}` }
|
||||
});
|
||||
} catch (error) {
|
||||
console.warn('Erreur lors de la déconnexion côté serveur:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Nettoyage local
|
||||
await this.clearAuthData();
|
||||
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
console.error('Erreur lors de la déconnexion:', error);
|
||||
// Même en cas d'erreur, on nettoie les données locales
|
||||
await this.clearAuthData();
|
||||
throw this.handleError(error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Rafraîchissement du token
|
||||
*/
|
||||
async refreshToken() {
|
||||
try {
|
||||
const refreshToken = await this.getRefreshToken();
|
||||
|
||||
if (!refreshToken) {
|
||||
throw new Error('Aucun token de rafraîchissement disponible');
|
||||
}
|
||||
|
||||
const response = await api.post('/auth/refresh', {
|
||||
refreshToken,
|
||||
});
|
||||
|
||||
if (response.data.success) {
|
||||
const { token, user, expiresAt } = response.data;
|
||||
|
||||
await this.storeToken(token);
|
||||
await this.storeUserData(user);
|
||||
this.setAuthHeader(token);
|
||||
|
||||
return {
|
||||
success: true,
|
||||
token,
|
||||
user,
|
||||
expiresAt,
|
||||
};
|
||||
} else {
|
||||
throw new Error('Impossible de rafraîchir le token');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erreur lors du rafraîchissement:', error);
|
||||
// En cas d'échec, on déconnecte l'utilisateur
|
||||
await this.clearAuthData();
|
||||
throw this.handleError(error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Validation du token actuel
|
||||
*/
|
||||
async validateToken() {
|
||||
try {
|
||||
const token = await this.getToken();
|
||||
|
||||
if (!token) {
|
||||
return { valid: false };
|
||||
}
|
||||
|
||||
const response = await api.get('/auth/validate', {
|
||||
headers: { Authorization: `Bearer ${token}` }
|
||||
});
|
||||
|
||||
return {
|
||||
valid: true,
|
||||
user: response.data,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Token invalide:', error);
|
||||
return { valid: false };
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Demande de réinitialisation de mot de passe
|
||||
*/
|
||||
async forgotPassword(email) {
|
||||
try {
|
||||
await api.post('/auth/forgot-password', { email });
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
console.error('Erreur lors de la demande de réinitialisation:', error);
|
||||
throw this.handleError(error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Réinitialisation du mot de passe
|
||||
*/
|
||||
async resetPassword(resetToken, newPassword) {
|
||||
try {
|
||||
await api.post('/auth/reset-password', {
|
||||
resetToken,
|
||||
newPassword,
|
||||
});
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
console.error('Erreur lors de la réinitialisation:', error);
|
||||
throw this.handleError(error);
|
||||
}
|
||||
}
|
||||
|
||||
// Méthodes de stockage sécurisé
|
||||
async storeToken(token) {
|
||||
try {
|
||||
await Keychain.setInternetCredentials(
|
||||
this.TOKEN_KEY,
|
||||
'gbcm_user',
|
||||
token
|
||||
);
|
||||
} catch (error) {
|
||||
console.warn('Erreur Keychain, utilisation AsyncStorage:', error);
|
||||
await AsyncStorage.setItem(this.TOKEN_KEY, token);
|
||||
}
|
||||
}
|
||||
|
||||
async getToken() {
|
||||
try {
|
||||
const credentials = await Keychain.getInternetCredentials(this.TOKEN_KEY);
|
||||
if (credentials) {
|
||||
return credentials.password;
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('Erreur Keychain, utilisation AsyncStorage:', error);
|
||||
}
|
||||
|
||||
return await AsyncStorage.getItem(this.TOKEN_KEY);
|
||||
}
|
||||
|
||||
async storeRefreshToken(refreshToken) {
|
||||
try {
|
||||
await Keychain.setInternetCredentials(
|
||||
this.REFRESH_TOKEN_KEY,
|
||||
'gbcm_user',
|
||||
refreshToken
|
||||
);
|
||||
} catch (error) {
|
||||
await AsyncStorage.setItem(this.REFRESH_TOKEN_KEY, refreshToken);
|
||||
}
|
||||
}
|
||||
|
||||
async getRefreshToken() {
|
||||
try {
|
||||
const credentials = await Keychain.getInternetCredentials(this.REFRESH_TOKEN_KEY);
|
||||
if (credentials) {
|
||||
return credentials.password;
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('Erreur Keychain pour refresh token');
|
||||
}
|
||||
|
||||
return await AsyncStorage.getItem(this.REFRESH_TOKEN_KEY);
|
||||
}
|
||||
|
||||
async storeUserData(user) {
|
||||
await AsyncStorage.setItem(this.USER_KEY, JSON.stringify(user));
|
||||
}
|
||||
|
||||
async getUserData() {
|
||||
const userData = await AsyncStorage.getItem(this.USER_KEY);
|
||||
return userData ? JSON.parse(userData) : null;
|
||||
}
|
||||
|
||||
async clearAuthData() {
|
||||
try {
|
||||
await Keychain.resetInternetCredentials(this.TOKEN_KEY);
|
||||
await Keychain.resetInternetCredentials(this.REFRESH_TOKEN_KEY);
|
||||
} catch (error) {
|
||||
console.warn('Erreur lors du nettoyage Keychain');
|
||||
}
|
||||
|
||||
await AsyncStorage.multiRemove([
|
||||
this.TOKEN_KEY,
|
||||
this.REFRESH_TOKEN_KEY,
|
||||
this.USER_KEY,
|
||||
]);
|
||||
|
||||
// Suppression du header d'autorisation
|
||||
delete api.defaults.headers.common['Authorization'];
|
||||
}
|
||||
|
||||
setAuthHeader(token) {
|
||||
api.defaults.headers.common['Authorization'] = `Bearer ${token}`;
|
||||
}
|
||||
|
||||
handleError(error) {
|
||||
if (error.response) {
|
||||
// Erreur de réponse du serveur
|
||||
const message = error.response.data?.message || 'Erreur serveur';
|
||||
return new Error(message);
|
||||
} else if (error.request) {
|
||||
// Erreur de réseau
|
||||
return new Error('Erreur de connexion réseau');
|
||||
} else {
|
||||
// Autre erreur
|
||||
return error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Vérification si l'utilisateur est connecté
|
||||
*/
|
||||
async isAuthenticated() {
|
||||
const token = await this.getToken();
|
||||
return !!token;
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialisation du service (à appeler au démarrage de l'app)
|
||||
*/
|
||||
async initialize() {
|
||||
const token = await this.getToken();
|
||||
if (token) {
|
||||
this.setAuthHeader(token);
|
||||
|
||||
// Validation du token au démarrage
|
||||
const validation = await this.validateToken();
|
||||
if (!validation.valid) {
|
||||
await this.clearAuthData();
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export default new AuthService();
|
||||
Reference in New Issue
Block a user