Skip to content

Commit

Permalink
feat(translation): enable translation
Browse files Browse the repository at this point in the history
  • Loading branch information
Mikadows committed May 22, 2022
1 parent fd55456 commit 0d58bc1
Show file tree
Hide file tree
Showing 13 changed files with 365 additions and 72 deletions.
84 changes: 84 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,15 @@
"@types/react-dom": "^17.0.9",
"@types/react-router-dom": "^5.3.3",
"axios": "^0.21.1",
"i18next": "^21.8.3",
"i18next-browser-languagedetector": "^6.1.4",
"i18next-http-backend": "^1.4.0",
"luxon": "^2.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-gravatar": "^2.6.3",
"react-hook-form": "^7.31.1",
"react-i18next": "^11.16.9",
"react-loader-spinner": "^4.0.0",
"react-lottie-player": "^1.4.1",
"react-markdown": "^6.0.2",
Expand Down
70 changes: 70 additions & 0 deletions public/locales/en/translation.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
{
"login": {
"title": "Admin Panel - FI-Sweets",
"subtitle": "Please login to your account",
"email": "Email",
"password": "Password",
"login_btn": "Login",
"forgot_password": "Forgot Password?",
"alert_welcome": "Welcome",
"alert_failed_empty": "Email or password empty",
"alert_failed_incorrect": "Email or password incorrect"
},
"navigation": {
"dashboard": "Dashboard",
"products": "Products",
"recipe": "Recipes"
},
"products": {
"add_btn": "Add Product",
"title_all": "All products",
"title_online": "Online products",
"add": {
"title": "Create sweet",
"name": "Name",
"price": "Price",
"flavor": "Flavor",
"description": "Description",
"cancel_btn": "Cancel",
"save_btn": "Create",
"alert_success": "Sweet created successfully",
"alert_failed_empty": "Thanks to fill all fields"
},
"update": {
"title": "Product modification",
"name": "Name",
"price": "Price",
"flavor": "Flavor",
"highlight": "Highlight",
"description": "Description",
"img_upload_title": "Upload image",
"img_upload_description": "Select an image",
"cancel_btn": "Cancel",
"modify_btn": "Modify",
"alert_success": "Sweet modified successfully",
"alert_img_upload": "Image uploaded successfully",
"alert_failed": "Error while modifying sweet"
},
"col_name": {
"product": "Name",
"price": "Price",
"highlight": "Highlight",
"status": "Status",
"actions": "Actions"
},
"publish": {
"title": "Publish the sweet",
"description": "Are you really sure you want to publish the mignardise? This mignardise will be available for purchase in the store after this action.",
"cancel_btn": "Cancel",
"publish_btn": "Publish",
"alert_success": "Sweet published"
},
"unpublish": {
"title": "Remove the sweet from the store",
"description": "Are you sure you want to remove the sweet from the store? This sweet will no longer be available for purchase in the store after this action.",
"cancel_btn": "Cancel",
"publish_btn": "Unpublish",
"alert_success": "Sweet unpublished"
}
}
}
70 changes: 70 additions & 0 deletions public/locales/fr/translation.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
{
"login": {
"title": "Pannel d'administration - FI-Sweets",
"subtitle": "Veuillez vous connecter",
"email": "Email",
"password": "Mot de passe",
"login_btn": "Se connecter",
"forgot_password": "Mot de passe oublié ?",
"alert_welcome": "Bienvenue",
"alert_failed_empty": "Email ou mot de passe vide",
"alert_failed_incorrect": "Email ou mot de passe incorrect"
},
"navigation": {
"dashboard": "Tableau de bord",
"products": "Produits",
"recipe": "Recettes"
},
"products": {
"add_btn": "Ajouter un produit",
"title_all": "Tous les produits",
"title_online": "Produits en ligne",
"add": {
"title": "Ajouter un produit",
"name": "Nom",
"price": "Prix",
"flavor": "Saveur",
"description": "Description",
"cancel_btn": "Annuler",
"save_btn": "Créer",
"alert_success": "Mignardise ajouté avec succès",
"alert_failed_empty": "Merci de remplir tous les champs"
},
"update": {
"title": "Modifier un produit",
"name": "Nom",
"price": "Prix",
"flavor": "Saveur",
"highlight": "Mise en avant",
"description": "Description",
"img_upload_title": "Ajouté une image",
"img_upload_description": "Sélectionner une image",
"cancel_btn": "Annuler",
"modify_btn": "Modifier",
"alert_success": "Mignardise modifié succès",
"alert_img_upload": "Image ajouté avec succès",
"alert_failed": "Erreur lors de la modification de la mignardise"
},
"col_name": {
"product": "Nom",
"price": "Prix",
"highlight": "Mise en avant",
"status": "Status",
"actions": "Actions"
},
"publish": {
"title": "Publier la mignardise",
"description": "Êtes-vous vraiment certain de vouloir publier la mignardise ? Cette mignardise sera disponible à l'achat dans la boutique après cette action.",
"cancel_btn": "Annuler",
"publish_btn": "Publier",
"alert_success": "Mignardise publiée"
},
"unpublish": {
"title": "Retirer la mignadise de la boutique",
"description": "Êtes-vous vraiment certain de vouloir retirer la mignardise de la boutique ? Cette mignardise ne sera plus disponible à l'achat dans la boutique après cette action.",
"cancel_btn": "Annuler",
"publish_btn": "Retirer",
"alert_success": "Mignardise retirée"
}
}
}
27 changes: 17 additions & 10 deletions src/components/Auth/Login.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
import React, {useEffect} from 'react';
import React, { useEffect } from 'react';
import Lottie from 'react-lottie-player';
import loadingSplash from '../../assets/lotties/splash-loading.json';
import { useNavigate } from 'react-router-dom';
import { useToken } from '../../hooks/token';
import { login } from '../../hooks/auth/register';
import LoginRequest from '../../hooks/auth/requests/LoginRequest';
import { useToasts } from 'react-toast-notifications';
import { useTranslation } from 'react-i18next';

const Login: React.FC = () => {
const { t } = useTranslation();
const { addToast } = useToasts();
const navigate = useNavigate();
const { token, setToken } = useToken();
Expand All @@ -27,7 +29,7 @@ const Login: React.FC = () => {
);

if (request.username?.trim() === '' || request.password?.trim() === '') {
addToast(`Email or password are empty`, {
addToast(`${t('login.alert_failed_empty')}`, {
appearance: 'error',
autoDismiss: true,
});
Expand All @@ -36,14 +38,17 @@ const Login: React.FC = () => {

try {
const response = await login(request);
addToast(`Welcome ${request.username}`, {
addToast(`${t('login.alert_welcome')} ${request.username}`, {
appearance: 'info',
autoDismiss: true,
});
setToken(response);
navigate('/admin/products');
} catch (e) {
addToast(`Login failed`, { appearance: 'error', autoDismiss: true });
addToast(`${t('login.alert_failed_incorrect')}`, {
appearance: 'error',
autoDismiss: true,
});
}
};

Expand All @@ -63,25 +68,25 @@ const Login: React.FC = () => {
alt="logo"
/>
<h4 className="text-xl font-semibold mt-1 mb-12 pb-1">
Admin Panel - FI-Sweets
{t('login.title')}
</h4>
</div>
<form onSubmit={loginUser}>
<p className="mb-4">Please login to your account</p>
<p className="mb-4">{t('login.subtitle')}</p>
<div className="mb-4">
<input
type="text"
className="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
id="username"
placeholder="Email"
placeholder={t('login.email')}
/>
</div>
<div className="mb-4">
<input
type="password"
className="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
id="password"
placeholder="Password"
placeholder={t('login.password')}
/>
</div>
<div className="text-center pt-1 mb-3 pb-1">
Expand All @@ -90,10 +95,12 @@ const Login: React.FC = () => {
className="inline-block px-6 py-2.5 text-white font-medium text-xs leading-tight uppercase rounded shadow-md bg-blue-500 hover:bg-blue-700 hover:shadow-lg focus:shadow-lg focus:outline-none focus:ring-0 active:shadow-lg transition duration-150 ease-in-out w-full mb-3"
// type="button"
>
Log in
{t('login.login_btn')}
</div>
</button>
<div className="text-gray-500">Forgot password?</div>
<div className="text-gray-500">
{t('login.forgot_password')}
</div>
</div>
</form>
</div>
Expand Down
Loading

0 comments on commit 0d58bc1

Please sign in to comment.