flash messages for login + updating flash messages on language change

mraron · Sep 20, 2023 · 33e2928 · 33e2928
1 parent 5940bb9
commit 33e2928
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 16 deletions.
diff --git a/frontend/public/locales/en/translation.json b/frontend/public/locales/en/translation.json
@@ -41,10 +41,12 @@
 	"flash": {
 		"no_permission": "You have no permission to perform this operation.",
 		"successful_logout": "Successful logout.",
-		"not_logged_in": "You are not logged in",
+		"not_logged_in": "You are not logged in.",
 		"must_choose_file": "You have to choose a file first.",
 		"unsuccessful_submission": "The submission was unsuccessful.",
-		"successful_submission": "Successful submission."
+		"successful_submission": "Successful submission.",
+		"unsuccessful_login": "The login was unsuccessful.",
+		"successful_login": "Successful login."
 	},
 	"menubar":
 	{

diff --git a/frontend/public/locales/hu/translation.json b/frontend/public/locales/hu/translation.json
@@ -41,10 +41,12 @@
 	"flash": {
 		"no_permission": "Nincs jogosultságod végrehajtani ezt a műveletet.",
 		"successful_logout": "Sikeres kijelentkezés.",
-		"not_logged_in": "Nem vagy belépve",
+		"not_logged_in": "Nem vagy belépve.",
 		"must_choose_file": "Először ki kell választanod egy fájlt.",
 		"unsuccessful_submission": "A beküldés nem sikerült.",
-		"successful_submission": "Sikeres beküldés."
+		"successful_submission": "Sikeres beküldés.",
+		"unsuccessful_login": "A bejelentkezés nem sikerült.",
+		"successful_login": "Sikeres bejelentkezés."
 	},
 	"menubar":
 	{

diff --git a/frontend/src/components/util/flash/Flash.js b/frontend/src/components/util/flash/Flash.js
@@ -1,17 +1,19 @@
 import {SVGClose, SVGCorrect, SVGInformation, SVGWrong} from "../../../svg/SVGs";
 import {useEffect, useState} from "react";
-import FlashEvent from "./FlashEvent";
+import {useTranslation} from "react-i18next";
 import {AnimatePresence, motion} from "framer-motion";
+import FlashEvent from "./FlashEvent";
 
 function FlashMessage({message, type, onClose}) {
+    const {t} = useTranslation()
     return (
         <div className="absolute bottom-0 left-0 right-0 bg-grey-850 border-1 rounded-md flex border-default w-full">
             <div className="w-full p-6 flex justify-between">
                 <div className="flex items-center">
                     {type === "success" && <SVGCorrect cls="w-7 h-7 text-green-500 mr-3"/>}
                     {type === "failure" && <SVGWrong cls="w-7 h-7 text-red-500 mr-3"/>}
                     {type === "info" && <SVGInformation cls="w-7 h-7 text-indigo-500 mr-3"/>}
-                    <span>{message}</span>
+                    <span>{t(message)}</span>
                 </div>
                 <button className="rounded-full p-3 hover:bg-grey-800 transition duration-200" onClick={onClose}>
                     <SVGClose cls="w-4 h-4 text-white"/>

diff --git a/frontend/src/pages/Info.js b/frontend/src/pages/Info.js
@@ -9,7 +9,7 @@ function CompilerOption({lang, command}) {
     const {t} = useTranslation()
     const handleCopy = () => {
         navigator.clipboard.writeText(command)
-        window.flash(t("info.successful_copy"), "success")
+        window.flash("info.successful_copy", "success")
     }
     return (
         <tr className={`divide-x divide-default `}>

diff --git a/frontend/src/pages/auth/Login.js b/frontend/src/pages/auth/Login.js
@@ -21,9 +21,11 @@ function LoginFrame() {
         event.preventDefault()
         login(username, password).then(resp => {
             if (resp.success) {
+                window.flash("flash.successful_login", "success")
                 navigate(routeMap.home)
+            } else {
+                window.flash("flash.unsuccessful_login", "failure")
             }
-            window.flash(resp.message, resp.success ? "success" : "failure")
         })
     }
     if (isLoggedIn) {

diff --git a/frontend/src/pages/auth/Logout.js b/frontend/src/pages/auth/Logout.js
@@ -10,9 +10,9 @@ function Logout() {
 
     useEffect(() => {
         if (logout()) {
-            window.flash(t("flash.successful_logout"), "success")
+            window.flash("flash.successful_logout", "success")
         } else {
-            window.flash(t("flash.not_logged_in"), "failure")
+            window.flash("flash.not_logged_in", "failure")
         }
         navigate(routeMap.home)
     }, [])

diff --git a/frontend/src/pages/problem/ProblemStatement.js b/frontend/src/pages/problem/ProblemStatement.js
@@ -43,15 +43,15 @@ function ProblemSubmit() {
     }
     const handleSubmit = () => {
         if (!file) {
-            window.flash(t("flash.must_choose_file"), "failure")
+            window.flash("flash.must_choose_file", "failure")
             return
         }
         submitSolution({problem: problem, language: languages[langIndex], file: file}).then(ok => {
             if (ok) {
-                window.flash(t("flash.successful_submission"), "success")
+                window.flash("flash.successful_submission", "success")
                 navigate(routeMap.problemSubmissions.replace(":problem", problem))
             } else {
-                window.flash(t("flash.unsuccessful_submission"), "failure")
+                window.flash("flash.unsuccessful_submission", "failure")
             }
         })
     }

diff --git a/frontend/src/pages/problem/ProblemSubmit.js b/frontend/src/pages/problem/ProblemSubmit.js
@@ -36,10 +36,10 @@ function ProblemSubmit({ data }) {
     const handleSubmit = () => {
         submitSolution({problem: problem, language: languages[langIndex], submissionCode: submissionCode}).then(ok => {
             if (ok) {
-                window.flash(t("flash.successful_submission"), "success")
+                window.flash("flash.successful_submission", "success")
                 navigate(routeMap.problemSubmissions.replace(":problem", problem))
             } else {
-                window.flash(t("flash.unsuccessful_submission"), "failure")
+                window.flash("flash.unsuccessful_submission", "failure")
             }
         })
     }

diff --git a/frontend/src/pages/profile/ProfileSettings.js b/frontend/src/pages/profile/ProfileSettings.js
@@ -74,7 +74,7 @@ function ProfileSettings({ data }) {
     useEffect(() => {
         if (!isLoggedIn || userData.username !== user) {
             navigate(routeMap.home)
-            window.flash(t("flash.no_permission"), "failure")
+            window.flash("flash.no_permission", "failure")
         } else {
             setVisible(true)
         }