From 96d21c140bef6b73c1a296a7f8bb5b38790e54b5 Mon Sep 17 00:00:00 2001
From: Ayan Nayyer <ayannayyer@gmail.com>
Date: Sat, 28 Jun 2025 15:57:59 +0530
Subject: [PATCH] tolgee-localisation

---
 .tolgee/migration-status.json   | 62 +++++++++++++++++++++++++++++++++
 src/components/LoginForm.jsx    | 17 ++++++---
 src/components/MessageForm.jsx  |  5 ++-
 src/components/MyMessage.jsx    |  5 +--
 src/components/TheirMessage.jsx |  3 +-
 5 files changed, 83 insertions(+), 9 deletions(-)
 create mode 100644 .tolgee/migration-status.json

diff --git a/.tolgee/migration-status.json b/.tolgee/migration-status.json
new file mode 100644
index 0000000..2309b2e
--- /dev/null
+++ b/.tolgee/migration-status.json
@@ -0,0 +1,62 @@
+{
+  "src/components/LoginForm.jsx": {
+    "migrated": true,
+    "keys": [
+      {
+        "name": "chat-application-title",
+        "description": "Error message shown when login credentials are incorrect",
+        "default": "Oops, incorrect credentials."
+      },
+      {
+        "name": "start-chatting-button",
+        "description": "Title of the chat application displayed at the top of the login form",
+        "default": "Chat Application"
+      },
+      {
+        "name": "",
+        "description": "Placeholder text for the username input field",
+        "default": "Username"
+      },
+      {
+        "name": "",
+        "description": "Placeholder text for the password input field",
+        "default": "Password"
+      },
+      {
+        "name": "",
+        "description": "Text for the button to start chatting after login",
+        "default": "Start chatting"
+      }
+    ]
+  },
+  "src/components/MessageForm.jsx": {
+    "migrated": true,
+    "keys": [
+      {
+        "name": "",
+        "description": "Placeholder text for the message input field in the chat",
+        "default": "Send a message..."
+      }
+    ]
+  },
+  "src/components/MyMessage.jsx": {
+    "migrated": true,
+    "keys": [
+      {
+        "name": "",
+        "description": "Alt text for message attachment image",
+        "default": "message-attachment"
+      }
+    ]
+  },
+  "src/components/TheirMessage.jsx": {
+    "migrated": true,
+    "keys": [
+      {
+        "name": "",
+        "description": "Alt text for message attachment image",
+        "default": "message-attachment"
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/src/components/LoginForm.jsx b/src/components/LoginForm.jsx
index 69dda80..44550a9 100644
--- a/src/components/LoginForm.jsx
+++ b/src/components/LoginForm.jsx
@@ -1,9 +1,11 @@
 import { useState } from 'react';
 import axios from 'axios';
+import { T, useTranslate } from '@tolgee/react';
 
 const projectID = '1b7801d6-8a66-4be4-a442-89219d833dfc';
 
 const Modal = () => {
+  const { t } = useTranslate();
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
@@ -22,20 +24,25 @@ const Modal = () => {
       window.location.reload();
       setError('');
     } catch (err) {
-      setError('Oops, incorrect credentials.');
+      setError(
+t('incorrect-credentials-error'));
     }
   };
 
   return (
     <div className="wrapper">
       <div className="form">
-        <h1 className="title">Chat Application</h1>
+        <h1 className="title">
+<T keyName="chat-application-title" /></h1>
         <form onSubmit={handleSubmit}>
-          <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} className="input" placeholder="Username" required />
-          <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} className="input" placeholder="Password" required />
+          <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} className="input" placeholder={
+t('username-input-placeholder')} required />
+          <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} className="input" placeholder={
+t('password-input-placeholder')} required />
           <div align="center">
             <button type="submit" className="button">
-              <span>Start chatting</span>
+              <span>
+<T keyName="start-chatting-button" /></span>
             </button>
           </div>
         </form>
diff --git a/src/components/MessageForm.jsx b/src/components/MessageForm.jsx
index 1bdd90b..43e263c 100644
--- a/src/components/MessageForm.jsx
+++ b/src/components/MessageForm.jsx
@@ -1,10 +1,12 @@
 import { useState } from 'react';
 import { SendOutlined, PictureOutlined } from '@ant-design/icons';
 import { sendMessage, isTyping } from 'react-chat-engine';
+import { useTranslate } from '@tolgee/react';
 
 const MessageForm = (props) => {
   const [value, setValue] = useState('');
   const { chatId, creds } = props;
+  const { t } = useTranslate();
 
   const handleChange = (event) => {
     setValue(event.target.value);
@@ -32,7 +34,8 @@ const MessageForm = (props) => {
     <form className="message-form" onSubmit={handleSubmit}>
       <input
         className="message-input"
-        placeholder="Send a message..."
+        placeholder={
+t('send-message-input-placeholder')}
         value={value}
         onChange={handleChange}
         onSubmit={handleSubmit}
diff --git a/src/components/MyMessage.jsx b/src/components/MyMessage.jsx
index c8b9e13..31a7d9d 100644
--- a/src/components/MyMessage.jsx
+++ b/src/components/MyMessage.jsx
@@ -3,7 +3,8 @@ const MyMessage = ({ message }) => {
     return (
       <img
         src={message.attachments[0].file}
-        alt="message-attachment"
+        alt={
+t('message-attachment-alt')}
         className="message-image"
         style={{ float: 'right' }}
       />
@@ -17,4 +18,4 @@ const MyMessage = ({ message }) => {
   );
 };
 
-export default MyMessage;
+export default MyMessage;
\ No newline at end of file
diff --git a/src/components/TheirMessage.jsx b/src/components/TheirMessage.jsx
index 9760212..8b5c684 100644
--- a/src/components/TheirMessage.jsx
+++ b/src/components/TheirMessage.jsx
@@ -13,7 +13,8 @@ const TheirMessage = ({ lastMessage, message }) => {
         ? (
           <img
             src={message.attachments[0].file}
-            alt="message-attachment"
+            alt={
+t('message-attachment-alt')}
             className="message-image"
             style={{ marginLeft: isFirstMessageByUser ? '4px' : '48px' }}
           />