Feat: Legal updates

src/Components/LinkCreator/LinkCreator.jsx

@@ -0,0 +1,49 @@
+import { useState, useEffect } from "react";
+import { useSelector } from "react-redux";
+
+import { checkUrlAvailable } from "../../utils/api.js";
+import { vocascanServer } from "../../utils/constants.js";
+
+const LinkCreator = ({
+  path,
+  children,
+  electronFix = false,
+  shouldBeValid = true,
+}) => {
+  const selfHosted = useSelector((state) => state.login.selfHosted);
+  const serverAddress = useSelector((state) => state.login.serverAddress);
+  const appLanguage = useSelector((state) => state.setting.language);
+
+  const [isValid, setIsValid] = useState(shouldBeValid);
+  const [url, setUrl] = useState("");
+
+  const { BASE_URL: baseURL, ENV: env } = window.VOCASCAN_CONFIG;
+
+  // initialize url with the needed url for the servers
+  useEffect(() => {
+    if (baseURL || selfHosted) {
+      if (electronFix && env === "electron") {
+        setUrl(vocascanServer + `${path}?lang=` + appLanguage);
+      } else {
+        setUrl((serverAddress || baseURL) + `${path}?lang=` + appLanguage);
+      }
+    } else {
+      setUrl(vocascanServer + `${path}?lang=` + appLanguage);
+    }
+  }, [appLanguage, baseURL, electronFix, env, path, selfHosted, serverAddress]);
+
+  //check if url is available
+  useEffect(() => {
+    checkUrlAvailable(url)
+      .then((response) => {
+        return setIsValid(true);
+      })
+      .catch((error) => {
+        return setIsValid(false);
+      });
+  }, [url]);
+
+  return children({ isValid, url });
+};
+
+export default LinkCreator;

src/Components/LinkCreator/LinkCreator.scss

@@ -0,0 +1,10 @@
+@import "../../colors";
+
+.link-creator {
+  text-decoration: none;
+  color: $color-primary;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}

src/Components/Nav/Nav.jsx

@@ -7,9 +7,12 @@ import AddIcon from "@material-ui/icons/Add";
 import BarChartIcon from "@material-ui/icons/BarChart";
 import LibraryBooksIcon from "@material-ui/icons/LibraryBooks";
 import LocalLibraryIcon from "@material-ui/icons/LocalLibrary";
-import SettingsIcon from "@material-ui/icons/Settings";
+import PolicyIcon from "@material-ui/icons/Policy";
+import SecurityIcon from "@material-ui/icons/Security";
 import StyleIcon from "@material-ui/icons/Style";
+import VerifiedUserIcon from "@material-ui/icons/VerifiedUser";
 
+import LinkCreator from "../LinkCreator/LinkCreator.jsx";
 import NavButton from "./NavButton.jsx";
 
 import "./Nav.scss";
@@ -78,13 +81,39 @@ const Nav = () => {
         />
       </ul>
 
-      <div>
-        <NavButton
-          name={t("nav.settings")}
-          design={menuStyle}
-          icon={<SettingsIcon />}
-          link="/settings"
-        />
+      <div className="nav-legal">
+        <LinkCreator path="/legal-notice" electronFix shouldBeValid={true}>
+          {({ isValid, url }) => {
+            isValid && (
+              <div className="nav-legal-wrapper">
+                <VerifiedUserIcon />
+                <a href={url}>{t("global.legalNotice")}</a>
+              </div>
+            );
+          }}
+        </LinkCreator>
+
+        <LinkCreator path="/terms-and-conditions" shouldBeValid={true}>
+          {({ isValid, url }) => {
+            isValid && (
+              <div className="nav-legal-wrapper">
+                <PolicyIcon />
+                <a href={url}>{t("global.termsAndConditions")}</a>
+              </div>
+            );
+          }}
+        </LinkCreator>
+
+        <LinkCreator path="/privacy-policy" shouldBeValid={true}>
+          {({ isValid, url }) => {
+            isValid && (
+              <div className="nav-legal-wrapper">
+                <SecurityIcon />
+                <a href={url}>{t("global.privacyPolicy")}</a>
+              </div>
+            );
+          }}
+        </LinkCreator>
       </div>
     </div>
   );

src/Components/Nav/Nav.scss

@@ -11,10 +11,32 @@
   justify-content: space-between;
   transition: width 0.2s ease-in;
 
+  .nav-legal {
+    color: $color-white;
+    margin: 10px auto;
+    font-size: 15px;
+
+    .nav-legal-wrapper {
+      display: flex;
+      align-items: center;
+      margin: 5px 0;
+
+      a {
+        margin-left: 5px;
+        color: $color-white;
+      }
+    }
+  }
+
   &.nav-default {
     &:hover {
       width: 200px;
       transition: width 0.2s ease-in;
+
+      .nav-legal {
+        opacity: 100;
+        transition: all 0.6s ease-in;
+      }
     }
   }
 

src/i18n/locales/en/default.json

@@ -50,7 +50,10 @@
     "fileImportError": "Error importing your file",
     "export": "Export",
     "inviteCode": "Invite code",
-    "create": "Create"
+    "create": "Create",
+    "legalNotice": "Legal Notice",
+    "termsAndConditions": "Terms and Conditions",
+    "privacyPolicy": "Privacy Policy"
   },
   "components": {
     "groupForm": {
@@ -306,7 +309,9 @@
       "emailInUse": "The email is already used",
       "emailNotValid": "Not a valid email address",
       "passwordsDontMatch": "The passwords are not the same",
-      "alreadyHaveAccount": "Already have an account?"
+      "alreadyHaveAccount": "Already have an account?",
+      "readPrivacy": "I have read the [Privacy Policy]",
+      "acceptTerms": "I accept the [Terms and Conditions]"
     },
     "settings": {
       "title": "Settings",

src/screens/Register/Register.jsx

@@ -10,6 +10,7 @@ import TextInput from "../../Components/Form/TextInput/TextInput.jsx";
 import InviteCodeValidIndicator from "../../Components/Indicators/InviteCodeValidIndicator/InviteCodeValidIndicator.jsx";
 import ServerValidIndicator from "../../Components/Indicators/ServerValidIndicator/ServerValidIndicator.jsx";
 import UnauthenticatedLayout from "../../Components/Layout/UnauthenticatedLayout/UnauthenticatedLayout.jsx";
+import LinkCreator from "../../Components/LinkCreator/LinkCreator.jsx";
 
 import { setLanguages } from "../../redux/Actions/language.js";
 import { setServerUrl, register } from "../../redux/Actions/login.js";
@@ -28,6 +29,13 @@ const Register = ({ image }) => {
   const selfHosted = useSelector((state) => state.login.selfHosted);
   const languages = useSelector((state) => state.language.languages);
 
+  const privacyText = t("screens.register.readPrivacy");
+  const [privacyTextBefore, privacyTextLink, ...privacyTextAfter] =
+    privacyText.split(/[[\]]/);
+  const termsText = t("screens.register.acceptTerms");
+  const [termsTextBefore, termsTextLink, ...termsTextAfter] =
+    termsText.split(/[[\]]/);
+
   const [username, setUsername] = useState("");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
@@ -44,7 +52,8 @@ const Register = ({ image }) => {
   const [isInviteCodeValid, setIsInviteCodeValid] = useState(false);
   const [isUsernameValid, setIsUsernameValid] = useState(false);
   const [isEmailValid, setIsEmailValid] = useState(false);
-
+  const [readPrivacy, setReadPrivacy] = useState(false);
+  const [acceptTerms, setAcceptTerms] = useState(false);
   const { SHOW_PLANS: showPlans, BASE_URL: baseURL } = window.VOCASCAN_CONFIG;
 
   const dispatch = useDispatch();
@@ -55,6 +64,14 @@ const Register = ({ image }) => {
     history.push("/login");
   }, [history]);
 
+  const handleReadPrivacy = useCallback(() => {
+    setReadPrivacy((readPrivacy) => !readPrivacy);
+  }, []);
+
+  const handleAcceptTerms = useCallback(() => {
+    setAcceptTerms((acceptTerms) => !acceptTerms);
+  }, []);
+
   //fetch languages
   const fetchLanguages = useCallback(() => {
     // when array is empty no languages were stored. Then add them to the store
@@ -168,7 +185,9 @@ const Register = ({ image }) => {
         !isServerValid ||
         !isSamePassword ||
         !isEmailValid ||
-        !isUsernameValid
+        !isUsernameValid ||
+        !readPrivacy ||
+        !acceptTerms
       )
     );
   }, [
@@ -185,6 +204,8 @@ const Register = ({ image }) => {
     isSamePassword,
     isEmailValid,
     isUsernameValid,
+    readPrivacy,
+    acceptTerms,
   ]);
 
   useEffect(() => {
@@ -333,6 +354,43 @@ const Register = ({ image }) => {
                 show={!baseURL}
               />
             )}
+
+            <LinkCreator path="/terms-and-conditions" shouldBeValid={true}>
+              {({ isValid, url }) => {
+                isValid && (
+                  <div className={"checkbox-wrapper"}>
+                    <input
+                      type="checkbox"
+                      name="privacy"
+                      onChange={handleReadPrivacy}
+                    />
+                    <label className="label">
+                      <p>{privacyTextBefore}</p>
+                      <a href={url}>{privacyTextLink}</a>
+                      <p>{privacyTextAfter}</p>
+                    </label>
+                  </div>
+                );
+              }}
+            </LinkCreator>
+            <LinkCreator path="/terms-and-conditions" shouldBeValid={true}>
+              {({ isValid, url }) => {
+                isValid && (
+                  <div className={"checkbox-wrapper"}>
+                    <input
+                      type="checkbox"
+                      name="terms"
+                      onChange={handleAcceptTerms}
+                    />
+                    <label className="label">
+                      <p>{termsTextBefore}</p>
+                      <a href={url}>{termsTextLink}</a>
+                      <p>{termsTextAfter}</p>
+                    </label>
+                  </div>
+                );
+              }}
+            </LinkCreator>
           </div>
           <div className="register-form-submit">
             <Button

src/screens/Register/Register.scss

@@ -57,6 +57,20 @@
       font-size: 11px;
       color: $color-red;
     }
+
+    .checkbox-wrapper {
+      text-align: left;
+      font-size: 14px;
+      margin: 3px 0;
+
+      &.hidden {
+        display: none;
+      }
+
+      .label {
+        margin-left: 5px;
+      }
+    }
   }
 
   .register-form-submit {

src/utils/api.js

@@ -24,6 +24,13 @@ export const register = (data, code = null) =>
   api.post(`/user/register${code ? `?inviteCode=${code}` : ""}`, data);
 export const changePassword = (data) => api.patch("/user/reset-password", data);
 
+// Legal
+export const checkUrlAvailable = (url) => {
+  const checkApi = axios.create();
+
+  return checkApi.get(url);
+};
+
 // User
 export const getProfile = () => api.get("/user");
 export const deleteUser = () => api.delete("/user");