Finished Language-Model

Improved Homepage
CraftException · Jul 3, 2021 · 2c11d39 · 2c11d39
1 parent 068df56
commit 2c11d39
Show file tree

Hide file tree

Showing 15 changed files with 152 additions and 104 deletions.
diff --git a/backend/ApiHandler.ts b/backend/ApiHandler.ts
@@ -98,12 +98,14 @@ router.post("/api/login", (req, res) => {
 router.get("/api/lang", (req, res) => {
     LanguageManager.initializeLang(req, res);
 
+    // Check if the language exists
     if (!LanguageManager.languageExists(req.query["lang"].toString())) {
         res.json({
             message: "Language not found"
         });
         return;
     } else {
+        // Update the language and return to the source URL
         LanguageManager.updateLanguage(res, req.query["lang"].toString());
         res.redirect(req.query["source"].toString());
     }

diff --git a/lang/de.json b/lang/de.json
@@ -23,7 +23,7 @@
     },
 
     "header": {
-      "longUrl": "Lange URL",
+      "longUrl": "Vollständige URL",
       "button": "Link kürzen"
     },
 
@@ -50,7 +50,6 @@
     },
 
     "navbar": {
-      "brand": "lnkdto.link (beta)",
       "home": "Startseite",
       "account": {
         "account": "Account",
@@ -96,8 +95,28 @@
         "delete": "Link löschen"
       },
       "detailedStats": "Statisiken von",
-      "totalClicks": "Gesamte Aufrufe:",
-      "clicks": "Aufrufe"
+      "totalClicks": "Gesamte Aufrufe:"
+    },
+
+    "start": {
+      "title": "Kürze deine Links auf ein Minimum",
+      "subtitle": "Warum lange Links?",
+      "text": "Lnkdto.link ist ein einfacher URL-Shorter, um URLs zu kürzen. Da Links oftmals unüberschaubar lang werden, kann lnkdto.link diese auf einen kleinen Link reduzieren. Außerdem verfügt lnkdto.link über ein übersichtliches Statistik-System um genau zu überprüfen wie oft ein Link genutzt wurde.\n\n",
+      "features": {
+        "title": "Features von lnkdto.link",
+
+        "feature1Head": "Schnell & simpel",
+        "feature1": "Mit nur zwei Clicks können Links gekürzt werden. Der Link wird sofort in die Zwischenablage kopiert.",
+
+        "feature2Head": "Statistik",
+        "feature2": "Durch ein Account-System können User genaue Statistiken ihrer Links einsehen, wann der Link wie oft angeklickt wurde.",
+
+        "feature3Head": "Einfache API",
+        "feature3": "Durch einfach API-Schnittstellen kann lnkdto.link in jede Art von App implementiert werden. Ein Dokumentation findest du <a href='#'>hier</a>",
+
+        "feature4Head": "Quelloffen",
+        "feature4": "Der Gesamte Quellcode von lnkdto.link ist <a href='https://github.com/CraftException/lnkdto.link'>hier</a> verfügbar."
+      }
     }
   }
 }
diff --git a/lang/en.json b/lang/en.json
@@ -70,7 +70,6 @@
       "mail": {
         "title": "Update Mail",
         "newMail": "New Mail",
-        "updateMail": "Update Mail",
         "button": "Update Mail"
       },
       "password": {
@@ -97,8 +96,28 @@
         "delete": "Delete Link"
       },
       "detailedStats": "Detailed stats of",
-      "totalClicks": "Total Clicks:",
-      "clicks": "Clicks"
+      "totalClicks": "Total Clicks:"
+    },
+
+    "start": {
+      "title": "Get tiny, simple links",
+      "subtitle": "Why use long links?",
+      "text": "Lnkdto.link is a simple URL-Shortener, to cut your URLs. It's really inconvenient to deal with long urls, and with an URL-Shortener, like Lnkdto.link, you can create short URLs, you can give to other people. Lnkdto.link has also a very good stat-system, you can see exactly, how many clicks your shorten link got.",
+      "features": {
+        "title": "Features of lnkdto.link",
+
+        "feature1Head": "Fast & easy",
+        "feature1": "Links can be shortened with just two clicks. The link is immediately copied to the clipboard.",
+
+        "feature2Head": "Statistics",
+        "feature2": "Through an account system, users can see exact statistics of their links, when the link was clicked how often.",
+
+        "feature3Head": "Simple API",
+        "feature3": "Using our simple API, lnkdto.link can be implemented in any type of applications. You can find the documentation <a href='#'> here </a>",
+
+        "feature4Head": "Open-Source",
+        "feature4": "The entire source code of lnkdto.link is available <a href='https://github.com/CraftException/lnkdto.link'>here</a>."
+      }
     }
   }
 }
diff --git a/layout/container.ejs b/layout/container.ejs
@@ -1,20 +1,22 @@
+<% include("languageHelper.ejs", {selectedLang:selectedLang,fallback:fallback}); %>
+
 <!DOCTYPE html>
 <html>
 <head>
     <%- include("partials/head.ejs", {}); %>
 </head>
 <body style="margin:0;">
 
-    <%- include("partials/navbar.ejs", {selectedLangShortCode:selectedLangShortCode, availableLangs:availableLangs}); %>
+    <%- include("partials/navbar.ejs", {_lang:_lang,selectedLangShortCode:selectedLangShortCode, availableLangs:availableLangs}); %>
 
-    <%- include("partials/header.ejs", {}); %>
+    <%- include("partials/header.ejs", {_lang:_lang,}); %>
 
     <div id="loader"><i class="fa fa-spinner fa-spin"></i></div>
 
     <div style="display:none; background-color: #ffffff !important" id="pageContent" class="animate-bottom"></div>
 
-    <%- include("partials/footer.ejs", {fullWhite: view!=="edituser"&&view!=="usercontrol"}); %>
-    <%- include("partials/modals.ejs", {}); %>
+    <%- include("partials/footer.ejs", {_lang:_lang,fullWhite: view!=="edituser"&&view!=="usercontrol"}); %>
+    <%- include("partials/modals.ejs", {_lang:_lang,}); %>
 
     <script>
         var viewToLoad = "<%= view %>";

diff --git a/layout/languageHelper.ejs b/layout/languageHelper.ejs
@@ -0,0 +1,17 @@
+<%
+    _lang = (langString) => {
+        var parsedString = langString.split(".");
+
+        var fallbackString = fallback["lang"];
+        parsedString.forEach(elem => fallbackString = fallbackString[elem]);
+
+        try {
+            var selectedLangString = selectedLang["lang"];
+            parsedString.forEach(elem => selectedLangString = selectedLangString[elem]);
+            return selectedLangString || fallbackString;
+        } catch (e) {
+            return fallbackString;
+        }
+
+    };
+%>
diff --git a/layout/partials/footer.ejs b/layout/partials/footer.ejs
@@ -5,19 +5,19 @@
         <center><section class="columns">
 
                 <div class="column">
-                    <h3>About Lnkdto.link</h3>
-                    <p>Lnkdto.link is a simple URL-Shortener, to cut your URLs</p>
+                    <h3><%- _lang("footer.about"); %></h3>
+                    <p><%- _lang("footer.description"); %></p>
                 </div>
 
                 <div class="column">
-                    <h3>Legal</h3>
-                    <a class="imprintButton" href="https://jusoft.dev/impressum.html">Imprint</a><br>
-                    <a class="imprintButton" href="https://jusoft.dev/datenschutz.html">Privacy Policy</a><br>
+                    <h3><%- _lang("footer.legal.legal"); %></h3>
+                    <a class="imprintButton" href="https://jusoft.dev/impressum.html"><%- _lang("footer.legal.imprint"); %></a><br>
+                    <a class="imprintButton" href="https://jusoft.dev/datenschutz.html"><%- _lang("footer.legal.privacy"); %></a><br>
                 </div>
 
             </section></center>
 
-        <center style="margin-top: 45px; margin-bottom: 35px">© 2021 CraftException and <a href="https://jusoft.dev">JuSoft</a></center>
+        <center style="margin-top: 45px; margin-bottom: 35px"><%- _lang("footer.copyright"); %> <a href="https://jusoft.dev">JuSoft</a></center>
     </div>
 
 </div>
diff --git a/layout/partials/header.ejs b/layout/partials/header.ejs
@@ -4,12 +4,12 @@
 
             <form method="get" action="javascript:void('')" id="url_shorting">
                 <div id="longUrlField" class="form__group field">
-                    <input id="longUrl" type="input" class="form__field" placeholder="Long URL" name="url" required="">
-                    <label id="longUrlMessage" for="name" class="form__label">Long URL</label>
+                    <input id="longUrl" type="input" class="form__field" placeholder="<%- _lang("header.longUrl"); %>" name="url" required="">
+                    <label id="longUrlMessage" for="name" class="form__label"><%- _lang("header.longUrl"); %></label>
                 </div>
                 <br>
 
-                <p><button type="submit">Create short link</button></p>
+                <p><button type="submit"><%- _lang("header.button"); %></button></p>
             </form>
         </div></center>
 </div>
diff --git a/layout/partials/modals.ejs b/layout/partials/modals.ejs
@@ -6,7 +6,7 @@
 
                 <div class="modal-header text-center">
                     <h4 class="modal-title w-100 font-weight-bold">
-                        Einloggen
+                        <%- _lang("modals.login.title"); %>
                         <br>
                         <span id="login_message" style="color:red"></span>
                     </h4>
@@ -17,17 +17,17 @@
                 <div class="modal-body mx-3">
                     <div class="md-form mb-5">
                         <input type="text" name="name" id="login_name" class="form-control validate" required>
-                        <label data-error="wrong" data-success="right" for="login_name">Name</label>
+                        <label data-error="wrong" data-success="right" for="login_name"><%- _lang("modals.login.name"); %></label>
                     </div>
 
                     <div class="md-form mb-4">
                         <input type="password" name="password" id="login_pw" class="form-control validate" required>
-                        <label data-error="wrong" data-success="right" for="login_pw">Password <a class="higlighted-a" data-dismiss="modal" data-toggle="modal" data-target="#modalRecoveryForm"> Password Lost?</a></label>
+                        <label data-error="wrong" data-success="right" for="login_pw"><%- _lang("modals.login.password"); %> <a class="higlighted-a" data-dismiss="modal" data-toggle="modal" data-target="#modalRecoveryForm"> <%- _lang("modals.login.passwordLost"); %></a></label>
                     </div>
 
                 </div>
                 <div class="modal-footer d-flex justify-content-center">
-                    <button type="submit" name="submit" class="button btn-success" value="Absenden">Submit</button>
+                    <button type="submit" name="submit" class="button btn-success" value="<%- _lang("modals.login.button"); %>"><%- _lang("modals.login.button");%></button>
                 </div>
             </div>
         </form>
@@ -41,7 +41,7 @@
 
                 <div class="modal-header text-center">
                     <h4 class="modal-title w-100 font-weight-bold">
-                        Registrieren
+                        <%- _lang("modals.register.title"); %>
                         <br>
                         <span id="register_message" style="color:red"></span>
                     </h4>
@@ -52,22 +52,22 @@
                 <div class="modal-body mx-3">
                     <div class="md-form mb-5">
                         <input type="email" name="mail" id="register_mail" class="form-control validate" required>
-                        <label data-error="wrong" data-success="right" for="register_mail">E-Mail Adress</label>
+                        <label data-error="wrong" data-success="right" for="register_mail"><%- _lang("modals.register.email"); %></label>
                     </div>
 
                     <div class="md-form mb-5">
                         <input type="text" name="name" id="register_name" class="form-control validate" required>
-                        <label data-error="wrong" data-success="right" for="register_name">Name</label>
+                        <label data-error="wrong" data-success="right" for="register_name"><%- _lang("modals.register.name"); %></label>
                     </div>
 
                     <div class="md-form mb-4">
                         <input type="password" name="password" id="register_pw" class="form-control validate" required>
-                        <label data-error="wrong" data-success="right" for="register_pw">Password</label>
+                        <label data-error="wrong" data-success="right" for="register_pw"><%- _lang("modals.register.password"); %></label>
                     </div>
 
                 </div>
                 <div class="modal-footer d-flex justify-content-center">
-                    <button type="submit" name="submit" class="button btn-success" value="Absenden">Submit</button>
+                    <button type="submit" name="submit" class="button btn-success" value="<%- _lang("modals.register.button"); %>"><%- _lang("modals.register.button"); %></button>
                 </div>
             </div>
         </form>
@@ -81,7 +81,7 @@
 
                 <div class="modal-header text-center">
                     <h4 class="modal-title w-100 font-weight-bold">
-                        Password Recovery
+                        <%- _lang("modals.passwordRecovery.title"); %>
                         <br>
                         <span id="recovery_message" style="color:red"></span>
                     </h4>
@@ -92,11 +92,11 @@
                 <div class="modal-body mx-3">
                     <div class="md-form mb-5">
                         <input type="text" name="name" id="recovery_mail" class="form-control validate" required>
-                        <label data-error="wrong" data-success="right" for="recovery_mail">Username</label>
+                        <label data-error="wrong" data-success="right" for="recovery_mail"><%- _lang("modals.passwordRecovery.username"); %></label>
                     </div>
                 </div>
                 <div class="modal-footer d-flex justify-content-center">
-                    <button type="submit" name="submit" class="button btn-success" value="Absenden">Submit</button>
+                    <button type="submit" name="submit" class="button btn-success" value="Absenden"><%- _lang("modals.passwordRecovery.button"); %></button>
                 </div>
             </div>
         </form>

diff --git a/layout/partials/navbar.ejs b/layout/partials/navbar.ejs
@@ -1,50 +1,50 @@
 <nav id="navHome" class="navHome navbar navbar-expand-lg navbar-light sticky-top">
     <div class="container-fluid max-width-940">
-        <a class="navbar-brand" href="index" class="foreColorNavbar" style="color: white;"> lnkdto.link (beta) </a>
+        <a class="navbar-brand" href="index" class="foreColorNavbar" style="color: white;"> <%- _lang("navbar.brand"); %> </a>
         <button class="navbar-toggler togglerNoBorder" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse backgroundWhite" id="navbarNavDropdown">
             <ul class="navbar-nav ml-auto">
                 <li class="nav-item active">
-                    <a class="nav-link" onclick="loadView('start', '/')" class="foreColorNavbar" style="color: white;">Home </a>
+                    <a class="nav-link" onclick="loadView('start', '/')" class="foreColorNavbar" style="color: white;"><%- _lang("navbar.home"); %> </a>
                 </li>
 
                 <% if (isLoggedIn) { %>
 
                     <li class="nav-item dropdown navDropdown">
                         <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="foreColorNavbar" style="color: white;">
-                            Account
+                            <%- _lang("navbar.account.account"); %>
                         </a>
                         <div class="dropdown-menu dropdown-menu-right navDropdown" aria-labelledby="navbarDropdownMenuLink">
-                            <a class="dropdown-item" onclick="loadView('usercontrol', '/user/usercontrol')"  id="shorturls">Your shorten URLs</a>
-                            <a class="dropdown-item" onclick="loadView('edituser', '/user/edituser')" id="edit_user">Edit User</a>
-                            <a class="dropdown-item" id="logout">Logout</a>
+                            <a class="dropdown-item" onclick="loadView('usercontrol', '/user/usercontrol')"  id="shorturls"><%- _lang("navbar.account.shortenurls"); %></a>
+                            <a class="dropdown-item" onclick="loadView('edituser', '/user/edituser')" id="edit_user"><%- _lang("navbar.account.edituser"); %></a>
+                            <a class="dropdown-item" id="logout"><%- _lang("navbar.account.logout"); %></a>
                         </div>
                     </li>
 
                 <% } else { %>
 
                 <li class="nav-item dropdown navDropdown">
                     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="foreColorNavbar" style="color: white;">
-                        Account
+                        <%- _lang("navbar.account.account"); %>
                     </a>
                     <div class="dropdown-menu dropdown-menu-right navDropdown" aria-labelledby="navbarDropdownMenuLink">
-                        <a class="dropdown-item" data-toggle="modal" data-target="#modelLoginForm">Login</a>
-                        <a class="dropdown-item" data-toggle="modal" data-target="#modalRegisterForm">Register</a>
+                        <a class="dropdown-item" data-toggle="modal" data-target="#modelLoginForm"><%- _lang("navbar.account.login"); %></a>
+                        <a class="dropdown-item" data-toggle="modal" data-target="#modalRegisterForm"><%- _lang("navbar.account.register"); %></a>
                     </div>
                 </li>
 
                 <% } %>
 
                 <li class="nav-item">
-                    <a class="nav-link" onclick="loadView('stats', '/stats')" class="foreColorNavbar" style="color: white;">Statistics</a>
+                    <a class="nav-link" onclick="loadView('stats', '/stats')" class="foreColorNavbar" style="color: white;"><%- _lang("navbar.statistics"); %></a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" href="https://github.com/CraftException/lnkdto.link/" class="foreColorNavbar" style="color: white;">GitHub</a>
+                    <a class="nav-link" href="https://github.com/CraftException/lnkdto.link/" class="foreColorNavbar" style="color: white;"><%- _lang("navbar.github"); %></a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" href="https://jusoft.dev" class="foreColorNavbar" style="color: white;">JuSoft</a>
+                    <a class="nav-link" href="https://jusoft.dev" class="foreColorNavbar" style="color: white;"><%- _lang("navbar.jusoft"); %></a>
                 </li>
 
                 <li class="nav-item dropdown navDropdown">