Merge pull request #167 from Watts-Lab/160-signin-flow-angie

160 sign in fixes: navigate to Dashboard when clicking magic link and added sign out button

client/public/locales/ar/translation.json

@@ -67,6 +67,7 @@
     "answers": "الإجابات",
     "browse-list": "تصفح قائمة التصريحات التي أجبت عليها حتى الآن",
     "delete-account": "حذف الحساب",
+    "signout": "خروج",
     "insight": "رؤية",
     "is-it-common-sense": "هل هو الفهم العام؟",
     "i-agree": "انا اوافق علي هذا البيان",

client/public/locales/bn/translation.json

@@ -67,6 +67,7 @@
     "answers": "উত্তর",
     "browse-list": "এখন পর্যন্ত আপনি যে বিবৃতিগুলির উত্তর দিয়েছেন তার তালিকা ব্রাউজ করুন",
     "delete-account": "অ্যাকাউন্ট মুছে ফেলুন",
+    "signout": "সাইন আউট",
     "insight": "অন্তর্দৃষ্টি",
     "is-it-common-sense": "এটি কি সাধারণ জ্ঞান?",
     "i-agree": "আমি এই বিবৃতির সাথে একমত",

client/public/locales/en/translation.json

@@ -68,6 +68,7 @@
     "answers": "Answers",
     "browse-list": "Browse the list of statements you have answered so far",
     "delete-account": "Delete account",
+    "signout": "Sign out",
     "insight": "Insight",
     "is-it-common-sense": "Is it common sense?",
     "i-agree": "I agree with this statement",

client/public/locales/es/translation.json

@@ -67,6 +67,7 @@
     "answers": "Respuestas",
     "browse-list": "Navega por la lista de declaraciones que has respondido hasta ahora",
     "delete-account": "Eliminar cuenta",
+    "signout": "Desconectar",
     "insight": "Perspectiva",
     "is-it-common-sense": "¿Es sentido común?",
     "i-agree": "Concuerdo con esta declaración",

client/public/locales/fr/translation.json

@@ -67,6 +67,7 @@
     "answers": "Réponses",
     "browse-list": "Parcourez la liste des déclarations auxquelles vous avez répondu jusqu'à présent",
     "delete-account": "Supprimer le compte",
+    "signout": "Se déconnecter",
     "insight": "Aperçu",
     "is-it-common-sense": "Est-ce du bon sens?",
     "i-agree": "Je suis d'accord avec cette affirmation",

client/public/locales/hi/translation.json

@@ -67,6 +67,7 @@
     "answers": "उत्तर",
     "browse-list": "अब तक आपने जिन बयानों का उत्तर दिया है, उनकी सूची ब्राउज़ करें",
     "delete-account": "खाता हटाएं",
+    "signout": "साइन आउट",
     "insight": "अंतर्दृष्टि",
     "is-it-common-sense": "क्या यह सामान्य ज्ञान है?",
     "i-agree": "मैं इस कथन से सहमत हूँ",

client/public/locales/ja/translation.json

@@ -67,6 +67,7 @@
     "answers": "回答",
     "browse-list": "これまでに回答した声明のリストを参照してください",
     "delete-account": "アカウントを削除",
+    "signout": "サインアウト",
     "insight": "洞察",
     "is-it-common-sense": "それは常識ですか？",
     "i-agree": "私はこの意見に賛成です",

client/public/locales/pt/translation.json

@@ -67,6 +67,7 @@
     "answers": "Respostas",
     "browse-list": "Navegue pela lista de declarações que você respondeu até agora",
     "delete-account": "Excluir conta",
+    "signout": "Sair",
     "insight": "Visão",
     "is-it-common-sense": "É senso comum?",
     "i-agree": "Eu concordo com esta afirmação",

client/public/locales/ru/translation.json

@@ -67,6 +67,7 @@
     "answers": "Ответы",
     "browse-list": "Просмотрите список заявлений, на которые вы ответили до сих пор",
     "delete-account": "Удалить аккаунт",
+    "signout": "Выход",
     "insight": "Инсайт",
     "is-it-common-sense": "Это здравый смысл?",
     "i-agree": "Я согласен с этим утверждением",

client/public/locales/zh/translation.json

@@ -67,6 +67,7 @@
     "answers": "答案",
     "browse-list": "浏览您迄今为止回答的声明列表",
     "delete-account": "删除账户",
+    "signout": "登出",
     "insight": "洞察",
     "is-it-common-sense": "这是常识吗？",
     "i-agree": "我同意这个说法",

client/src/App.tsx

@@ -10,6 +10,7 @@ import {
   Route,
   useLocation,
   useSearchParams,
+  useNavigate
 } from "react-router-dom";
 
 import { useAppSelector, useAppDispatch } from "./redux/hooks";
@@ -57,6 +58,7 @@ const App = () => {
   const urlParams = useAppSelector((state) => state.urlslice.urlParams);
 
   const dispatch = useAppDispatch();
+  const navigate = useNavigate();
 
   useEffect(() => {
     const verify_token = async () => {
@@ -66,15 +68,15 @@ const App = () => {
         const response = await Backend.post(`/users/verify`);
         return response.data.ok
           ? dispatch(
-              setUserData({
-                loggedIn: true,
-                email: response.data.email,
-                token: token,
-                surveySession: response.data.sessionId,
-              })
-            )
+            setUserData({
+              loggedIn: true,
+              email: response.data.email,
+              token: token,
+              surveySession: response.data.sessionId,
+            })
+          )
           : dispatch(clearUserData());
-      } catch (error) {}
+      } catch (error) { }
     };
     verify_token();
   }, [token]);
@@ -108,6 +110,7 @@ const App = () => {
             surveySession: res.data.sessionId,
           })
         );
+        navigate("/dashboard");
       } else {
         alert(res.data.message);
       }
@@ -196,4 +199,4 @@ const App = () => {
   );
 };
 
-export default App;
+export default App;

client/src/components/Enter.tsx

@@ -4,7 +4,11 @@ import { useParams, useNavigate } from "react-router-dom";
 import Navbar from "../partials/NavBar";
 import Footer from "../partials/Footer";
 
-const Enter = ({ signIn }) => {
+type EnterProps = {
+  signIn: (email: string, link: string) => void;
+};
+
+const Enter: React.FC<EnterProps> = ({ signIn }) => {
   let params = useParams();
   let navigate = useNavigate();
 
@@ -15,6 +19,7 @@ const Enter = ({ signIn }) => {
     } else {
       // Handle the case where either params.email or params.link is undefined
       console.error("Email or link is missing");
+      navigate("/dashboard");
     }
   }, [params.email, params.link, navigate, signIn]);
 
@@ -37,4 +42,4 @@ const Enter = ({ signIn }) => {
   );
 };
 
-export default Enter;
+export default Enter;

client/src/pages/Dashboard.tsx

@@ -6,6 +6,8 @@ import Footer from "../partials/Footer";
 import DashboardChart from "../partials/DashboardChart";
 import StatementForm from "../components/StatementForm";
 import Backend from "../apis/backend";
+import { useAppDispatch } from '../redux/hooks';
+import { clearUserData } from '../redux/slices/loginSlice';
 
 import { useAppSelector } from "../redux/hooks";
 interface Statement {
@@ -50,6 +52,7 @@ const Dashboard: React.FC = () => {
   const surveySession = useAppSelector((state) => state.login.surveySession);
   const tokenString = localStorage.getItem("token");
   const token = tokenString !== null ? JSON.parse(tokenString) : null;
+  const dispatch = useAppDispatch();
 
   const handleTabClick = (tabId: string) => {
     setActiveTab(tabId);
@@ -67,6 +70,11 @@ const Dashboard: React.FC = () => {
     }
   };
 
+  const signOut = () => {
+    dispatch(clearUserData());
+    navigate('/');
+  };
+
   useEffect(() => {
     if (!loggedIn) {
       navigate("/signin");
@@ -399,10 +407,24 @@ const Dashboard: React.FC = () => {
                     role="tabpanel"
                     aria-labelledby="settings-tab"
                   >
-                    <button onClick={deleteAccount}>
-                      {/* Delete account */}
-                      {t("dashboard.delete-account")}
-                    </button>
+                    <div className="mb-4">
+                      <button
+                        onClick={deleteAccount}
+                        className="bg-white text-black font-bold py-2 px-4 rounded shadow transition duration-300 ease-in-out hover:shadow-lg"
+                      >
+                        {/* Delete account */}
+                        {t("dashboard.delete-account")}
+                      </button>
+                    </div>
+                    <div>
+                      <button
+                        onClick={signOut}
+                        className="bg-white text-black font-bold py-2 px-4 rounded shadow transition duration-300 ease-in-out hover:shadow-lg"
+                      >
+                        {/* Sign out*/}
+                        {t("dashboard.signout")}
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>

client/src/pages/SignIn.tsx

@@ -31,6 +31,7 @@ const SignIn: React.FC = () => {
     } catch (error) {
       console.log(error);
     }
+
   };
 
   const enterEmail = (e: ChangeEvent<HTMLInputElement>) => {