merge: giải quyết xung đột env và dashboard giữa 2 máy
This commit is contained in:
+2
-3
@@ -1,3 +1,2 @@
|
||||
VITE_API_URL=http://localhost:3001
|
||||
DATABASE_URL=postgresql://postgres:password@localhost:5432/travel_db?schema=public
|
||||
VITE_GOOGLE_CLIENT_ID=639044397050-7hair384u6lle941h033trut1s3q47l4.apps.googleusercontent.com
|
||||
VITE_BACKEND_URL=https://yotrip.labz.io.vn
|
||||
VITE_GOOGLE_CLIENT_ID=639044397050-7hair384u6lle941h033trut1s3q47l4.apps.googleusercontent.com
|
||||
@@ -0,0 +1,2 @@
|
||||
VITE_BACKEND_URL=https://yotrip.labz.io.vn
|
||||
VITE_GOOGLE_CLIENT_ID=639044397050-7hair384u6lle941h033trut1s3q47l4.apps.googleusercontent.com
|
||||
@@ -9,7 +9,10 @@ android {
|
||||
|
||||
apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
|
||||
dependencies {
|
||||
implementation project(':capacitor-camera')
|
||||
implementation project(':capacitor-geolocation')
|
||||
implementation project(':capacitor-local-notifications')
|
||||
implementation project(':codetrix-studio-capacitor-google-auth')
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<?xml version="1.0" encoding="utf-8" ?>
|
||||
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
|
||||
|
||||
<application
|
||||
android:allowBackup="true"
|
||||
android:icon="@mipmap/ic_launcher"
|
||||
android:label="@string/app_name"
|
||||
android:roundIcon="@mipmap/ic_launcher_round"
|
||||
android:supportsRtl="true"
|
||||
android:theme="@style/AppTheme">
|
||||
|
||||
android:theme="@style/AppTheme"
|
||||
android:usesCleartextTraffic="true">
|
||||
<activity
|
||||
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode|navigation"
|
||||
android:name=".MainActivity"
|
||||
@@ -16,12 +15,10 @@
|
||||
android:theme="@style/AppTheme.NoActionBarLaunch"
|
||||
android:launchMode="singleTask"
|
||||
android:exported="true">
|
||||
|
||||
<intent-filter>
|
||||
<action android:name="android.intent.action.MAIN" />
|
||||
<category android:name="android.intent.category.LAUNCHER" />
|
||||
</intent-filter>
|
||||
|
||||
</activity>
|
||||
|
||||
<provider
|
||||
@@ -29,13 +26,25 @@
|
||||
android:authorities="${applicationId}.fileprovider"
|
||||
android:exported="false"
|
||||
android:grantUriPermissions="true">
|
||||
<meta-data
|
||||
android:name="android.support.FILE_PROVIDER_PATHS"
|
||||
android:resource="@xml/file_paths"></meta-data>
|
||||
<meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/file_paths" />
|
||||
</provider>
|
||||
</application>
|
||||
|
||||
<!-- Permissions -->
|
||||
|
||||
<uses-permission android:name="android.permission.INTERNET" />
|
||||
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
|
||||
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
|
||||
<uses-feature android:name="android.hardware.location.gps" />
|
||||
|
||||
<uses-permission android:name="android.permission.CAMERA" />
|
||||
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
|
||||
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="28" />
|
||||
<uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
|
||||
|
||||
<queries>
|
||||
<intent>
|
||||
<action android:name="android.media.action.IMAGE_CAPTURE" />
|
||||
</intent>
|
||||
</queries>
|
||||
</manifest>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 7.5 KiB After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 235 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.0 KiB After Width: | Height: | Size: 118 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 164 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 207 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.7 KiB After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 129 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 179 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 228 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.6 KiB After Width: | Height: | Size: 116 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 161 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 202 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 23 KiB |
@@ -1,5 +1,9 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
|
||||
<background android:drawable="@color/ic_launcher_background"/>
|
||||
<foreground android:drawable="@mipmap/ic_launcher_foreground"/>
|
||||
<background>
|
||||
<inset android:drawable="@mipmap/ic_launcher_background" android:inset="16.7%" />
|
||||
</background>
|
||||
<foreground>
|
||||
<inset android:drawable="@mipmap/ic_launcher_foreground" android:inset="16.7%" />
|
||||
</foreground>
|
||||
</adaptive-icon>
|
||||
@@ -1,5 +1,9 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
|
||||
<background android:drawable="@color/ic_launcher_background"/>
|
||||
<foreground android:drawable="@mipmap/ic_launcher_foreground"/>
|
||||
<background>
|
||||
<inset android:drawable="@mipmap/ic_launcher_background" android:inset="16.7%" />
|
||||
</background>
|
||||
<foreground>
|
||||
<inset android:drawable="@mipmap/ic_launcher_foreground" android:inset="16.7%" />
|
||||
</foreground>
|
||||
</adaptive-icon>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 212 B |
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 147 B |
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 175 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 285 B |
Binary file not shown.
|
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.4 KiB After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.5 KiB After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 431 B |
Binary file not shown.
|
Before Width: | Height: | Size: 9.6 KiB After Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.2 KiB After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 558 B |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 137 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 39 KiB |
@@ -4,4 +4,5 @@
|
||||
<string name="title_activity_main">YoTrip</string>
|
||||
<string name="package_name">com.yotrip.app</string>
|
||||
<string name="custom_url_scheme">com.yotrip.app</string>
|
||||
<string name="server_client_id">639044397050-7hair384u6lle941h033trut1s3q47l4.apps.googleusercontent.com</string>
|
||||
</resources>
|
||||
|
||||
@@ -24,6 +24,15 @@ allprojects {
|
||||
}
|
||||
}
|
||||
|
||||
subprojects {
|
||||
configurations.all {
|
||||
resolutionStrategy {
|
||||
force "androidx.core:core-ktx:${rootProject.ext.androidxCoreVersion}"
|
||||
force "androidx.core:core:${rootProject.ext.androidxCoreVersion}"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
task clean(type: Delete) {
|
||||
delete rootProject.buildDir
|
||||
}
|
||||
|
||||
@@ -2,5 +2,14 @@
|
||||
include ':capacitor-android'
|
||||
project(':capacitor-android').projectDir = new File('../../node_modules/@capacitor/android/capacitor')
|
||||
|
||||
include ':capacitor-camera'
|
||||
project(':capacitor-camera').projectDir = new File('../../node_modules/@capacitor/camera/android')
|
||||
|
||||
include ':capacitor-geolocation'
|
||||
project(':capacitor-geolocation').projectDir = new File('../../node_modules/@capacitor/geolocation/android')
|
||||
|
||||
include ':capacitor-local-notifications'
|
||||
project(':capacitor-local-notifications').projectDir = new File('../../node_modules/@capacitor/local-notifications/android')
|
||||
|
||||
include ':codetrix-studio-capacitor-google-auth'
|
||||
project(':codetrix-studio-capacitor-google-auth').projectDir = new File('../../node_modules/@codetrix-studio/capacitor-google-auth/android')
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
ext {
|
||||
minSdkVersion = 23
|
||||
minSdkVersion = 24
|
||||
compileSdkVersion = 35
|
||||
targetSdkVersion = 35
|
||||
androidxActivityVersion = '1.9.2'
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 318 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 280 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 230 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 230 KiB |
@@ -3,7 +3,17 @@ import type { CapacitorConfig } from '@capacitor/cli';
|
||||
const config: CapacitorConfig = {
|
||||
appId: 'com.yotrip.app',
|
||||
appName: 'YoTrip',
|
||||
webDir: 'dist'
|
||||
webDir: 'dist',
|
||||
plugins: {
|
||||
SplashScreen: {
|
||||
launchShowDuration: 2000
|
||||
},
|
||||
GoogleAuth: {
|
||||
scopes: ['profile', 'email'],
|
||||
serverClientId: '639044397050-7hair384u6lle941h033trut1s3q47l4.apps.googleusercontent.com',
|
||||
forceCodeForRefreshToken: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
||||
Vendored
+37
-29
@@ -1,30 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||
<script src="https://accounts.google.com/gsi/client" async defer></script>
|
||||
<title>Travel Planner</title>
|
||||
|
||||
<!-- Open Graph Meta Tags for Social Media Sharing -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://yotrip.labz.io.vn" />
|
||||
<meta property="og:title" content="Travel Planner - Lên kế hoạch chuyến đi của bạn" />
|
||||
<meta property="og:description" content="Khám phá những hành trình tuyệt vời và chia sẻ khoảnh khắc đẹp với cộng đồng du lịch." />
|
||||
<meta property="og:image" content="https://yotrip.labz.io.vn/background.avif" />
|
||||
<meta property="og:image:width" content="1200" />
|
||||
<meta property="og:image:height" content="630" />
|
||||
|
||||
<!-- Twitter Card Meta Tags -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Travel Planner - Lên kế hoạch chuyến đi của bạn" />
|
||||
<meta name="twitter:description" content="Khám phá những hành trình tuyệt vời và chia sẻ khoảnh khắc đẹp với cộng đồng du lịch." />
|
||||
<meta name="twitter:image" content="https://yotrip.labz.io.vn/background.avif" />
|
||||
<script type="module" crossorigin src="/assets/index-D0YTcNWm.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-Cnj-xh6m.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||
<script src="https://accounts.google.com/gsi/client" async defer></script>
|
||||
<title>Travel Planner</title>
|
||||
|
||||
<!-- Open Graph Meta Tags for Social Media Sharing -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://yotrip.labz.io.vn" />
|
||||
<meta property="og:title" content="Travel Planner - Lên kế hoạch chuyến đi của bạn" />
|
||||
<meta property="og:description" content="Khám phá những hành trình tuyệt vời và chia sẻ khoảnh khắc đẹp với cộng đồng du lịch." />
|
||||
<meta property="og:image" content="https://yotrip.labz.io.vn/background.avif" />
|
||||
<meta property="og:image:width" content="1200" />
|
||||
<meta property="og:image:height" content="630" />
|
||||
|
||||
<!-- Twitter Card Meta Tags -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Travel Planner - Lên kế hoạch chuyến đi của bạn" />
|
||||
<meta name="twitter:description" content="Khám phá những hành trình tuyệt vời và chia sẻ khoảnh khắc đẹp với cộng đồng du lịch." />
|
||||
<meta name="twitter:image" content="https://yotrip.labz.io.vn/background.avif" />
|
||||
<script type="module" crossorigin src="/assets/index-BximWk33.js"></script>
|
||||
<link rel="modulepreload" crossorigin href="/assets/rolldown-runtime-Cyuzqnbw.js">
|
||||
<link rel="modulepreload" crossorigin href="/assets/vendor-others-VIU5qAPG.js">
|
||||
<link rel="modulepreload" crossorigin href="/assets/vendor-editor-DOXkNaRS.js">
|
||||
<link rel="modulepreload" crossorigin href="/assets/vendor-maps-DY-S_hoR.js">
|
||||
<link rel="modulepreload" crossorigin href="/assets/vendor-react-DQOuwrxr.js">
|
||||
<link rel="modulepreload" crossorigin href="/assets/vendor-pdf-IjT8x9OX.js">
|
||||
<link rel="stylesheet" crossorigin href="/assets/vendor-maps-CcXJxNtP.css">
|
||||
<link rel="stylesheet" crossorigin href="/assets/vendor-react-CuSj0z1j.css">
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-21UejyBs.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
</body>
|
||||
@@ -11,9 +11,12 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@capacitor/android": "^8.4.1",
|
||||
"@capacitor/camera": "^8.2.0",
|
||||
"@capacitor/cli": "^7.6.7",
|
||||
"@capacitor/core": "^8.4.1",
|
||||
"@capacitor/geolocation": "^8.2.0",
|
||||
"@capacitor/local-notifications": "^8.2.0",
|
||||
"@codetrix-studio/capacitor-google-auth": "^3.4.0-rc.4",
|
||||
"date-fns": "^4.4.0",
|
||||
"jspdf": "^4.2.1",
|
||||
"jspdf-autotable": "^5.0.8",
|
||||
@@ -29,6 +32,7 @@
|
||||
"zustand": "^5.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@capacitor/assets": "^3.0.5",
|
||||
"@tailwindcss/postcss": "^4.3.1",
|
||||
"@types/leaflet": "^1.9.12",
|
||||
"@types/react": "^18.3.12",
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { X, Send, MessageSquare, User, Loader2, Trash2 } from 'lucide-react';
|
||||
import { io } from 'socket.io-client';
|
||||
import { Capacitor } from '@capacitor/core';
|
||||
import { useTourStore } from '@/store/useTourStore';
|
||||
import { ConfirmModal } from './ConfirmModal';
|
||||
|
||||
@@ -69,7 +70,9 @@ export const CommentModal: React.FC<CommentModalProps> = ({ isOpen, onClose, loc
|
||||
fetchComments();
|
||||
|
||||
// Lắng nghe bình luận mới qua Proxy (không cần hardcode URL)
|
||||
const socket = io();
|
||||
const socket = Capacitor.isNativePlatform()
|
||||
? io(import.meta.env.VITE_BACKEND_URL || 'https://yotrip.labz.io.vn')
|
||||
: io();
|
||||
socket.emit('joinTour', 'global'); // Hoặc logic join cụ thể
|
||||
|
||||
socket.on('commentAdded', (newCommentData: any) => {
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { X, Mail, Lock, ArrowRight, Loader2, LogIn } from 'lucide-react';
|
||||
import { useNotification } from '@/hooks/useNotification';
|
||||
import { Capacitor } from '@capacitor/core';
|
||||
import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';
|
||||
|
||||
interface JoinTourLoginModalProps {
|
||||
isOpen: boolean;
|
||||
@@ -119,6 +121,88 @@ export const JoinTourLoginModal: React.FC<JoinTourLoginModalProps> = ({
|
||||
}
|
||||
};
|
||||
|
||||
const handleNativeGoogleLogin = async () => {
|
||||
setError('');
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const user = await GoogleAuth.signIn();
|
||||
console.log('[JoinTourLogin] Native Google user received:', user);
|
||||
|
||||
const idToken = user.authentication.idToken;
|
||||
if (!idToken) {
|
||||
throw new Error('Không nhận được token từ Google.');
|
||||
}
|
||||
|
||||
const response = await fetch(`/api/v1/auth/google`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ credential: idToken }),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
if (!response.ok) {
|
||||
throw new Error(data.message || 'Đăng nhập Google thất bại');
|
||||
}
|
||||
|
||||
localStorage.setItem('token', data.access_token);
|
||||
localStorage.setItem('user', JSON.stringify(data.user));
|
||||
|
||||
let currentToken = inviteTokenRef.current || localStorage.getItem('pendingInviteToken');
|
||||
if (!currentToken) {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const urlToken = params.get('token');
|
||||
if (urlToken) {
|
||||
currentToken = urlToken;
|
||||
localStorage.setItem('pendingInviteToken', urlToken);
|
||||
}
|
||||
}
|
||||
|
||||
if (!currentToken) {
|
||||
throw new Error('Không có mã lời mời để tham gia tour');
|
||||
}
|
||||
|
||||
try {
|
||||
const joinRes = await fetch(`/api/v1/tours/join-by-token`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${data.access_token}`,
|
||||
},
|
||||
body: JSON.stringify({ token: currentToken }),
|
||||
});
|
||||
|
||||
const joinData = await joinRes.json().catch(() => ({}));
|
||||
|
||||
if (joinRes.ok) {
|
||||
notify({
|
||||
title: 'Thành công',
|
||||
message: joinData.message || 'Bạn đã gia nhập tour!',
|
||||
type: 'success'
|
||||
});
|
||||
localStorage.removeItem('pendingInviteToken');
|
||||
if (onJoinSuccess) {
|
||||
onJoinSuccess(data.user, joinData);
|
||||
}
|
||||
onClose();
|
||||
} else {
|
||||
localStorage.removeItem('pendingInviteToken');
|
||||
const errorMessage = joinData.message || `Không thể gia nhập tour (HTTP ${joinRes.status})`;
|
||||
setError(`Lỗi gia nhập tour: ${errorMessage}`);
|
||||
setIsLoading(false);
|
||||
}
|
||||
} catch (e: any) {
|
||||
setError(`Lỗi khi gia nhập: ${e.message}`);
|
||||
setIsLoading(false);
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('[JoinTourLogin] Native Google login error:', err);
|
||||
if (err?.message !== 'Sign in window was closed' && err?.message !== '12501') {
|
||||
setError(err.message || 'Đăng nhập Google thất bại');
|
||||
}
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEmailPasswordJoin = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
@@ -182,7 +266,7 @@ export const JoinTourLoginModal: React.FC<JoinTourLoginModalProps> = ({
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
if (!isOpen || Capacitor.isNativePlatform()) return;
|
||||
|
||||
const timer = setTimeout(() => {
|
||||
if (typeof window !== 'undefined' && (window as any).google) {
|
||||
@@ -241,10 +325,27 @@ export const JoinTourLoginModal: React.FC<JoinTourLoginModalProps> = ({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Google OAuth Button */}
|
||||
<div className="mb-4 sm:mb-6 flex justify-center">
|
||||
<div id="google-signin-btn-join-tour" className="w-full" />
|
||||
</div>
|
||||
{Capacitor.isNativePlatform() ? (
|
||||
<div className="mb-4 sm:mb-6 flex justify-center w-full">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleNativeGoogleLogin}
|
||||
className="w-full flex items-center justify-center gap-3 bg-white hover:bg-slate-50 text-slate-800 font-bold py-3.5 px-4 rounded-2xl border border-slate-200 transition-all active:scale-[0.98] cursor-pointer text-sm shadow-sm"
|
||||
>
|
||||
<svg className="w-5 h-5" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="#EA4335"
|
||||
d="M12.24 10.285V14.4h6.887c-.648 2.41-2.519 4.114-5.136 4.114-3.51 0-6.357-2.89-6.357-6.457 0-3.568 2.848-6.458 6.357-6.458 1.614 0 3.08.618 4.19 1.625l3.03-3.03C19.045 2.11 15.895 1 12.24 1 6.033 1 1 6.033 1 12.24s5.033 11.24 11.24 11.24c5.84 0 10.74-4.14 11.24-9.84v-3.355H12.24z"
|
||||
/>
|
||||
</svg>
|
||||
Đăng nhập bằng Google
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mb-4 sm:mb-6 flex justify-center">
|
||||
<div id="google-signin-btn-join-tour" className="w-full" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="relative mb-4 sm:mb-6">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { X, Mail, Lock, ArrowRight, Loader2 } from 'lucide-react';
|
||||
import { Capacitor } from '@capacitor/core';
|
||||
import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';
|
||||
|
||||
interface LoginModalProps {
|
||||
isOpen: boolean;
|
||||
@@ -101,8 +103,70 @@ export const LoginModal: React.FC<LoginModalProps> = ({ isOpen, onClose, onSwitc
|
||||
}
|
||||
};
|
||||
|
||||
const handleNativeGoogleLogin = async () => {
|
||||
setError('');
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const user = await GoogleAuth.signIn();
|
||||
console.log('[Native OAuth] Google user received:', user);
|
||||
|
||||
const idToken = user.authentication.idToken;
|
||||
if (!idToken) {
|
||||
throw new Error('Không nhận được token từ Google.');
|
||||
}
|
||||
|
||||
const response = await fetch(`/api/v1/auth/google`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ credential: idToken }),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
if (!response.ok) {
|
||||
throw new Error(data.message || 'Đăng nhập Google thất bại');
|
||||
}
|
||||
|
||||
localStorage.setItem('token', data.access_token);
|
||||
localStorage.setItem('user', JSON.stringify(data.user));
|
||||
localStorage.removeItem('guest_token');
|
||||
localStorage.removeItem('guest_user');
|
||||
console.log('[Native OAuth] Google login successful');
|
||||
|
||||
let pendingInviteToken = localStorage.getItem('pendingInviteToken');
|
||||
if (pendingInviteToken) {
|
||||
try {
|
||||
const joinRes = await fetch(`/api/v1/tours/join-by-token`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${data.access_token}`,
|
||||
},
|
||||
body: JSON.stringify({ token: pendingInviteToken }),
|
||||
});
|
||||
if (joinRes.ok) {
|
||||
localStorage.removeItem('pendingInviteToken');
|
||||
}
|
||||
} catch (joinErr) {
|
||||
console.error('[Native OAuth] Join tour after login failed:', joinErr);
|
||||
}
|
||||
}
|
||||
|
||||
if (onLoginSuccess) {
|
||||
onLoginSuccess(data.user);
|
||||
}
|
||||
onClose();
|
||||
} catch (err: any) {
|
||||
console.error('[Native OAuth] Error:', err);
|
||||
if (err?.message !== 'Sign in window was closed' && err?.message !== '12501') {
|
||||
setError(err.message || 'Đăng nhập Google thất bại');
|
||||
}
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
if (!isOpen || Capacitor.isNativePlatform()) return;
|
||||
|
||||
const timer = setTimeout(() => {
|
||||
if (typeof window !== 'undefined' && (window as any).google) {
|
||||
@@ -244,7 +308,23 @@ export const LoginModal: React.FC<LoginModalProps> = ({ isOpen, onClose, onSwitc
|
||||
<span className="relative px-3 bg-[var(--surface)] text-xs font-bold text-[var(--text-muted)] uppercase">Hoặc</span>
|
||||
</div>
|
||||
|
||||
<div id="google-signin-btn-login" className="w-full flex justify-center"></div>
|
||||
{Capacitor.isNativePlatform() ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleNativeGoogleLogin}
|
||||
className="w-full flex items-center justify-center gap-3 bg-white hover:bg-slate-50 text-slate-800 font-bold py-3.5 px-4 rounded-2xl border border-slate-200 transition-all active:scale-[0.98] cursor-pointer text-sm shadow-sm"
|
||||
>
|
||||
<svg className="w-5 h-5" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="#EA4335"
|
||||
d="M12.24 10.285V14.4h6.887c-.648 2.41-2.519 4.114-5.136 4.114-3.51 0-6.357-2.89-6.357-6.457 0-3.568 2.848-6.458 6.357-6.458 1.614 0 3.08.618 4.19 1.625l3.03-3.03C19.045 2.11 15.895 1 12.24 1 6.033 1 1 6.033 1 12.24s5.033 11.24 11.24 11.24c5.84 0 10.74-4.14 11.24-9.84v-3.355H12.24z"
|
||||
/>
|
||||
</svg>
|
||||
Đăng nhập bằng Google
|
||||
</button>
|
||||
) : (
|
||||
<div id="google-signin-btn-login" className="w-full flex justify-center"></div>
|
||||
)}
|
||||
|
||||
<div className="mt-10 pt-8 border-t border-[var(--border)] text-center">
|
||||
<p className="text-[var(--text-secondary)]">
|
||||
|
||||
@@ -0,0 +1,73 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Camera as CameraIcon, X } from 'lucide-react';
|
||||
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
|
||||
import { useNotification } from '@/hooks/useNotification';
|
||||
|
||||
interface PhotoTakerProps {
|
||||
onPhotoTaken?: (webPath: string) => void;
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
export const PhotoTaker: React.FC<PhotoTakerProps> = ({ onPhotoTaken, onClose }) => {
|
||||
const [photoUri, setPhotoUri] = useState<string | undefined>();
|
||||
const notify = useNotification();
|
||||
|
||||
const takeAndSavePhoto = async () => {
|
||||
try {
|
||||
const image = await Camera.getPhoto({
|
||||
quality: 90,
|
||||
allowEditing: false, // Giữ nguyên ảnh gốc, không qua chỉnh sửa
|
||||
resultType: CameraResultType.Uri,
|
||||
source: CameraSource.Camera, // Mở camera trực tiếp
|
||||
saveToGallery: true, // Tự động lưu ảnh gốc vào thư viện điện thoại
|
||||
});
|
||||
|
||||
setPhotoUri(image.webPath);
|
||||
notify({
|
||||
title: 'Thành công',
|
||||
message: 'Ảnh đã được chụp và tự động lưu vào thư viện điện thoại.',
|
||||
type: 'success'
|
||||
});
|
||||
if (onPhotoTaken && image.webPath) {
|
||||
onPhotoTaken(image.webPath);
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('Lỗi khi chụp hoặc lưu ảnh:', error);
|
||||
if (error?.message !== 'User cancelled photos app') {
|
||||
notify({
|
||||
title: 'Lỗi chụp ảnh',
|
||||
message: 'Không thể truy cập camera hoặc lưu ảnh.',
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center p-6 bg-slate-900/60 border border-slate-800/80 rounded-2xl w-full max-w-md mx-auto backdrop-blur-md">
|
||||
<div className="flex justify-between items-center w-full mb-4">
|
||||
<h3 className="text-sm font-black uppercase text-indigo-400 tracking-wider">Chụp ảnh hành trình</h3>
|
||||
{onClose && (
|
||||
<button onClick={onClose} className="p-1 hover:bg-slate-800 rounded-full transition-colors text-slate-400 hover:text-white">
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={takeAndSavePhoto}
|
||||
className="w-full flex items-center justify-center gap-2 py-3 px-4 bg-indigo-650 hover:bg-indigo-700 active:scale-[0.98] text-white rounded-xl font-bold transition-all shadow-md cursor-pointer text-xs uppercase tracking-wider"
|
||||
>
|
||||
<CameraIcon className="w-4 h-4" />
|
||||
Chụp và Lưu Ảnh Gốc
|
||||
</button>
|
||||
|
||||
{photoUri && (
|
||||
<div className="mt-6 w-full text-center border border-slate-800/85 bg-slate-950/40 p-4 rounded-xl">
|
||||
<p className="text-[11px] text-slate-400 mb-2 font-semibold">Xem trước ảnh vừa chụp:</p>
|
||||
<img src={photoUri} alt="Xem trước ảnh chụp" className="max-w-full h-auto rounded-lg mx-auto border border-slate-800" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { X, Send, MessageSquare, User, Loader2, Calendar, MapPin, Download, Edit, Heart, Trash2 } from 'lucide-react';
|
||||
import { io } from 'socket.io-client';
|
||||
import { Capacitor } from '@capacitor/core';
|
||||
import { CoordinateSelectModal } from './CoordinateSelectModal';
|
||||
import { useTranslation } from '../hooks/useTranslation';
|
||||
import { useConfirm } from '../hooks/useConfirm';
|
||||
@@ -246,7 +247,9 @@ export const PublicPhotoModal: React.FC<PublicPhotoModalProps> = ({
|
||||
|
||||
fetchComments();
|
||||
|
||||
const socket = io();
|
||||
const socket = Capacitor.isNativePlatform()
|
||||
? io(import.meta.env.VITE_BACKEND_URL || 'https://yotrip.labz.io.vn')
|
||||
: io();
|
||||
socket.emit('joinPhoto', photo.id);
|
||||
|
||||
socket.on('photoCommentAdded', (newCommentData: any) => {
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { io, Socket } from 'socket.io-client';
|
||||
import { Capacitor } from '@capacitor/core';
|
||||
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
|
||||
import { Send, MessageSquare, Loader2, Image as ImageIcon, MapPin, Download, X } from 'lucide-react';
|
||||
import { useNotification } from '@/hooks/useNotification';
|
||||
|
||||
@@ -87,7 +89,7 @@ export const TourChat: React.FC<TourChatProps> = ({ tourId, embedded = false })
|
||||
}, []);
|
||||
|
||||
const filteredParticipants = participants.filter(p =>
|
||||
p.name.toLowerCase().includes(mentionSearch.toLowerCase())
|
||||
p && p.name && p.name.toLowerCase().includes(mentionSearch.toLowerCase())
|
||||
);
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
@@ -179,7 +181,9 @@ export const TourChat: React.FC<TourChatProps> = ({ tourId, embedded = false })
|
||||
|
||||
// Connect to socket and listen for tour messages
|
||||
useEffect(() => {
|
||||
const socket = io();
|
||||
const socket = Capacitor.isNativePlatform()
|
||||
? io(import.meta.env.VITE_BACKEND_URL || 'https://yotrip.labz.io.vn')
|
||||
: io();
|
||||
socketRef.current = socket;
|
||||
|
||||
socket.on('connect', () => {
|
||||
@@ -252,6 +256,41 @@ export const TourChat: React.FC<TourChatProps> = ({ tourId, embedded = false })
|
||||
});
|
||||
};
|
||||
|
||||
// Handle Native Image Selection (Camera or Library)
|
||||
const handleNativePhotoSelect = async () => {
|
||||
try {
|
||||
const image = await Camera.getPhoto({
|
||||
quality: 90,
|
||||
allowEditing: false,
|
||||
resultType: CameraResultType.Uri,
|
||||
source: CameraSource.Prompt, // Prompt selection
|
||||
saveToGallery: true, // Auto-save original photo to device gallery
|
||||
promptLabelHeader: 'Chọn hình ảnh',
|
||||
promptLabelPhoto: 'Chọn từ thư viện',
|
||||
promptLabelPicture: 'Chụp ảnh mới (Camera)'
|
||||
});
|
||||
|
||||
if (image && image.webPath) {
|
||||
setImagePreview(image.webPath);
|
||||
|
||||
// Convert Capacitor webPath resource back to standard File instance
|
||||
const response = await fetch(image.webPath);
|
||||
const blob = await response.blob();
|
||||
const file = new File([blob], `photo.${image.format}`, { type: `image/${image.format}` });
|
||||
setSelectedImage(file);
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('Lỗi chọn ảnh native:', error);
|
||||
if (error?.message !== 'User cancelled photos app' && error?.message !== 'User cancelled camera') {
|
||||
notify({
|
||||
title: 'Lỗi',
|
||||
message: 'Không thể truy cập máy ảnh hoặc thư viện ảnh.',
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Handle Image Selection
|
||||
const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
@@ -613,7 +652,7 @@ export const TourChat: React.FC<TourChatProps> = ({ tourId, embedded = false })
|
||||
{/* Attach photo button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
onClick={Capacitor.isNativePlatform() ? handleNativePhotoSelect : () => fileInputRef.current?.click()}
|
||||
className="p-2.5 bg-white border border-gray-200 hover:bg-gray-50 text-gray-500 rounded-xl transition-all shadow-sm active:scale-95 flex items-center justify-center shrink-0"
|
||||
title="Đính kèm hình ảnh"
|
||||
>
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';
|
||||
import { NotificationModal } from '../components/NotificationModal';
|
||||
import { Capacitor } from '@capacitor/core';
|
||||
import { LocalNotifications } from '@capacitor/local-notifications';
|
||||
|
||||
interface NotificationOptions {
|
||||
title: string;
|
||||
@@ -24,6 +26,24 @@ export const NotificationProvider: React.FC<{ children: React.ReactNode }> = ({
|
||||
message,
|
||||
type,
|
||||
});
|
||||
|
||||
if (Capacitor.isNativePlatform()) {
|
||||
LocalNotifications.schedule({
|
||||
notifications: [
|
||||
{
|
||||
title: title || 'YoTrip',
|
||||
body: message,
|
||||
id: Math.floor(Math.random() * 1000000),
|
||||
schedule: { at: new Date(Date.now() + 100) },
|
||||
sound: 'default',
|
||||
actionTypeId: 'OPEN_APP',
|
||||
extra: null
|
||||
}
|
||||
]
|
||||
}).catch(err => {
|
||||
console.error('[LocalNotifications] Error scheduling native notification:', err);
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleClose = useCallback(() => {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import './index.css';
|
||||
import './utils/nativePatch';
|
||||
import App from './App.js';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
|
||||
@@ -1,17 +1,18 @@
|
||||
import React, { useEffect, useState, useRef } from 'react';
|
||||
|
||||
import {
|
||||
Compass,
|
||||
Users,
|
||||
Image as ImageIcon,
|
||||
MessageSquare,
|
||||
LogOut,
|
||||
Search,
|
||||
Check,
|
||||
X,
|
||||
Trash2,
|
||||
Send,
|
||||
UserPlus,
|
||||
import { io, Socket } from 'socket.io-client';
|
||||
import { Capacitor } from '@capacitor/core';
|
||||
import {
|
||||
Compass,
|
||||
Users,
|
||||
Image as ImageIcon,
|
||||
MessageSquare,
|
||||
LogOut,
|
||||
Search,
|
||||
Check,
|
||||
X,
|
||||
Trash2,
|
||||
Send,
|
||||
UserPlus,
|
||||
Clock,
|
||||
ChevronRight,
|
||||
ChevronLeft,
|
||||
@@ -110,7 +111,7 @@ export const MemberDashboard: React.FC<MemberDashboardProps> = ({
|
||||
const [attachedLocation, setAttachedLocation] = useState<{ latitude: number; longitude: number } | null>(null);
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
const [isLocating, setIsLocating] = useState(false);
|
||||
|
||||
|
||||
// Emergency share states
|
||||
const [sharingTour, setSharingTour] = useState<any | null>(null);
|
||||
const [shareStatus, setShareStatus] = useState<any | null>(null);
|
||||
@@ -187,7 +188,7 @@ export const MemberDashboard: React.FC<MemberDashboardProps> = ({
|
||||
// Send location message to tour chat
|
||||
const token = localStorage.getItem('token');
|
||||
const message = `📍 Vị trí hiện tại: ${position.latitude.toFixed(6)}, ${position.longitude.toFixed(6)}\n🔗 Google Maps: https://maps.google.com/?q=${position.latitude},${position.longitude}`;
|
||||
|
||||
|
||||
const res = await fetch(`/api/v1/tours/${tour.id}/messages`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
@@ -320,7 +321,7 @@ export const MemberDashboard: React.FC<MemberDashboardProps> = ({
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const cameraInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
@@ -344,10 +345,10 @@ export const MemberDashboard: React.FC<MemberDashboardProps> = ({
|
||||
|
||||
const isMemberOfMyTours = (senderId: string) => {
|
||||
if (!publicTours) return false;
|
||||
const userTours = publicTours.filter(tour =>
|
||||
const userTours = publicTours.filter(tour =>
|
||||
tour.participants?.some((p: any) => p.userId === user?.id)
|
||||
);
|
||||
return userTours.some(tour =>
|
||||
return userTours.some(tour =>
|
||||
tour.participants?.some((p: any) => p.userId === senderId && p.userId !== user?.id)
|
||||
);
|
||||
};
|
||||
@@ -527,8 +528,18 @@ export const MemberDashboard: React.FC<MemberDashboardProps> = ({
|
||||
useEffect(() => {
|
||||
if (!user?.id) return;
|
||||
|
||||
const handleMessageReceived = (e: Event) => {
|
||||
const message = (e as CustomEvent).detail;
|
||||
// Connect to WebSocket using same origin/proxy
|
||||
const socket = Capacitor.isNativePlatform()
|
||||
? io(import.meta.env.VITE_BACKEND_URL || 'https://yotrip.labz.io.vn')
|
||||
: io();
|
||||
socketRef.current = socket;
|
||||
|
||||
socket.on('connect', () => {
|
||||
console.log('[WS] MemberDashboard connected:', socket.id);
|
||||
socket.emit('joinUser', user.id);
|
||||
});
|
||||
|
||||
socket.on('messageReceived', (message: any) => {
|
||||
// If we are actively chatting with the sender of this message
|
||||
if (activeChatUser && (message.senderId === activeChatUser.id || message.receiverId === activeChatUser.id)) {
|
||||
setChatMessages(prev => [...prev, message]);
|
||||
@@ -806,7 +817,7 @@ export const MemberDashboard: React.FC<MemberDashboardProps> = ({
|
||||
// Filter tours where the current logged-in user is a participant
|
||||
const myTours = React.useMemo(() => {
|
||||
if (!publicTours) return [];
|
||||
return publicTours.filter(tour =>
|
||||
return publicTours.filter(tour =>
|
||||
tour.participants?.some((p: any) => p.userId === user?.id)
|
||||
);
|
||||
}, [publicTours, user?.id]);
|
||||
@@ -819,7 +830,7 @@ export const MemberDashboard: React.FC<MemberDashboardProps> = ({
|
||||
}
|
||||
const isPendingReceived = receivedRequests.find(r => r.requester?.id === targetId);
|
||||
if (isPendingReceived) return 'Chờ bạn duyệt';
|
||||
|
||||
|
||||
const isPendingSent = sentRequests.find(s => s.receiver?.id === targetId);
|
||||
if (isPendingSent) return 'Đã gửi yêu cầu';
|
||||
|
||||
@@ -827,7 +838,7 @@ export const MemberDashboard: React.FC<MemberDashboardProps> = ({
|
||||
};
|
||||
|
||||
// Helper function to render a user's initials avatar
|
||||
const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') => {
|
||||
const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') => {
|
||||
const initials = name
|
||||
? name.split(' ').map(n => n[0]).slice(0, 2).join('').toUpperCase()
|
||||
: 'U';
|
||||
@@ -856,9 +867,9 @@ const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') =>
|
||||
<div className="p-6 border-b border-slate-900 flex flex-col items-center text-center bg-slate-900/30">
|
||||
<div className="relative mb-3">
|
||||
{user?.avatar ? (
|
||||
<img
|
||||
src={user.avatar}
|
||||
alt={user.name}
|
||||
<img
|
||||
src={user.avatar}
|
||||
alt={user.name}
|
||||
className="w-20 h-20 rounded-full object-cover border-4 border-slate-800 shadow-xl"
|
||||
/>
|
||||
) : (
|
||||
@@ -876,11 +887,10 @@ const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') =>
|
||||
type: 'info'
|
||||
});
|
||||
}}
|
||||
className={`absolute -bottom-1 -right-1 p-1.5 rounded-full border shadow-md transition-all active:scale-95 z-20 ${
|
||||
muteNotifications
|
||||
? 'bg-slate-900 border-slate-800 text-slate-400 hover:text-slate-200'
|
||||
className={`absolute -bottom-1 -right-1 p-1.5 rounded-full border shadow-md transition-all active:scale-95 z-20 ${muteNotifications
|
||||
? 'bg-slate-900 border-slate-800 text-slate-400 hover:text-slate-200'
|
||||
: 'bg-indigo-650 border-indigo-500 text-white hover:bg-indigo-600'
|
||||
}`}
|
||||
}`}
|
||||
title={muteNotifications ? "Bật thông báo đẩy" : "Tắt thông báo đẩy"}
|
||||
>
|
||||
{muteNotifications ? (
|
||||
@@ -931,7 +941,7 @@ const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') =>
|
||||
|
||||
{/* Explore Map Quick Button */}
|
||||
<div className="p-4 border-b border-slate-900">
|
||||
<button
|
||||
<button
|
||||
onClick={onExploreTours}
|
||||
className="w-full py-4 px-4 bg-indigo-600 hover:bg-indigo-700 text-white rounded-2xl font-bold flex items-center justify-center gap-2 shadow-lg active:scale-98 transition-all"
|
||||
>
|
||||
@@ -944,11 +954,10 @@ const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') =>
|
||||
<div className="flex-1 p-4 flex flex-col gap-3">
|
||||
<button
|
||||
onClick={() => handleSelectTab('tours')}
|
||||
className={`w-full p-4 hover:bg-slate-900 text-white rounded-2xl flex items-center justify-between font-bold active:scale-98 transition-all border ${
|
||||
activeTab === 'tours'
|
||||
? 'bg-indigo-900/40 border-indigo-500/40'
|
||||
className={`w-full p-4 hover:bg-slate-900 text-white rounded-2xl flex items-center justify-between font-bold active:scale-98 transition-all border ${activeTab === 'tours'
|
||||
? 'bg-indigo-900/40 border-indigo-500/40'
|
||||
: 'bg-slate-850/80 border-slate-700/80'
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<Compass className="w-5 h-5 text-indigo-400" />
|
||||
@@ -972,11 +981,10 @@ const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') =>
|
||||
|
||||
<button
|
||||
onClick={() => handleSelectTab('photos')}
|
||||
className={`w-full p-4 hover:bg-slate-900 text-white rounded-2xl flex items-center justify-between font-bold active:scale-98 transition-all border ${
|
||||
activeTab === 'photos'
|
||||
? 'bg-indigo-900/40 border-indigo-500/40'
|
||||
className={`w-full p-4 hover:bg-slate-900 text-white rounded-2xl flex items-center justify-between font-bold active:scale-98 transition-all border ${activeTab === 'photos'
|
||||
? 'bg-indigo-900/40 border-indigo-500/40'
|
||||
: 'bg-slate-850/80 border-slate-700/80'
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<ImageIcon className="w-5 h-5 text-indigo-400" />
|
||||
@@ -998,11 +1006,10 @@ const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') =>
|
||||
<div className="p-4 flex flex-col gap-3">
|
||||
<button
|
||||
onClick={() => handleSelectTab('connections')}
|
||||
className={`w-full p-4 hover:bg-slate-900 text-white rounded-2xl flex items-center justify-between font-bold active:scale-98 transition-all border ${
|
||||
activeTab === 'connections'
|
||||
? 'bg-indigo-900/40 border-indigo-500/40'
|
||||
className={`w-full p-4 hover:bg-slate-900 text-white rounded-2xl flex items-center justify-between font-bold active:scale-98 transition-all border ${activeTab === 'connections'
|
||||
? 'bg-indigo-900/40 border-indigo-500/40'
|
||||
: 'bg-slate-900/60 border-slate-800/60'
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<Users className="w-5 h-5 text-indigo-400" />
|
||||
@@ -1026,11 +1033,10 @@ const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') =>
|
||||
|
||||
<button
|
||||
onClick={() => handleSelectTab('chats')}
|
||||
className={`w-full p-4 hover:bg-slate-900 text-white rounded-2xl flex items-center justify-between font-bold active:scale-98 transition-all border ${
|
||||
activeTab === 'chats'
|
||||
? 'bg-indigo-900/40 border-indigo-500/40'
|
||||
className={`w-full p-4 hover:bg-slate-900 text-white rounded-2xl flex items-center justify-between font-bold active:scale-98 transition-all border ${activeTab === 'chats'
|
||||
? 'bg-indigo-900/40 border-indigo-500/40'
|
||||
: 'bg-slate-900/60 border-slate-800/60'
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<MessageSquare className="w-5 h-5 text-indigo-400" />
|
||||
@@ -1069,23 +1075,22 @@ const renderInitialsAvatar = (name: string, sizeClass = 'w-10 h-10 text-sm') =>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
return (
|
||||
<div className="h-auto min-h-dvh w-full bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-white flex flex-col md:flex-row p-3 sm:p-6 gap-4 sm:gap-6 overflow-x-hidden">
|
||||
|
||||
|
||||
{/* Background Glow */}
|
||||
<div className="hidden md:block absolute top-0 right-0 w-[500px] h-[500px] bg-indigo-500/5 rounded-full blur-[120px] pointer-events-none z-0"></div>
|
||||
<div className="hidden md:block absolute bottom-0 left-0 w-[500px] h-[500px] bg-purple-500/5 rounded-full blur-[120px] pointer-events-none z-0"></div>
|
||||
|
||||
<div className={`w-full relative z-10 flex overflow-hidden transition-all duration-350 ${
|
||||
isMobile
|
||||
? 'flex-col h-full bg-slate-950'
|
||||
<div className={`w-full relative z-10 flex overflow-hidden transition-all duration-350 ${isMobile
|
||||
? 'flex-col h-full bg-slate-950'
|
||||
: 'max-w-7xl h-[90vh] bg-slate-900/30 border border-slate-800/80 shadow-2xl rounded-3xl backdrop-blur-md'
|
||||
}`}>
|
||||
|
||||
}`}>
|
||||
|
||||
{/* Mobile Detail Header: Only on Mobile detail mode */}
|
||||
{showMobileHeader && (
|
||||
<div className="px-4 py-3.5 bg-slate-900 border-b border-slate-800/80 flex items-center gap-3 shrink-0">
|
||||
<button
|
||||
<button
|
||||
onClick={handleMobileBack}
|
||||
className="p-1.5 hover:bg-slate-800 rounded-lg text-slate-400 hover:text-white transition-colors"
|
||||
>
|
||||
@@ -1108,9 +1113,9 @@ return (
|
||||
<div className="p-6 border-b border-slate-800/60 flex flex-col items-center text-center">
|
||||
<div className="relative mb-3 group">
|
||||
{user?.avatar ? (
|
||||
<img
|
||||
src={user.avatar}
|
||||
alt={user.name}
|
||||
<img
|
||||
src={user.avatar}
|
||||
alt={user.name}
|
||||
className="w-20 h-20 rounded-full object-cover border-4 border-slate-700/50 shadow-xl group-hover:border-indigo-500 transition-all duration-300"
|
||||
/>
|
||||
) : (
|
||||
@@ -1133,11 +1138,10 @@ return (
|
||||
type: 'info'
|
||||
});
|
||||
}}
|
||||
className={`absolute -bottom-1 -right-1 p-1.5 rounded-full border shadow-md transition-all active:scale-90 z-20 ${
|
||||
muteNotifications
|
||||
? 'bg-slate-900 border-slate-800 text-slate-400 hover:text-slate-200'
|
||||
className={`absolute -bottom-1 -right-1 p-1.5 rounded-full border shadow-md transition-all active:scale-90 z-20 ${muteNotifications
|
||||
? 'bg-slate-900 border-slate-800 text-slate-400 hover:text-slate-200'
|
||||
: 'bg-indigo-650 border-indigo-500 text-white hover:bg-indigo-600'
|
||||
}`}
|
||||
}`}
|
||||
title={muteNotifications ? "Bật thông báo đẩy" : "Tắt thông báo đẩy"}
|
||||
>
|
||||
{muteNotifications ? (
|
||||
@@ -1186,7 +1190,7 @@ return (
|
||||
|
||||
{/* Quick Nav Links */}
|
||||
<div className="px-4 py-6 flex flex-col gap-2 border-b border-slate-800/60">
|
||||
<button
|
||||
<button
|
||||
onClick={onExploreTours}
|
||||
className="w-full py-3 px-4 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl font-bold flex items-center justify-center gap-2 shadow-lg hover:shadow-indigo-500/20 active:scale-95 transition-all duration-150"
|
||||
>
|
||||
@@ -1199,11 +1203,10 @@ return (
|
||||
<nav className="flex-1 px-3 py-6 flex flex-col gap-1.5 overflow-y-auto">
|
||||
<button
|
||||
onClick={() => handleSelectTab('tours')}
|
||||
className={`w-full py-3 px-4 rounded-xl flex items-center justify-between text-sm font-bold transition-all duration-150 ${
|
||||
activeTab === 'tours'
|
||||
? 'bg-slate-800/80 text-white border-l-4 border-indigo-500 shadow-md'
|
||||
className={`w-full py-3 px-4 rounded-xl flex items-center justify-between text-sm font-bold transition-all duration-150 ${activeTab === 'tours'
|
||||
? 'bg-slate-800/80 text-white border-l-4 border-indigo-500 shadow-md'
|
||||
: 'text-slate-400 hover:bg-slate-800/30 hover:text-slate-200'
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<Compass className="w-4 h-4" />
|
||||
@@ -1219,11 +1222,10 @@ return (
|
||||
|
||||
<button
|
||||
onClick={() => handleSelectTab('photos')}
|
||||
className={`w-full py-3 px-4 rounded-xl flex items-center justify-between text-sm font-bold transition-all duration-150 ${
|
||||
activeTab === 'photos'
|
||||
? 'bg-slate-800/80 text-white border-l-4 border-indigo-500 shadow-md'
|
||||
className={`w-full py-3 px-4 rounded-xl flex items-center justify-between text-sm font-bold transition-all duration-150 ${activeTab === 'photos'
|
||||
? 'bg-slate-800/80 text-white border-l-4 border-indigo-500 shadow-md'
|
||||
: 'text-slate-400 hover:bg-slate-800/30 hover:text-slate-200'
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<ImageIcon className="w-4 h-4" />
|
||||
@@ -1239,11 +1241,10 @@ return (
|
||||
|
||||
<button
|
||||
onClick={() => handleSelectTab('chats')}
|
||||
className={`w-full py-3 px-4 rounded-xl flex items-center justify-between text-sm font-bold transition-all duration-150 ${
|
||||
activeTab === 'chats'
|
||||
? 'bg-slate-800/80 text-white border-l-4 border-indigo-500 shadow-md'
|
||||
className={`w-full py-3 px-4 rounded-xl flex items-center justify-between text-sm font-bold transition-all duration-150 ${activeTab === 'chats'
|
||||
? 'bg-slate-800/80 text-white border-l-4 border-indigo-500 shadow-md'
|
||||
: 'text-slate-400 hover:bg-slate-800/30 hover:text-slate-200'
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<MessageSquare className="w-4 h-4" />
|
||||
@@ -1258,11 +1259,10 @@ return (
|
||||
|
||||
<button
|
||||
onClick={() => handleSelectTab('connections')}
|
||||
className={`w-full py-3 px-4 rounded-xl flex items-center justify-between text-sm font-bold transition-all duration-150 ${
|
||||
activeTab === 'connections'
|
||||
? 'bg-slate-800/80 text-white border-l-4 border-indigo-500 shadow-md'
|
||||
className={`w-full py-3 px-4 rounded-xl flex items-center justify-between text-sm font-bold transition-all duration-150 ${activeTab === 'connections'
|
||||
? 'bg-slate-800/80 text-white border-l-4 border-indigo-500 shadow-md'
|
||||
: 'text-slate-400 hover:bg-slate-800/30 hover:text-slate-200'
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<Users className="w-4 h-4" />
|
||||
@@ -1306,12 +1306,11 @@ return (
|
||||
)}
|
||||
|
||||
{/* Tab content renders here */}
|
||||
<div className={`flex-1 relative z-10 flex flex-col ${
|
||||
activeTab === 'chats' || activeTab === 'photos'
|
||||
? 'overflow-hidden p-0'
|
||||
<div className={`flex-1 relative z-10 flex flex-col ${activeTab === 'chats' || activeTab === 'photos'
|
||||
? 'overflow-hidden p-0'
|
||||
: 'p-4 md:p-8 overflow-y-auto'
|
||||
}`}>
|
||||
|
||||
}`}>
|
||||
|
||||
{/* TAB 1: MY TOURS */}
|
||||
{activeTab === 'tours' && (
|
||||
<div className="animate-in fade-in slide-in-from-bottom-2 duration-300">
|
||||
@@ -1332,7 +1331,7 @@ return (
|
||||
</div>
|
||||
<h3 className="text-lg font-bold mb-1">Chưa có hành trình nào</h3>
|
||||
<p className="text-sm text-slate-400 mb-6">Bạn chưa tham gia bất kỳ hành trình nào. Hãy bắt đầu bằng cách tìm các hành trình công khai hoặc tạo chuyến đi mới.</p>
|
||||
<button
|
||||
<button
|
||||
onClick={onExploreTours}
|
||||
className="py-2.5 px-6 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl font-bold text-sm shadow-lg shadow-indigo-600/20 transition-all flex items-center gap-2"
|
||||
>
|
||||
@@ -1352,11 +1351,11 @@ return (
|
||||
})();
|
||||
|
||||
const participant = tour.participants?.find((p: any) => p.userId === user?.id);
|
||||
const roleLabel = participant?.role === 'OWNER' ? 'Chủ tour' :
|
||||
participant?.role === 'MANAGER' ? 'Quản lý' : 'Thành viên';
|
||||
const roleLabel = participant?.role === 'OWNER' ? 'Chủ tour' :
|
||||
participant?.role === 'MANAGER' ? 'Quản lý' : 'Thành viên';
|
||||
|
||||
return (
|
||||
<div
|
||||
<div
|
||||
key={tour.id}
|
||||
className="bg-slate-800/90 hover:bg-slate-800 border border-slate-700/60 rounded-2xl overflow-hidden transition-all duration-300 hover:shadow-xl hover:shadow-indigo-950/10 group flex flex-col h-full"
|
||||
>
|
||||
@@ -1381,7 +1380,7 @@ return (
|
||||
<h3 className="text-base font-bold text-white group-hover:text-indigo-400 transition-colors line-clamp-1">
|
||||
{tour.title}
|
||||
</h3>
|
||||
|
||||
|
||||
{tour.description && (
|
||||
<p className="text-xs text-slate-400 line-clamp-2 mt-2 leading-relaxed italic">
|
||||
{tour.description}
|
||||
@@ -1443,14 +1442,14 @@ return (
|
||||
)}
|
||||
<span>Chụp ảnh</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => handleNavigateToItinerary(tour)}
|
||||
className="flex-1 py-2 px-2 bg-slate-900 hover:bg-slate-800 text-slate-850 hover:text-white rounded-xl text-xs font-bold transition-all border border-slate-800 hover:border-slate-700 flex items-center justify-center gap-1"
|
||||
>
|
||||
<span>Chi tiết hành trình</span>
|
||||
<ChevronRight className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => handleNavigateToItinerary(tour)}
|
||||
className="flex-1 py-2 px-2 bg-slate-900 hover:bg-slate-800 text-slate-850 hover:text-white rounded-xl text-xs font-bold transition-all border border-slate-800 hover:border-slate-700 flex items-center justify-center gap-1"
|
||||
>
|
||||
<span>Chi tiết hành trình</span>
|
||||
<ChevronRight className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Emergency Share Button - moved to bottom */}
|
||||
@@ -1502,31 +1501,28 @@ return (
|
||||
<div className="flex gap-2 border-b border-slate-800/60 pb-3 mb-6">
|
||||
<button
|
||||
onClick={() => setConnectionSubTab('list')}
|
||||
className={`px-4 py-1.5 rounded-lg text-xs font-bold transition-all ${
|
||||
connectionSubTab === 'list'
|
||||
? 'bg-indigo-600 text-white shadow-md'
|
||||
className={`px-4 py-1.5 rounded-lg text-xs font-bold transition-all ${connectionSubTab === 'list'
|
||||
? 'bg-indigo-600 text-white shadow-md'
|
||||
: 'text-slate-400 hover:bg-slate-800 hover:text-slate-200'
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
Danh sách kết nối
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setConnectionSubTab('search')}
|
||||
className={`px-4 py-1.5 rounded-lg text-xs font-bold transition-all flex items-center gap-1.5 ${
|
||||
connectionSubTab === 'search'
|
||||
? 'bg-indigo-600 text-white shadow-md'
|
||||
className={`px-4 py-1.5 rounded-lg text-xs font-bold transition-all flex items-center gap-1.5 ${connectionSubTab === 'search'
|
||||
? 'bg-indigo-600 text-white shadow-md'
|
||||
: 'text-slate-400 hover:bg-slate-800 hover:text-slate-200'
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
<Search className="w-3.5 h-3.5" /> Tìm thành viên mới
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setConnectionSubTab('pending')}
|
||||
className={`px-4 py-1.5 rounded-lg text-xs font-bold transition-all relative ${
|
||||
connectionSubTab === 'pending'
|
||||
? 'bg-indigo-600 text-white shadow-md'
|
||||
className={`px-4 py-1.5 rounded-lg text-xs font-bold transition-all relative ${connectionSubTab === 'pending'
|
||||
? 'bg-indigo-600 text-white shadow-md'
|
||||
: 'text-slate-400 hover:bg-slate-800 hover:text-slate-200'
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
Yêu cầu chờ duyệt
|
||||
{receivedRequests.length > 0 && (
|
||||
@@ -1557,15 +1553,15 @@ return (
|
||||
{connections.map((conn) => {
|
||||
const connUser = conn.targetUser;
|
||||
return (
|
||||
<div
|
||||
<div
|
||||
key={conn.id}
|
||||
className="bg-slate-900/50 hover:bg-slate-900/70 border border-slate-800/60 rounded-2xl p-5 flex items-center justify-between transition-all"
|
||||
>
|
||||
<div className="flex items-center gap-3.5 min-w-0">
|
||||
{connUser.avatar ? (
|
||||
<img
|
||||
src={connUser.avatar}
|
||||
alt={connUser.name}
|
||||
<img
|
||||
src={connUser.avatar}
|
||||
alt={connUser.name}
|
||||
className="w-12 h-12 rounded-full object-cover border border-slate-700"
|
||||
/>
|
||||
) : (
|
||||
@@ -1575,11 +1571,10 @@ return (
|
||||
<h4 className="text-sm font-bold text-white truncate">{connUser.name}</h4>
|
||||
<p className="text-[10px] text-slate-400 truncate">{connUser.email}</p>
|
||||
<div className="mt-1.5 flex items-center gap-1.5">
|
||||
<span className={`px-2 py-0.5 rounded text-[8px] font-black uppercase tracking-wider border ${
|
||||
conn.type === 'FAMILY'
|
||||
? 'bg-rose-950/40 text-rose-300 border-rose-900/50'
|
||||
<span className={`px-2 py-0.5 rounded text-[8px] font-black uppercase tracking-wider border ${conn.type === 'FAMILY'
|
||||
? 'bg-rose-950/40 text-rose-300 border-rose-900/50'
|
||||
: 'bg-indigo-950/40 text-indigo-300 border-indigo-900/50'
|
||||
}`}>
|
||||
}`}>
|
||||
{conn.type === 'FAMILY' ? t('familyGroup') : t('friends')}
|
||||
</span>
|
||||
</div>
|
||||
@@ -1661,15 +1656,15 @@ return (
|
||||
const statusText = getConnectionStatusText(usr.id);
|
||||
|
||||
return (
|
||||
<div
|
||||
<div
|
||||
key={usr.id}
|
||||
className="bg-slate-900/40 border border-slate-800/60 rounded-2xl p-4 flex items-center justify-between hover:bg-slate-900/60 transition-all"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
{usr.avatar ? (
|
||||
<img
|
||||
src={usr.avatar}
|
||||
alt={usr.name}
|
||||
<img
|
||||
src={usr.avatar}
|
||||
alt={usr.name}
|
||||
className="w-10 h-10 rounded-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
@@ -1683,11 +1678,10 @@ return (
|
||||
|
||||
<div>
|
||||
{statusText ? (
|
||||
<span className={`px-3 py-1 rounded-lg text-xs font-bold border ${
|
||||
statusText === t('friends') || statusText === t('familyGroup')
|
||||
<span className={`px-3 py-1 rounded-lg text-xs font-bold border ${statusText === t('friends') || statusText === t('familyGroup')
|
||||
? 'bg-emerald-950/30 border-emerald-900/50 text-emerald-300'
|
||||
: 'bg-slate-800/80 border-slate-700 text-slate-400'
|
||||
}`}>
|
||||
}`}>
|
||||
{statusText}
|
||||
</span>
|
||||
) : (
|
||||
@@ -1724,15 +1718,15 @@ return (
|
||||
) : (
|
||||
<div className="flex flex-col gap-3">
|
||||
{receivedRequests.map((req) => (
|
||||
<div
|
||||
<div
|
||||
key={req.id}
|
||||
className="bg-slate-900/50 border border-slate-800/60 rounded-2xl p-4 flex items-center justify-between"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
{req.requester?.avatar ? (
|
||||
<img
|
||||
src={req.requester.avatar}
|
||||
alt={req.requester.name}
|
||||
<img
|
||||
src={req.requester.avatar}
|
||||
alt={req.requester.name}
|
||||
className="w-10 h-10 rounded-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
@@ -1778,15 +1772,15 @@ return (
|
||||
) : (
|
||||
<div className="flex flex-col gap-3">
|
||||
{sentRequests.map((req) => (
|
||||
<div
|
||||
<div
|
||||
key={req.id}
|
||||
className="bg-slate-900/50 border border-slate-800/60 rounded-2xl p-4 flex items-center justify-between"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
{req.receiver?.avatar ? (
|
||||
<img
|
||||
src={req.receiver.avatar}
|
||||
alt={req.receiver.name}
|
||||
<img
|
||||
src={req.receiver.avatar}
|
||||
alt={req.receiver.name}
|
||||
className="w-10 h-10 rounded-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
@@ -1822,17 +1816,17 @@ return (
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* TAB 4: REALTIME CHAT */}
|
||||
{activeTab === 'chats' && (
|
||||
<div className="flex flex-col h-[100dvh] md:h-auto w-full bg-slate-900/40 border-0 md:border border-slate-800/80 md:rounded-3xl overflow-hidden flex animate-in fade-in slide-in-from-bottom-2 duration-300">
|
||||
|
||||
{/* TAB 4: REALTIME CHAT */}
|
||||
{activeTab === 'chats' && (
|
||||
<div className="flex flex-col h-[100dvh] md:h-auto w-full bg-slate-900/40 border-0 md:border border-slate-800/80 md:rounded-3xl overflow-hidden flex animate-in fade-in slide-in-from-bottom-2 duration-300">
|
||||
|
||||
{/* Chats List sidebar: show if not mobile OR if mobile and no active chat user */}
|
||||
{(!isMobile || !activeChatUser) && (
|
||||
<div className={`${isMobile ? 'w-full' : 'w-72 border-r border-slate-800/60'} bg-slate-950/25 flex flex-col shrink-0`}>
|
||||
<div className="p-4 border-b border-slate-800/60">
|
||||
<h3 className="text-xs font-black uppercase text-slate-400 tracking-wider">Chọn người hội thoại</h3>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-2 flex flex-col gap-1">
|
||||
{connections.length === 0 ? (
|
||||
<div className="text-center py-8 text-xs text-slate-500 italic px-4">
|
||||
@@ -1847,16 +1841,15 @@ return (
|
||||
<button
|
||||
key={conn.id}
|
||||
onClick={() => handleSelectChatUser(connUser)}
|
||||
className={`w-full p-3 rounded-xl flex items-center gap-3 transition-all text-left ${
|
||||
isActive
|
||||
? 'bg-indigo-650 text-white shadow-md'
|
||||
className={`w-full p-3 rounded-xl flex items-center gap-3 transition-all text-left ${isActive
|
||||
? 'bg-indigo-650 text-white shadow-md'
|
||||
: 'text-slate-350 hover:bg-slate-850/40 hover:text-slate-100'
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
{connUser.avatar ? (
|
||||
<img
|
||||
src={connUser.avatar}
|
||||
alt={connUser.name}
|
||||
<img
|
||||
src={connUser.avatar}
|
||||
alt={connUser.name}
|
||||
className={`w-10 h-10 rounded-full object-cover ${isActive ? 'border-2 border-white' : 'border border-slate-700'}`}
|
||||
/>
|
||||
) : (
|
||||
@@ -1902,9 +1895,9 @@ return (
|
||||
</button>
|
||||
)}
|
||||
{activeChatUser.avatar ? (
|
||||
<img
|
||||
src={activeChatUser.avatar}
|
||||
alt={activeChatUser.name}
|
||||
<img
|
||||
src={activeChatUser.avatar}
|
||||
alt={activeChatUser.name}
|
||||
className="w-10 h-10 rounded-full object-cover border border-indigo-500"
|
||||
/>
|
||||
) : (
|
||||
@@ -1931,20 +1924,19 @@ return (
|
||||
chatMessages.map((msg) => {
|
||||
const isMe = msg.senderId === user.id;
|
||||
return (
|
||||
<div
|
||||
<div
|
||||
key={msg.id}
|
||||
className={`flex flex-col max-w-[70%] ${isMe ? 'self-end items-end' : 'self-start items-start'}`}
|
||||
>
|
||||
<div className={`p-3.5 rounded-2xl text-xs font-medium leading-relaxed flex flex-col gap-1.5 relative group ${
|
||||
isMe
|
||||
? 'bg-indigo-650 text-white rounded-br-none shadow-md shadow-indigo-950/20'
|
||||
<div className={`p-3.5 rounded-2xl text-xs font-medium leading-relaxed flex flex-col gap-1.5 relative group ${isMe
|
||||
? 'bg-indigo-650 text-white rounded-br-none shadow-md shadow-indigo-950/20'
|
||||
: 'bg-slate-800 text-slate-200 rounded-bl-none border border-slate-700/60'
|
||||
}`}>
|
||||
}`}>
|
||||
{msg.attachmentUrl && (
|
||||
<div className="relative rounded-lg overflow-hidden border border-black/10 max-w-xs group/img">
|
||||
<img
|
||||
src={msg.attachmentUrl}
|
||||
alt="Đính kèm"
|
||||
<img
|
||||
src={msg.attachmentUrl}
|
||||
alt="Đính kèm"
|
||||
className="w-full max-h-48 object-cover hover:brightness-95 transition-all"
|
||||
/>
|
||||
<button
|
||||
@@ -1959,15 +1951,14 @@ return (
|
||||
)}
|
||||
|
||||
{msg.latitude !== undefined && msg.latitude !== null && (
|
||||
<a
|
||||
<a
|
||||
href={`https://www.google.com/maps/search/?api=1&query=${msg.latitude},${msg.longitude}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={`flex items-center gap-1.5 px-3 py-2 rounded-xl text-[11px] font-bold transition-all border ${
|
||||
isMe
|
||||
? 'bg-indigo-750 border-indigo-750/30 text-indigo-100 hover:bg-indigo-800'
|
||||
className={`flex items-center gap-1.5 px-3 py-2 rounded-xl text-[11px] font-bold transition-all border ${isMe
|
||||
? 'bg-indigo-750 border-indigo-750/30 text-indigo-100 hover:bg-indigo-800'
|
||||
: 'bg-slate-900/60 border-slate-800/80 text-slate-200 hover:bg-slate-900'
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
<MapPin className="w-3.5 h-3.5 text-rose-500 shrink-0 animate-bounce" />
|
||||
<div className="flex flex-col text-left">
|
||||
@@ -2024,11 +2015,11 @@ return (
|
||||
)}
|
||||
|
||||
{/* Chat Input form */}
|
||||
<form
|
||||
<form
|
||||
onSubmit={handleSendMessage}
|
||||
className="p-4 border-t border-slate-800/80 bg-slate-900/60 flex gap-2 items-center"
|
||||
>
|
||||
<input
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
ref={fileInputRef}
|
||||
@@ -2055,9 +2046,8 @@ return (
|
||||
type="button"
|
||||
onClick={handleGetLocation}
|
||||
disabled={isLocating}
|
||||
className={`p-3 bg-slate-900 border border-slate-800 hover:bg-slate-855 text-slate-400 hover:text-white rounded-2xl transition-all shadow-sm active:scale-95 flex items-center justify-center shrink-0 ${
|
||||
isLocating ? 'animate-pulse' : ''
|
||||
}`}
|
||||
className={`p-3 bg-slate-900 border border-slate-800 hover:bg-slate-855 text-slate-400 hover:text-white rounded-2xl transition-all shadow-sm active:scale-95 flex items-center justify-center shrink-0 ${isLocating ? 'animate-pulse' : ''
|
||||
}`}
|
||||
title="Chia sẻ vị trí GPS hiện tại"
|
||||
>
|
||||
{isLocating ? (
|
||||
@@ -2099,128 +2089,128 @@ return (
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Emergency Share Configuration Modal */}
|
||||
{sharingTour && (
|
||||
<div className="fixed inset-0 z-[9999] flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md animate-in fade-in duration-300">
|
||||
<div className="w-full max-w-lg bg-slate-900 border border-slate-800 rounded-[32px] overflow-hidden shadow-2xl animate-in zoom-in-95 duration-300">
|
||||
{/* Modal Header */}
|
||||
<div className="p-6 border-b border-slate-800/80 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3 text-rose-500">
|
||||
<ShieldAlert className="w-6 h-6 animate-pulse" />
|
||||
<h3 className="text-lg font-black uppercase tracking-tight text-white">{t('emergencyShare')}</h3>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setSharingTour(null)}
|
||||
className="p-2 hover:bg-slate-800 rounded-xl text-slate-400 hover:text-white transition-all active:scale-95"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Modal Body */}
|
||||
<div className="p-6 space-y-6">
|
||||
<div>
|
||||
<h4 className="text-sm font-bold text-white mb-1">{sharingTour.title}</h4>
|
||||
<p className="text-xs text-slate-450 leading-relaxed">{t('emergencyShareTooltip')}</p>
|
||||
</div>
|
||||
|
||||
{loadingShare ? (
|
||||
<div className="py-8 flex flex-col items-center justify-center gap-2">
|
||||
<Loader2 className="w-8 h-8 text-rose-500 animate-spin" />
|
||||
<span className="text-xs text-slate-500 font-bold">{t('loading')}</span>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Share Activation Toggle */}
|
||||
<div className="bg-slate-950/40 border border-slate-800/60 p-4 rounded-2xl flex items-center justify-between">
|
||||
<div>
|
||||
<span className="text-xs font-bold text-slate-300">Kích hoạt đường dẫn cứu hộ</span>
|
||||
{/* Emergency Share Configuration Modal */}
|
||||
{sharingTour && (
|
||||
<div className="fixed inset-0 z-[9999] flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md animate-in fade-in duration-300">
|
||||
<div className="w-full max-w-lg bg-slate-900 border border-slate-800 rounded-[32px] overflow-hidden shadow-2xl animate-in zoom-in-95 duration-300">
|
||||
{/* Modal Header */}
|
||||
<div className="p-6 border-b border-slate-800/80 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3 text-rose-500">
|
||||
<ShieldAlert className="w-6 h-6 animate-pulse" />
|
||||
<h3 className="text-lg font-black uppercase tracking-tight text-white">{t('emergencyShare')}</h3>
|
||||
</div>
|
||||
{shareStatus && (
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={shareStatus.isEnabled}
|
||||
onChange={(e) => handleToggleShare(e.target.checked)}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-11 h-6 bg-slate-800 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-rose-600"></div>
|
||||
</label>
|
||||
<button
|
||||
onClick={() => setSharingTour(null)}
|
||||
className="p-2 hover:bg-slate-800 rounded-xl text-slate-400 hover:text-white transition-all active:scale-95"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Modal Body */}
|
||||
<div className="p-6 space-y-6">
|
||||
<div>
|
||||
<h4 className="text-sm font-bold text-white mb-1">{sharingTour.title}</h4>
|
||||
<p className="text-xs text-slate-450 leading-relaxed">{t('emergencyShareTooltip')}</p>
|
||||
</div>
|
||||
|
||||
{loadingShare ? (
|
||||
<div className="py-8 flex flex-col items-center justify-center gap-2">
|
||||
<Loader2 className="w-8 h-8 text-rose-500 animate-spin" />
|
||||
<span className="text-xs text-slate-500 font-bold">{t('loading')}</span>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Share Activation Toggle */}
|
||||
<div className="bg-slate-950/40 border border-slate-800/60 p-4 rounded-2xl flex items-center justify-between">
|
||||
<div>
|
||||
<span className="text-xs font-bold text-slate-300">Kích hoạt đường dẫn cứu hộ</span>
|
||||
</div>
|
||||
{shareStatus && (
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={shareStatus.isEnabled}
|
||||
onChange={(e) => handleToggleShare(e.target.checked)}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-11 h-6 bg-slate-800 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-rose-600"></div>
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{shareStatus?.isEnabled && (
|
||||
<>
|
||||
{/* Configuration: Language and Theme selectors */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<label className="block text-[10px] font-black uppercase tracking-widest text-slate-500">{t('languageSelect')}</label>
|
||||
<select
|
||||
value={lang}
|
||||
onChange={(e) => changeLanguage(e.target.value as any)}
|
||||
className="w-full bg-slate-950 border border-slate-800 text-white rounded-xl px-3 py-2.5 text-xs font-bold focus:outline-none cursor-pointer"
|
||||
>
|
||||
<option value="vi">Tiếng Việt</option>
|
||||
<option value="en">English</option>
|
||||
<option value="zh">中文</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="block text-[10px] font-black uppercase tracking-widest text-slate-500">{t('themeSelect')}</label>
|
||||
<select
|
||||
value={theme}
|
||||
onChange={(e) => changeTheme(e.target.value as any)}
|
||||
className="w-full bg-slate-950 border border-slate-800 text-white rounded-xl px-3 py-2.5 text-xs font-bold focus:outline-none cursor-pointer"
|
||||
>
|
||||
<option value="light">{t('themeLight')}</option>
|
||||
<option value="dark">{t('themeDark')}</option>
|
||||
<option value="system">{t('themeSystem')}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Shareable Link Input with Copy button */}
|
||||
<div className="bg-rose-950/10 border border-rose-950/20 p-4 rounded-2xl space-y-2">
|
||||
<div className="text-[10px] font-black text-rose-400 uppercase tracking-widest">Đường dẫn khẩn cấp:</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="text"
|
||||
readOnly
|
||||
value={`${window.location.origin}/journey/${shareStatus.token}?lang=${lang}&theme=${theme}`}
|
||||
className="flex-1 bg-slate-950 border border-slate-800 rounded-xl px-3 py-2.5 text-xs text-slate-200 select-all outline-none"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(`${window.location.origin}/journey/${shareStatus.token}?lang=${lang}&theme=${theme}`);
|
||||
notify({ title: 'Thành công', message: 'Đã sao chép liên kết!', type: 'success' });
|
||||
}}
|
||||
className="bg-rose-600 hover:bg-rose-700 text-white font-bold px-4 py-2.5 rounded-xl text-xs transition-all active:scale-95 shrink-0"
|
||||
>
|
||||
{t('copyShareLink')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{shareStatus?.isEnabled && (
|
||||
<>
|
||||
{/* Configuration: Language and Theme selectors */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<label className="block text-[10px] font-black uppercase tracking-widest text-slate-500">{t('languageSelect')}</label>
|
||||
<select
|
||||
value={lang}
|
||||
onChange={(e) => changeLanguage(e.target.value as any)}
|
||||
className="w-full bg-slate-950 border border-slate-800 text-white rounded-xl px-3 py-2.5 text-xs font-bold focus:outline-none cursor-pointer"
|
||||
>
|
||||
<option value="vi">Tiếng Việt</option>
|
||||
<option value="en">English</option>
|
||||
<option value="zh">中文</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="block text-[10px] font-black uppercase tracking-widest text-slate-500">{t('themeSelect')}</label>
|
||||
<select
|
||||
value={theme}
|
||||
onChange={(e) => changeTheme(e.target.value as any)}
|
||||
className="w-full bg-slate-950 border border-slate-800 text-white rounded-xl px-3 py-2.5 text-xs font-bold focus:outline-none cursor-pointer"
|
||||
>
|
||||
<option value="light">{t('themeLight')}</option>
|
||||
<option value="dark">{t('themeDark')}</option>
|
||||
<option value="system">{t('themeSystem')}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Shareable Link Input with Copy button */}
|
||||
<div className="bg-rose-950/10 border border-rose-950/20 p-4 rounded-2xl space-y-2">
|
||||
<div className="text-[10px] font-black text-rose-400 uppercase tracking-widest">Đường dẫn khẩn cấp:</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="text"
|
||||
readOnly
|
||||
value={`${window.location.origin}/journey/${shareStatus.token}?lang=${lang}&theme=${theme}`}
|
||||
className="flex-1 bg-slate-950 border border-slate-800 rounded-xl px-3 py-2.5 text-xs text-slate-200 select-all outline-none"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(`${window.location.origin}/journey/${shareStatus.token}?lang=${lang}&theme=${theme}`);
|
||||
notify({ title: 'Thành công', message: 'Đã sao chép liên kết!', type: 'success' });
|
||||
}}
|
||||
className="bg-rose-600 hover:bg-rose-700 text-white font-bold px-4 py-2.5 rounded-xl text-xs transition-all active:scale-95 shrink-0"
|
||||
>
|
||||
{t('copyShareLink')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Modal Footer */}
|
||||
<div className="p-6 bg-slate-950/20 border-t border-slate-800/80 flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSharingTour(null)}
|
||||
className="py-2.5 px-6 bg-slate-800 hover:bg-slate-700 text-white font-bold rounded-xl text-xs transition-all active:scale-95"
|
||||
>
|
||||
Đóng
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* Modal Footer */}
|
||||
<div className="p-6 bg-slate-950/20 border-t border-slate-800/80 flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSharingTour(null)}
|
||||
className="py-2.5 px-6 bg-slate-800 hover:bg-slate-700 text-white font-bold rounded-xl text-xs transition-all active:scale-95"
|
||||
>
|
||||
Đóng
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { User, Mail, Lock, ArrowRight, ChevronLeft, Phone, MapPin, ShieldCheck } from 'lucide-react';
|
||||
import { Capacitor } from '@capacitor/core';
|
||||
import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';
|
||||
|
||||
interface SignupPageProps {
|
||||
onBack: () => void;
|
||||
@@ -69,8 +71,67 @@ const SignupPage: React.FC<SignupPageProps> = ({ onBack, onSuccess }) => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleNativeGoogleLogin = async () => {
|
||||
setError('');
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const user = await GoogleAuth.signIn();
|
||||
console.log('[SignupPage] Native Google user received:', user);
|
||||
|
||||
const idToken = user.authentication.idToken;
|
||||
if (!idToken) {
|
||||
throw new Error('Không nhận được token từ Google.');
|
||||
}
|
||||
|
||||
const response = await fetch(`/api/v1/auth/google`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ credential: idToken }),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
if (!response.ok) {
|
||||
throw new Error(data.message || 'Đăng ký bằng Google thất bại');
|
||||
}
|
||||
|
||||
localStorage.removeItem('guest_token');
|
||||
localStorage.removeItem('guest_user');
|
||||
localStorage.setItem('token', data.access_token);
|
||||
localStorage.setItem('user', JSON.stringify(data.user));
|
||||
|
||||
const pendingInviteToken = localStorage.getItem('pendingInviteToken');
|
||||
if (pendingInviteToken) {
|
||||
console.log('[SignupPage] Auto-joining tour with pending token after Google signup');
|
||||
await fetch(`/api/v1/tours/join-by-token`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${data.access_token}`,
|
||||
},
|
||||
body: JSON.stringify({ token: pendingInviteToken }),
|
||||
}).then(res => {
|
||||
if (res.ok) {
|
||||
localStorage.removeItem('pendingInviteToken');
|
||||
console.log('[SignupPage] Successfully joined tour after Google signup');
|
||||
} else {
|
||||
console.warn('[SignupPage] Failed to join tour after Google signup:', res.status);
|
||||
}
|
||||
}).catch((e) => console.error('Lỗi tự động gia nhập:', e));
|
||||
}
|
||||
|
||||
onSuccess();
|
||||
} catch (err: any) {
|
||||
console.error('[SignupPage] Native Google signup error:', err);
|
||||
if (err?.message !== 'Sign in window was closed' && err?.message !== '12501') {
|
||||
setError(err.message || 'Đăng ký bằng Google thất bại');
|
||||
}
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (step !== 'form') return;
|
||||
if (step !== 'form' || Capacitor.isNativePlatform()) return;
|
||||
|
||||
const timer = setTimeout(() => {
|
||||
if (typeof window !== 'undefined' && (window as any).google) {
|
||||
@@ -313,7 +374,23 @@ const SignupPage: React.FC<SignupPageProps> = ({ onBack, onSuccess }) => {
|
||||
<span className="relative px-3 bg-[var(--surface)] text-xs font-bold text-[var(--text-muted)] uppercase">Hoặc</span>
|
||||
</div>
|
||||
|
||||
<div id="google-signin-btn-signup" className="w-full flex justify-center"></div>
|
||||
{Capacitor.isNativePlatform() ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleNativeGoogleLogin}
|
||||
className="w-full flex items-center justify-center gap-3 bg-white hover:bg-slate-50 text-slate-800 font-bold py-3.5 px-4 rounded-2xl border border-slate-200 transition-all active:scale-[0.98] cursor-pointer text-sm shadow-sm"
|
||||
>
|
||||
<svg className="w-5 h-5" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="#EA4335"
|
||||
d="M12.24 10.285V14.4h6.887c-.648 2.41-2.519 4.114-5.136 4.114-3.51 0-6.357-2.89-6.357-6.457 0-3.568 2.848-6.458 6.357-6.458 1.614 0 3.08.618 4.19 1.625l3.03-3.03C19.045 2.11 15.895 1 12.24 1 6.033 1 1 6.033 1 12.24s5.033 11.24 11.24 11.24c5.84 0 10.74-4.14 11.24-9.84v-3.355H12.24z"
|
||||
/>
|
||||
</svg>
|
||||
Đăng ký bằng Google
|
||||
</button>
|
||||
) : (
|
||||
<div id="google-signin-btn-signup" className="w-full flex justify-center"></div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React, { useState, useEffect, useMemo, useRef } from 'react';
|
||||
import { io } from 'socket.io-client';
|
||||
import { Capacitor } from '@capacitor/core';
|
||||
import { jsPDF } from 'jspdf';
|
||||
import autoTable from 'jspdf-autotable';
|
||||
import { robotoBase64, robotoBoldBase64 } from '../utils/pdfFont';
|
||||
@@ -1571,7 +1572,9 @@ export const TourDetailPage = ({
|
||||
useEffect(() => {
|
||||
if (!currentTour) return;
|
||||
|
||||
const socket = io(); // Kết nối qua Proxy của Vite (cùng origin)
|
||||
const socket = Capacitor.isNativePlatform()
|
||||
? io(import.meta.env.VITE_BACKEND_URL || 'https://yotrip.labz.io.vn')
|
||||
: io(); // Kết nối qua Proxy của Vite (cùng origin)
|
||||
|
||||
socket.on('connect', () => {
|
||||
socket.emit('joinTour', currentTour.id);
|
||||
@@ -1910,7 +1913,7 @@ export const TourDetailPage = ({
|
||||
<div className="min-h-dvh bg-[var(--background)] pb-20 overflow-x-hidden">
|
||||
{/* Top Navigation Bar */}
|
||||
<div className="sticky top-0 z-30 bg-[var(--surface)]/80 backdrop-blur-md border-b border-[var(--border)] px-4 py-3 flex items-center justify-between">
|
||||
<button onClick={onBack} className="p-2 hover:bg-[var(--background)] rounded-full transition-colors">
|
||||
<button onClick={activeTab === 'chat' ? () => setActiveTab('plan') : onBack} className="p-2 hover:bg-[var(--background)] rounded-full transition-colors">
|
||||
<ChevronLeft className="w-5 h-5 sm:w-6 sm:h-6 text-[var(--text-secondary)]" />
|
||||
</button>
|
||||
<h1 className="text-base sm:text-lg font-bold text-[var(--text-primary)] truncate px-4 flex-1 text-center">
|
||||
@@ -2210,7 +2213,7 @@ export const TourDetailPage = ({
|
||||
{/* Main Content Area - Điều chỉnh max-width khi ở chế độ bản đồ */}
|
||||
<div className={`${activeTab === 'plan' && viewMode === 'map' ? 'w-full !px-0 !pb-0' : 'max-w-2xl mx-auto px-4 pb-24'}`}>
|
||||
{/* Tab Switcher */}
|
||||
{!(activeTab === 'plan' && viewMode === 'map') && (
|
||||
{!(activeTab === 'plan' && viewMode === 'map') && activeTab !== 'chat' && (
|
||||
<div className="bg-white rounded-2xl shadow-lg border border-gray-100 p-1 flex mb-6 sticky top-[60px] z-40">
|
||||
{tabs.map((tab) => (
|
||||
<button
|
||||
|
||||
@@ -0,0 +1,84 @@
|
||||
import { Capacitor } from '@capacitor/core';
|
||||
import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';
|
||||
import { LocalNotifications } from '@capacitor/local-notifications';
|
||||
|
||||
function rewriteUrls(obj: any, backendUrl: string): any {
|
||||
if (obj === null || obj === undefined) return obj;
|
||||
if (typeof obj === 'string') {
|
||||
if (obj.startsWith('/uploads/')) {
|
||||
return `${backendUrl}${obj}`;
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
if (Array.isArray(obj)) {
|
||||
return obj.map(item => rewriteUrls(item, backendUrl));
|
||||
}
|
||||
if (typeof obj === 'object') {
|
||||
const newObj: any = {};
|
||||
for (const key in obj) {
|
||||
if (Object.prototype.hasOwnProperty.call(obj, key)) {
|
||||
newObj[key] = rewriteUrls(obj[key], backendUrl);
|
||||
}
|
||||
}
|
||||
return newObj;
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
|
||||
if (Capacitor.isNativePlatform()) {
|
||||
// Initialize native Google Login client to prevent NullPointerException crashes
|
||||
try {
|
||||
GoogleAuth.initialize({
|
||||
clientId: import.meta.env.VITE_GOOGLE_CLIENT_ID || '639044397050-7hair384u6lle941h033trut1s3q47l4.apps.googleusercontent.com',
|
||||
scopes: ['profile', 'email'],
|
||||
grantOfflineAccess: true,
|
||||
});
|
||||
console.log('[Native OAuth] GoogleAuth initialized successfully.');
|
||||
} catch (e) {
|
||||
console.error('[Native OAuth] Failed to initialize GoogleAuth client:', e);
|
||||
}
|
||||
|
||||
// Request native local notification permission on startup
|
||||
try {
|
||||
LocalNotifications.requestPermissions().then(result => {
|
||||
console.log('[LocalNotifications] Permissions requested:', result);
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('[LocalNotifications] Failed to request permissions:', e);
|
||||
}
|
||||
|
||||
const backendUrl = import.meta.env.VITE_BACKEND_URL || 'https://yotrip.labz.io.vn';
|
||||
|
||||
const originalFetch = window.fetch;
|
||||
window.fetch = async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
|
||||
let url = input;
|
||||
if (typeof url === 'string') {
|
||||
if (url.startsWith('/api/') || url.startsWith('/uploads/')) {
|
||||
url = `${backendUrl}${url}`;
|
||||
}
|
||||
} else if (url instanceof URL) {
|
||||
if (url.pathname.startsWith('/api/') || url.pathname.startsWith('/uploads/')) {
|
||||
url = new URL(`${backendUrl}${url.pathname}${url.search}`);
|
||||
}
|
||||
} else if (url && typeof url === 'object' && 'url' in url) {
|
||||
// If it is a Request object
|
||||
const req = url as Request;
|
||||
const reqUrl = req.url;
|
||||
if (reqUrl.startsWith('/') || new URL(reqUrl).pathname.startsWith('/api/') || new URL(reqUrl).pathname.startsWith('/uploads/')) {
|
||||
const targetUrl = reqUrl.startsWith('/') ? `${backendUrl}${reqUrl}` : reqUrl.replace(new URL(reqUrl).origin, backendUrl);
|
||||
url = new Request(targetUrl, req);
|
||||
}
|
||||
}
|
||||
|
||||
const response = await originalFetch(url, init);
|
||||
|
||||
// Override the json method of this specific response instance
|
||||
const originalJson = response.json;
|
||||
response.json = async () => {
|
||||
const data = await originalJson.call(response);
|
||||
return rewriteUrls(data, backendUrl);
|
||||
};
|
||||
|
||||
return response;
|
||||
};
|
||||
}
|
||||
@@ -23,6 +23,33 @@ export default defineConfig(({ mode }) => {
|
||||
'@': path.resolve(__dirname, './src'),
|
||||
},
|
||||
},
|
||||
build: {
|
||||
chunkSizeWarningLimit: 1500,
|
||||
rollupOptions: {
|
||||
output: {
|
||||
manualChunks(id) {
|
||||
if (id.includes('node_modules')) {
|
||||
if (id.includes('react') || id.includes('scheduler')) {
|
||||
return 'vendor-react';
|
||||
}
|
||||
if (id.includes('leaflet')) {
|
||||
return 'vendor-maps';
|
||||
}
|
||||
if (id.includes('jspdf')) {
|
||||
return 'vendor-pdf';
|
||||
}
|
||||
if (id.includes('lucide-react')) {
|
||||
return 'vendor-icons';
|
||||
}
|
||||
if (id.includes('quill')) {
|
||||
return 'vendor-editor';
|
||||
}
|
||||
return 'vendor-others';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
server: {
|
||||
port: 3002,
|
||||
host: true,
|
||||
|
||||
Reference in New Issue
Block a user