[feat] Added frontend translations and help tooltips and location dialog. (#21)

1.Add missing translations for the frontend.
2.Add a language parameter to the auth APIs.
3.Add help tooltips.
4.Update the language switch button component.
5.Modify the high-latency pop-up workflow.
6.Add a button that redirects to GitHub.
7.Update the Discord link to a permanent invitation.

---------

Co-authored-by: teemo <35056621+WYK96@users.noreply.github.com>

Author: ZuoTong-x

.gitignore

@@ -53,10 +53,14 @@ next-env.d.ts
 # cursor IDE
 .cursor
 
+# vscode
+.vscode/
+
 # motion_data
 motion_data/
 *.zip
 data/
 
 # weights
 weights/
+

app/components/Scene.tsx

@@ -1,6 +1,13 @@
 import React, { ReactElement } from 'react'
 import useBabylonJS from '../hooks/useBabylonJS'
 
+/**
+ * Scene component.
+ *
+ * Hosts the BabylonJS canvas and binds the returned ref from useBabylonJS.
+ *
+ * @returns ReactElement The canvas element used by BabylonJS.
+ */
 function Scene(): ReactElement {
   const { canvas: canvas } = useBabylonJS()
 

app/components/auth/Authenticator.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useState } from 'react'
 import { useDispatch } from 'react-redux'
 import { setAuthState } from '@/features/auth/authStore'
@@ -44,7 +46,7 @@ export default function Authenticator({ onAuthSuccess }: AuthenticatorProps) {
   const [password, setPassword] = useState('')
   const [showPassword, setShowPassword] = useState(false)
   const [showError, setShowError] = useState(false)
-  const [errorMessage, setErrorMessage] = useState('Invalid email or password')
+  const [errorMessage, setErrorMessage] = useState('')
   const [isLoading, setIsLoading] = useState(false)
   const dispatch = useDispatch()
   const { loadUserCharacters } = usePromptingSettings()
@@ -53,7 +55,7 @@ export default function Authenticator({ onAuthSuccess }: AuthenticatorProps) {
   const { showSuccessNotification } = useSuccessNotification()
   const { showErrorNotification } = useErrorNotification()
   const [codeErrorMessage, setCodeErrorMessage] = useState('')
-  const { t } = useTranslation()
+  const { t, i18n } = useTranslation()
 
   const getCurrentPositionAsync = (options: PositionOptions) => {
     return new Promise((resolve, reject) => {
@@ -99,7 +101,11 @@ export default function Authenticator({ onAuthSuccess }: AuthenticatorProps) {
     const AUTH_STORAGE_KEY = 'dlp3d_auth_state'
     if (activeTab === 'register') {
       try {
-        const response = await verifyUser({ username: email, password })
+        const response = await verifyUser({
+          username: email,
+          password,
+          language: i18n.language,
+        })
         setIsLoading(false)
         if (response.auth_code === 200) {
           setNeedCode(response.confirmation_required)
@@ -119,7 +125,11 @@ export default function Authenticator({ onAuthSuccess }: AuthenticatorProps) {
       }
     } else {
       try {
-        const response = await authenticateUser({ username: email, password })
+        const response = await authenticateUser({
+          username: email,
+          password,
+          language: i18n.language,
+        })
         if (response.auth_code === 200) {
           try {
             const position = await getCurrentPositionAsync({
@@ -245,13 +255,15 @@ export default function Authenticator({ onAuthSuccess }: AuthenticatorProps) {
     setIsLoading(true)
     try {
       if (!inputCode.trim()) {
-        setCodeErrorMessage('Please enter the verification code.')
+        setCodeErrorMessage(t('auth.pleaseEnterTheVerificationCode'))
         return
       }
       // After user confirms email, try authenticating
       const response = await fetchResendVerificationCode(email, inputCode)
       if (response.auth_code === 200) {
-        showSuccessNotification(t('notification.verificationCodeSentSuccessfully'))
+        showSuccessNotification(
+          t('notification.verificationCodeVerifiedSuccessfully'),
+        )
         setActiveTab('login')
         setNeedCode(false)
       } else {
@@ -270,9 +282,7 @@ export default function Authenticator({ onAuthSuccess }: AuthenticatorProps) {
       // await loginVerify(email, password)
     } catch (error) {
       console.error(error)
-      setCodeErrorMessage(
-        'Invalid or expired verification code, please try again later.',
-      )
+      setCodeErrorMessage(t('auth.invalidOrExpiredVerificationCode'))
     } finally {
       setIsLoading(false)
     }

app/components/auth/DeleteUser.tsx

@@ -2,6 +2,7 @@
 
 import React, { useEffect, useState } from 'react'
 import { Dialog } from '@/components/common/Dialog'
+import { useTranslation } from 'react-i18next'
 
 interface DeleteUserProps {
   isOpen: boolean
@@ -30,13 +31,13 @@ export default function DeleteUser({
   const [password, setPassword] = useState('')
   const [showPassword, setShowPassword] = useState(false)
   const [localError, setLocalError] = useState('')
-
+  const { t } = useTranslation()
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     setLocalError('')
 
     if (!email.trim() || !password.trim()) {
-      setLocalError('Please fill in all fields.')
+      setLocalError(t('auth.pleaseFillInAllFields'))
       return
     }
 
@@ -54,7 +55,7 @@ export default function DeleteUser({
     <Dialog
       isOpen={isOpen}
       onClose={onClose}
-      title="Delete Account"
+      title={t('auth.deleteAccount')}
       closeOnBackdropClick={false}
       maxWidth="420px"
       className="delete-user-dialog"
@@ -69,17 +70,19 @@ export default function DeleteUser({
       >
         <div style={{ color: '#cfcfe1', lineHeight: 1.6 }}>
           <span>
-            To delete your account, please confirm your email and password.{' '}
+            {t('auth.toDeleteYourAccountPleaseConfirmYourEmailAndPassword')}
           </span>
-          <span>This action is irreversible.</span>
+          <span> {t('auth.thisActionIsIrreversible')}</span>
         </div>
 
-        <label style={{ color: '#8b8ea8', fontSize: '14px' }}>Email</label>
+        <label style={{ color: '#8b8ea8', fontSize: '14px' }}>
+          {t('auth.email')}
+        </label>
         <input
           type="email"
           value={email}
           onChange={e => setEmail(e.target.value)}
-          placeholder="Enter your email"
+          placeholder={t('auth.enterYourEmail')}
           autoComplete="off"
           style={{
             width: '340px',
@@ -100,13 +103,15 @@ export default function DeleteUser({
           }}
         />
 
-        <label style={{ color: '#8b8ea8', fontSize: '14px' }}>Password</label>
+        <label style={{ color: '#8b8ea8', fontSize: '14px' }}>
+          {t('auth.password')}
+        </label>
         <div style={{ position: 'relative', marginBottom: '0px' }}>
           <input
             type={showPassword ? 'text' : 'password'}
             value={password}
             onChange={e => setPassword(e.target.value)}
-            placeholder="Enter your password"
+            placeholder={t('auth.enterYourPassword')}
             autoComplete="off"
             style={{
               width: '340px',
@@ -131,12 +136,13 @@ export default function DeleteUser({
             onClick={() => setShowPassword(!showPassword)}
             style={{
               position: 'absolute',
-              right: '0',
+              right: '10px',
               top: '50%',
               transform: 'translateY(-50%)',
               background: 'none',
               border: 'none',
               cursor: 'pointer',
+              padding: '4px',
               borderRadius: '4px',
               display: 'flex',
               alignItems: 'center',
@@ -205,7 +211,7 @@ export default function DeleteUser({
               e.currentTarget.style.color = '#aaa'
             }}
           >
-            Cancel
+            {t('common.cancel')}
           </button>
           <button
             type="submit"
@@ -226,7 +232,7 @@ export default function DeleteUser({
               minWidth: '96px',
             }}
           >
-            Delete
+            {t('common.delete')}
           </button>
         </div>
       </form>

app/components/auth/EmailCodeModal.tsx

@@ -2,6 +2,7 @@
 
 import React, { useEffect, useState } from 'react'
 import { Dialog } from '@/components/common/Dialog'
+import { useTranslation } from 'react-i18next'
 
 interface EmailCodeModalProps {
   isOpen: boolean
@@ -28,7 +29,7 @@ export default function EmailCodeModal({
     @returns Promise<void> Resolves when the submit completes.
   */
   const [code, setCode] = useState('')
-
+  const { t } = useTranslation()
   useEffect(() => {
     if (isOpen) {
       setCode('')
@@ -45,7 +46,7 @@ export default function EmailCodeModal({
     <Dialog
       isOpen={isOpen}
       onClose={onClose}
-      title="Email verification code"
+      title={t('auth.emailVerificationCode')}
       maxWidth="420px"
       className="email-code-dialog"
     >
@@ -54,15 +55,15 @@ export default function EmailCodeModal({
         style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}
       >
         <div style={{ color: '#cfcfe1', lineHeight: 1.6 }}>
-          We have sent a verification code to{' '}
+          {t('auth.weHaveSentAVerificationCodeTo')}{' '}
           <span style={{ color: '#fff', fontWeight: 600 }}>
             {email || 'your email'}
           </span>{' '}
-          . Please enter the 6-digit code in the email to complete the verification.
+          {t('auth.pleaseEnterThe6DigitCodeInTheEmailToCompleteTheVerification')}
         </div>
 
         <label style={{ color: '#8b8ea8', fontSize: '14px' }}>
-          Verification Code
+          {t('auth.verificationCode')}
         </label>
         <input
           type="text"
@@ -71,7 +72,7 @@ export default function EmailCodeModal({
           autoComplete="one-time-code"
           value={code}
           onChange={e => setCode(e.target.value)}
-          placeholder="Enter the verification code"
+          placeholder={t('auth.enterTheVerificationCode')}
           style={{
             width: '100%',
             height: '48px',
@@ -123,7 +124,7 @@ export default function EmailCodeModal({
               e.currentTarget.style.color = '#aaa'
             }}
           >
-            Cancel
+            {t('common.cancel')}
           </button>
 
           <button
@@ -139,7 +140,7 @@ export default function EmailCodeModal({
               minWidth: '96px',
             }}
           >
-            Confirm
+            {t('common.confirm')}
           </button>
         </div>
       </form>