allowed origin env fix, turkish language

cankurttekin · Nov 4, 2024 · 80545be · 80545be
1 parent d1bc707
commit 80545be
Show file tree

Hide file tree

Showing 11 changed files with 193 additions and 53 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,9 +1,12 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+.env
+
 # dependencies
 /node_modules
-/frontend/node_modules/.cache
-/frontend/node_modules/**
+/frontend/node_modules/
+/frontend/node_modules/.cache/
+/backend/.secrets/
 /.pnp
 .pnp.js
 

diff --git a/.../src/main/java/com/kurttekin/can/job_track/infrastructure/security/config/CorsConfig.java b/.../src/main/java/com/kurttekin/can/job_track/infrastructure/security/config/CorsConfig.java
@@ -14,7 +14,6 @@
 @Configuration
 public class CorsConfig {
 
-    // if no env var, default to localhost:3000 for react
     @Value("${ALLOWED_ORIGINS:http://localhost:3000}")
     private String allowedOrigins;
 

diff --git a/backend/src/main/resources/application.properties b/backend/src/main/resources/application.properties
@@ -8,9 +8,9 @@ app.jwtExpirationInMs=86400000
 
 # jwt signing key
 
-gemini.api.key=${GEMINI_API_KEY}
+gemini.api.key=${GEMINI_API_KEY:"GEMINI_API_KEY"}
 
-ALLOWED_ORIGINS=${ALLOWED_ORIGINS}
+#ALLOWED_ORIGINS=${ALLOWED_ORIGINS}
 server.port=${PORT:8080}
 #server.ssl.key-store=classpath:keystore.p12
 #server.ssl.key-store-password=${KEY_STORE_PASS}

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -8,8 +8,10 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.7.7",
+    "i18next": "^23.16.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-i18next": "^15.1.0",
     "react-icons": "^5.3.0",
     "react-modal": "^3.16.1",
     "react-router-dom": "^6.27.0",

diff --git a/frontend/src/components/Home.js b/frontend/src/components/Home.js
@@ -5,16 +5,17 @@ import filterImage from '../assets/filter.png';
 import starsImage from '../assets/stars.png';
 import goalsImage from '../assets/goal.png';
 import buyMeACoffeeImage from '../assets/buy-me-a-beer.png';
-import seperator from '../assets/seperator.png';
+import separator from '../assets/seperator.png';
 import { useNavigate } from 'react-router-dom';
 import { AuthContext } from '../contexts/AuthContext';
 import styled from "styled-components";
 import screenshotImage from '../assets/screenshot1.png';
+import { useTranslation } from 'react-i18next';
+import { Trans } from 'react-i18next';
 const Button = styled.button`
     margin-right: 0;
     margin-left: 0;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-
     &:hover {
         background-color: #333;
     }
@@ -23,6 +24,7 @@ const Button = styled.button`
 const Home = () => {
     const navigate = useNavigate();
     const { isLoggedIn } = useContext(AuthContext);
+    const { t } = useTranslation(); // Use the hook
 
     const handleRegisterClick = () => {
         navigate('/register');
@@ -32,14 +34,14 @@ const Home = () => {
         <div className="home-container">
             <div className="header-container">
                 <div className="left-column">
-                    <h2 className="big-text">Keep Track of Your Job Applications</h2>
-                    <h2 className="big-text2">Application Tracking System For Suckers</h2>
+                    <h2 className="big-text">{t('header.title')}</h2>
+                    <h2 className="big-text2">{t('header.subtitle')}</h2>
                 </div>
                 <div className="right-column">
-                    <h3 className="small-text">Make your job hunt more organized — in one place.</h3>
+                    <h3 className="small-text">{t('header.description')}</h3>
                     {!isLoggedIn && (
                         <Button className="register-button" onClick={handleRegisterClick}>
-                            Get ATSFS free
+                            {t('header.buttonText')}
                         </Button>
                     )}
                 </div>
@@ -48,19 +50,19 @@ const Home = () => {
             <div className="illustrations-container">
                 <div className="illustration-item">
                     <img src={organizeImage} alt="Illustration 1" className="illustration"/>
-                    <p className="illustration-text">Add jobs from any source you want</p>
+                    <p className="illustration-text">{t('illustrations.job_source')}</p>
                 </div>
                 <div className="illustration-item">
                     <img src={starsImage} alt="Illustration 2" className="illustration"/>
-                    <p className="illustration-text">Comment on your applications, star your favorites</p>
+                    <p className="illustration-text">{t('illustrations.comment')}</p>
                 </div>
                 <div className="illustration-item">
                     <img src={filterImage} alt="Illustration 3" className="illustration"/>
-                    <p className="illustration-text">Filter and/or sort to view your applications</p>
+                    <p className="illustration-text">{t('illustrations.filter')}</p>
                 </div>
                 <div className="illustration-item">
                     <img src={goalsImage} alt="Illustration 4" className="illustration"/>
-                    <p className="illustration-text">Land a job (hopefully)</p>
+                    <p className="illustration-text">{t('illustrations.goal')}</p>
                 </div>
             </div>
 
@@ -73,14 +75,12 @@ const Home = () => {
                     />
                 </div>
                 <div className="screenshot-text">
-                    <h2 className="big-text">Why use ATSFS instead of spreadsheets or just good old notes?</h2>
+                    <h2 className="big-text">{t('hero.title')}</h2>
                     <p className="big-text2">
-                        ⚹<b>One convenient place</b> you can access from anywhere and any
-                        device.<br/>
-                        ⚹<b>Stay organized</b>, never miss an opportunity.<br/>
-                        ⚹<b>Generate</b> personalized interview questions to prepare effectively.<br/>
-                        ⚹<b>Analyze</b> your application stats.
-                        <br/>
+                        ⚹<Trans i18nKey="hero.point1" components={{ bold: <b /> }} /><br/>
+                        ⚹<Trans i18nKey="hero.point2" components={{ bold: <b /> }} /><br/>
+                        ⚹<Trans i18nKey="hero.point3" components={{ bold: <b /> }} /><br/>
+                        ⚹<Trans i18nKey="hero.point4" components={{ bold: <b /> }} /><br/>
                     </p>
                 </div>
             </div>
@@ -94,37 +94,30 @@ const Home = () => {
                     />
                 </a>
                 <p style={{maxWidth: '600px', margin: 0}}>
-                    This service is designed to help people in job hunt without any cost, if you want to support,
-                    here is donation button stuff.
+                    {t('support.text')}
                 </p>
             </div>
 
             <footer className="footer">
-                <img src={seperator} alt="seperator" className="seperator"/>
+                <img src={separator} alt="seperator" className="seperator"/>
                 <p>
-                    Application Tracking System For Suckers(ATSFS) made with despair and boredom by&nbsp;
-                    <a href="https://can.kurttekin.com" target="_blank" rel="noopener noreferrer">cankurttekin</a>
-                    &nbsp;to help me and you.
+                    {t('footer.description')}
                 </p>
                 <br/>
                 <p>
                     This software is free and open-source, licensed under the terms of the&nbsp;
-                    <a href="https://www.gnu.org/licenses/gpl-3.0.html" target="_blank"
-                       rel="noopener noreferrer">GNU
+                    <a href="https://www.gnu.org/licenses/gpl-3.0.html" target="_blank" rel="noopener noreferrer">GNU
                         General Public License (GPL)</a>.<br/>
                     You can freely use, modify, and distribute it under the same terms.
                 </p>
                 <br/>
                 <p style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
-                    <a href="https://github.com/cankurttekin/job-application-tracker" target="_blank"
-                       rel="noopener noreferrer" style={{display: 'flex', alignItems: 'center'}}>
-                        <span className="material-icons" style={{marginRight: '5px'}}>code</span>
-                        Source Code
-                    </a>
+                    <a href="https://github.com/cankurttekin/job-application-tracker" target="_blank" rel="noopener noreferrer" style={{display: 'flex', alignItems: 'center'}}> <span className="material-icons" style={{marginRight: '5px'}}>code</span> Source Code </a>
                 </p>
             </footer>
         </div>
-    );
-};
 
-export default Home;
+            );
+        };
+
+export default Home;
diff --git a/frontend/src/components/LanguageSwitcher.js b/frontend/src/components/LanguageSwitcher.js
@@ -1,16 +1,33 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styled from "styled-components";
+
+const Button = styled.button`
+    margin-right: 2px;
+    margin-left: 0;
+    padding: 4px;
+    background-color: transparent;
+    color: black;
+    //border: 1px solid #333;
+    //box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    &:hover {
+        background-color: #f5f5f5;
+    }
+`;
+
 const LanguageSwitcher = () => {
-  const { i18n } = useTranslation();
+    const { i18n } = useTranslation();
 
-  const changeLanguage = (language) => {
-    i18n.changeLanguage(language);
-  };
+    const changeLanguage = (language) => {
+        i18n.changeLanguage(language);
+    };
 
-  return (
-    <div>
-      <button onClick={() => changeLanguage('en')}>English</button>
-      <button onClick={() => changeLanguage('tr')}>Türkçe</button>
-    </div>
-  );
+    return (
+        <div>
+            <Button onClick={() => changeLanguage('en')}>EN</Button>
+            <Button onClick={() => changeLanguage('tr')}>TR</Button>
+        </div>
+    );
 };
 
 export default LanguageSwitcher;
diff --git a/frontend/src/components/Sidebar.js b/frontend/src/components/Sidebar.js
@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import AddJobApplication from './AddJobApplication';
 import { AuthContext } from '../contexts/AuthContext';
 import atsfsIcon from '../assets/atsfs.png';
+import LanguageSwitcher from "./LanguageSwitcher"; // Import the useTranslation hook
 
 const NavbarContainer = styled.div`
     position: fixed;
@@ -164,9 +165,11 @@ const Navbar = () => {
                             <span className="material-icons">file_download</span>
                             Export
                         </NavbarItem>
+
                     </>
-                )}
 
+                )}
+                <LanguageSwitcher></LanguageSwitcher>
                 <AddJobApplication isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />
                 <NavbarRight>
                     {isLoggedIn && <div>Logged in as <strong>{user}</strong></div>}
@@ -176,6 +179,7 @@ const Navbar = () => {
                     </NavbarItem>
                 </NavbarRight>
             </NavbarItems>
+
         </NavbarContainer>
     );
 };

diff --git a/frontend/src/index.js b/frontend/src/index.js
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import './i18n';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(