348 add translation i18n

.example.env

@@ -89,3 +89,7 @@ REPORT_EMAIL=
 
 # Support email to show on the app
 CONTACT_EMAIL=
+
+# Module that allows you to have a shortcut search page based on name and description. 
+# In this page we can search our shortcuts and the shortcuts that we attribute searchable=true
+SEARCH_ENABLED=false

client/components/Extensions.tsx

@@ -5,6 +5,7 @@ import SVG from "react-inlinesvg"; // TODO: another solution
 import { Colors } from "../consts";
 import { ColCenterH } from "./Layout";
 import { H3 } from "./Text";
+import { useTranslation } from 'react-i18next';
 
 const Button = styled.button`
   display: flex;
@@ -71,46 +72,49 @@ const Icon = styled(SVG)`
   }
 `;
 
-const Extensions = () => (
-  <ColCenterH
-    width={1}
-    flex="0 0 auto"
-    flexWrap={["wrap", "wrap", "nowrap"]}
-    py={[64, 96]}
-    backgroundColor={Colors.ExtensionsBg}
-  >
-    <H3 fontSize={[26, 28]} mb={5} color="white" light>
-      Browser extensions.
-    </H3>
-    <Flex
-      width={1200}
-      maxWidth="100%"
-      flex="1 1 auto"
-      justifyContent="center"
+const Extensions = () => {
+  const { t } = useTranslation();
+  return (
+    <ColCenterH
+      width={1}
+      flex="0 0 auto"
       flexWrap={["wrap", "wrap", "nowrap"]}
+      py={[64, 96]}
+      backgroundColor={Colors.ExtensionsBg}
     >
-      <Link
-        href="https://chrome.google.com/webstore/detail/kutt/pklakpjfiegjacoppcodencchehlfnpd"
-        target="_blank"
-        rel="noopener noreferrer"
+      <H3 fontSize={[26, 28]} mb={5} color="white" light>
+        {t('extensions.title')}
+      </H3>
+      <Flex
+        width={1200}
+        maxWidth="100%"
+        flex="1 1 auto"
+        justifyContent="center"
+        flexWrap={["wrap", "wrap", "nowrap"]}
       >
-        <ChromeButton>
-          <Icon src="/images/googlechrome.svg" color="#4285f4" />
-          <span>Download for Chrome</span>
-        </ChromeButton>
-      </Link>
-      <Link
-        href="https://addons.mozilla.org/en-US/firefox/addon/kutt/"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <FirefoxButton>
-          <Icon src="/images/mozillafirefox.svg" color="#e0890f" />
-          <span>Download for Firefox</span>
-        </FirefoxButton>
-      </Link>
-    </Flex>
-  </ColCenterH>
-);
+        <Link
+          href="https://chrome.google.com/webstore/detail/kutt/pklakpjfiegjacoppcodencchehlfnpd"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <ChromeButton>
+            <Icon src="/images/googlechrome.svg" color="#4285f4" />
+            <span>{t('extensions.btnChrome')}</span>
+          </ChromeButton>
+        </Link>
+        <Link
+          href="https://addons.mozilla.org/en-US/firefox/addon/kutt/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <FirefoxButton>
+            <Icon src="/images/mozillafirefox.svg" color="#e0890f" />
+            <span>{t('extensions.btnFirefox')}</span>
+          </FirefoxButton>
+        </Link>
+      </Flex>
+    </ColCenterH>
+  );
+}
 
 export default Extensions;

client/components/Features.tsx

@@ -6,39 +6,42 @@ import FeaturesItem from "./FeaturesItem";
 import { ColCenterH } from "./Layout";
 import { Colors } from "../consts";
 import Text, { H3 } from "./Text";
+import { useTranslation } from 'react-i18next';
 
-const Features = () => (
-  <ColCenterH
-    width={1}
-    flex="0 0 auto"
-    py={[64, 100]}
-    backgroundColor={Colors.FeaturesBg}
-  >
-    <H3 fontSize={[26, 28]} mb={72} light>
-      Kutting edge features.
-    </H3>
-    <Flex
-      width={1200}
-      maxWidth="100%"
-      flex="1 1 auto"
-      justifyContent="center"
-      flexWrap={["wrap", "wrap", "wrap", "nowrap"]}
+const Features = () => {
+  const { t } = useTranslation();
+  return (
+    <ColCenterH
+      width={1}
+      flex="0 0 auto"
+      py={[64, 100]}
+      backgroundColor={Colors.FeaturesBg}
     >
-      <FeaturesItem title="Managing links" icon="edit">
-        Create, protect and delete your links and monitor them with detailed
-        statistics.
+      <H3 fontSize={[26, 28]} mb={72} light>
+        {t('feature.title')}
+    </H3>
+      <Flex
+        width={1200}
+        maxWidth="100%"
+        flex="1 1 auto"
+        justifyContent="center"
+        flexWrap={["wrap", "wrap", "wrap", "nowrap"]}
+      >
+        <FeaturesItem title={t('feature.f1.title')} icon="edit">
+        {t('feature.f1.description')}
       </FeaturesItem>
-      <FeaturesItem title="Custom domain" icon="shuffle">
-        Use custom domains for your links. Add or remove them for free.
+        <FeaturesItem title={t('feature.f2.title')} icon="shuffle">
+        {t('feature.f2.description')}
       </FeaturesItem>
-      <FeaturesItem title="API" icon="zap">
-        Use the provided API to create, delete, and get URLs from anywhere.
+        <FeaturesItem title={t('feature.f3.title')} icon="zap">
+        {t('feature.f3.description')}
       </FeaturesItem>
-      <FeaturesItem title="Free &amp; open source" icon="heart">
-        Completely open source and free. You can host it on your own server.
+        <FeaturesItem title={t('feature.f4.title')} icon="heart">
+        {t('feature.f4.description')}
       </FeaturesItem>
-    </Flex>
-  </ColCenterH>
-);
+      </Flex>
+    </ColCenterH>
+  );
+}
 
 export default Features;

client/components/Footer.tsx

@@ -7,10 +7,12 @@ import { ColCenter } from "./Layout";
 import ReCaptcha from "./ReCaptcha";
 import ALink from "./ALink";
 import Text from "./Text";
+import { useTranslation } from 'react-i18next';
 
 const { publicRuntimeConfig } = getConfig();
 
 const Footer: FC = () => {
+  const { t } = useTranslation();
   const { isAuthenticated } = useStoreState(s => s.auth);
 
   useEffect(() => {
@@ -26,25 +28,25 @@ const Footer: FC = () => {
     >
       {!isAuthenticated && <ReCaptcha />}
       <Text fontSize={[12, 13]} py={2}>
-        Made with love by{" "}
+        {t('footer.made')}
         <ALink href="//thedevs.network/" title="The Devs">
-          The Devs
+        {t('footer.theDevs')}
         </ALink>
         .{" | "}
         <ALink
           href="https://github.com/thedevs-network/kutt"
           title="GitHub"
           target="_blank"
         >
-          GitHub
+          {t('footer.gitHub')}
         </ALink>
         {" | "}
         <ALink href="/terms" title="Terms of Service">
-          Terms of Service
+        {t('footer.termsOfService')}
         </ALink>
         {" | "}
         <ALink href="/report" title="Report abuse">
-          Report Abuse
+        {t('footer.report')}
         </ALink>
         {publicRuntimeConfig.CONTACT_EMAIL && (
           <>
@@ -53,7 +55,7 @@ const Footer: FC = () => {
               href={`mailto:${publicRuntimeConfig.CONTACT_EMAIL}`}
               title="Contact us"
             >
-              Contact us
+              {t('footer.contact')}
             </ALink>
           </>
         )}

client/components/Header.tsx

@@ -11,6 +11,8 @@ import styled from "styled-components";
 import { RowCenterV } from "./Layout";
 import { Button } from "./Button";
 import ALink from "./ALink";
+import { Select } from "./Input";
+import { useTranslation } from 'react-i18next';
 
 const { publicRuntimeConfig } = getConfig();
 
@@ -50,6 +52,7 @@ const LogoImage = styled.div`
 `;
 
 const Header: FC = () => {
+  const { t, i18n } = useTranslation();
   const { isAuthenticated } = useStoreState(s => s.auth);
   const isMobile = useMedia({ maxWidth: 640 });
 
@@ -62,7 +65,7 @@ const Header: FC = () => {
           forButton
         >
           <Button height={[32, 40]}>
-            {!DISALLOW_REGISTRATION ? "Log in / Sign up" : "Log in"}
+            {!DISALLOW_REGISTRATION ? t('button.login')+" / "+t('button.signUp') : t('button.login')}
           </Button>
         </ALink>
       </Link>
@@ -72,7 +75,7 @@ const Header: FC = () => {
     <Li>
       <Link href="/logout">
         <ALink href="/logout" title="logout" fontSize={[14, 16]}>
-          Log out
+        {t('button.logout')}
         </ALink>
       </Link>
     </Li>
@@ -81,12 +84,11 @@ const Header: FC = () => {
     <Li>
       <Link href="/settings">
         <ALink href="/settings" title="Settings" forButton>
-          <Button height={[32, 40]}>Settings</Button>
+          <Button height={[32, 40]}>{t('header.settings')}</Button>
         </ALink>
       </Link>
     </Li>
   );
-
   return (
     <Flex
       width={1232}
@@ -132,13 +134,13 @@ const Header: FC = () => {
                 title="GitHub"
                 fontSize={[14, 16]}
               >
-                GitHub
+                {t('header.gitHub')}
               </ALink>
             </Li>
             <Li>
               <Link href="/report">
                 <ALink href="/report" title="Report abuse" fontSize={[14, 16]}>
-                  Report
+                {t('header.report')}
                 </ALink>
               </Link>
             </Li>
@@ -156,11 +158,28 @@ const Header: FC = () => {
           <Flex display={["flex", "none"]}>
             <Link href="/report">
               <ALink href="/report" title="Report" fontSize={[14, 16]}>
-                Report
+              {t('header.report')}
               </ALink>
             </Link>
           </Flex>
         </Li>
+        {i18n.languages.length > 1 &&
+         <Select
+            pl={[3, 24]}
+            pr={[3, 24]}
+            fontSize={[14, 15]}
+            height={[32, 37]}
+            width={[110, 150]}
+            onChange= {(event) =>i18n.changeLanguage(event.target.value)}
+            options={
+              i18n.languages.map(d => ({
+                key: t(`language.${d}`)+"",
+                value: d
+              }))
+            }
+            value={i18n.language}
+          /> 
+        }
         {logout}
         {settings}
         {login}

client/components/Icon/Eye.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+function Eye() {
+  return (
+    <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="80"
+    height="80"
+    fill="none"
+    stroke="#000"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth="2"
+      viewBox="-1 49 384.9 231.9"
+    >
+    <path fill="currentColor" d="M200 150c0 27.6-22.4 50-50 50 0 27.6 22.4 50 50 50s50-22.4 50-50S227.6 150 200 150zM200 50C97.45 50 0 166.2 0 200s97.45 150 200 150 200-116.2 200-150S302.55 50 200 50zM200 300c-55.225 0-100-44.775-100-100s44.775-100 100-100 100 44.775 100 100S255.225 300 200 300z
+      "/>
+      </svg>
+  );
+}
+
+export default React.memo(Eye);

client/components/Icon/EyeSlash.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+function EyeSlash() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      strokeWidth="2"
+      viewBox="0 0 640 512"
+    >
+      <path fill="currentColor" d="M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z"></path>
+</svg>
+  );
+}
+
+export default React.memo(EyeSlash);

client/components/Icon/Icon.tsx

@@ -22,6 +22,8 @@ import Heart from "./Heart";
 import Stop from "./Stop";
 import Plus from "./Plus";
 import Lock from "./Lock";
+import Eye from "./Eye";
+import EyeSlash from "./EyeSlash";
 import Edit from "./Edit";
 import Copy from "./Copy";
 import Send from "./Send";
@@ -49,7 +51,9 @@ const icons = {
   send: Send,
   shuffle: Shuffle,
   signup: Signup,
-  spinner: Spinner,
+  spinner: Spinner,  
+  eye: Eye,
+  eyeSlash: EyeSlash,
   stop: Stop,
   trash: Trash,
   x: X,