From 35453a0c2d8258696795b67de47e6b3dbc20f286 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Mon, 19 Jun 2023 11:50:53 +0200
Subject: [PATCH] Translate the oidc login view

---
 src/oidc.js                  |  8 +++++++-
 src/oidc_templates/login.ejs | 20 ++++++++++----------
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/oidc.js b/src/oidc.js
index fda64a31f..cb6149b7a 100644
--- a/src/oidc.js
+++ b/src/oidc.js
@@ -32,6 +32,7 @@ const assert = require('assert'),
     safe = require('safetydance'),
     settings = require('./settings.js'),
     tokens = require('./tokens.js'),
+    translation = require('./translation.js'),
     url = require('url'),
     users = require('./users.js'),
     util = require('util');
@@ -436,6 +437,8 @@ function renderInteractionPage(provider) {
     assert.strictEqual(typeof provider, 'object');
 
     return async function (req, res, next) {
+        const translationAssets = await translation.getTranslations();
+
         try {
             const { uid, prompt, params, session } = await provider.interactionDetails(req, res);
 
@@ -457,7 +460,10 @@ function renderInteractionPage(provider) {
                     options.iconUrl = app.iconUrl;
                 }
 
-                return res.render('login', options);
+                const template = fs.readFileSync(__dirname + '/oidc_templates/login.ejs', 'utf-8');
+                const html = ejs.render(translation.translate(template, translationAssets.translations || {}, translationAssets.fallback || {}), options);
+
+                return res.send(html);
             }
             case 'consent': {
                 const options = {
diff --git a/src/oidc_templates/login.ejs b/src/oidc_templates/login.ejs
index 2f7f893e2..70c60e57b 100644
--- a/src/oidc_templates/login.ejs
+++ b/src/oidc_templates/login.ejs
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
 
-    <title>Login to <%= name %></title>
+    <title>{{ login.loginTo }} <%= name %></title>
 
     <link id="favicon" type="image/png" rel="icon" href="/api/v1/cloudron/avatar">
     <link rel="apple-touch-icon" href="/api/v1/cloudron/avatar">
@@ -59,7 +59,7 @@
         <div class="col-md-12" style="text-align: center;">
           <img width="128" height="128" class="avatar" src="<%= iconUrl %>"/>
           <br/>
-          <h1><small>Login to</small> <%= name %></h1>
+          <h1><small>{{ login.loginTo }}</small> <%= name %></h1>
         </div>
       </div>
       <br/>
@@ -67,21 +67,21 @@
         <div class="col-md-12">
           <form id="loginForm">
             <div class="form-group">
-              <label class="control-label" for="inputUsername">Username</label>
+              <label class="control-label" for="inputUsername">{{ login.username }}</label>
               <input type="text" class="form-control" id="inputUsername" name="username" autofocus required>
             </div>
             <div class="form-group">
-              <label class="control-label" for="inputPassword">Password</label>
+              <label class="control-label" for="inputPassword">{{ login.password }}</label>
               <input type="password" class="form-control" name="password" id="inputPassword" required password-reveal>
               <p class="has-error" id="passwordError"></p>
             </div>
             <div class="form-group">
-              <label class="control-label" for="inputTotpToken">2FA Token (if enabled)</label>
+              <label class="control-label" for="inputTotpToken">{{ login.2faToken }}</label>
               <input type="text" class="form-control" name="totpToken" id="inputTotpToken" value="">
               <p class="has-error" id="totpError"></p>
             </div>
-            <a href="/passwordreset.html">Reset password</a>
-            <button class="btn btn-primary btn-outline pull-right" type="submit">Log in</button>
+            <a href="/passwordreset.html">{{ login.resetPasswordAction }}</a>
+            <button class="btn btn-primary btn-outline pull-right" type="submit">{{ login.signInAction }}</button>
           </form>
         </div>
       </div>
@@ -119,11 +119,11 @@ document.getElementById('loginForm').addEventListener('submit', function (event)
             if (data.message === 'Username and password does not match') {
                document.getElementById('inputPassword').value = '';
                document.getElementById('inputPassword').focus();
-               document.getElementById('passwordError').innerText = 'Invalid username or password';
+               document.getElementById('passwordError').innerText = '{{ login.errorIncorrectCredentials }}';
             } else if (data.message.indexOf('totpToken') !== -1) {
                document.getElementById('inputTotpToken').value = '';
                document.getElementById('inputTotpToken').focus();
-               document.getElementById('totpError').innerText = 'Missing or invalid 2FA Token';
+               document.getElementById('totpError').innerText = '{{ login.errorIncorrect2FAToken }}';
             } else {
                 throw new Error('Something went wrong');
             }
@@ -134,7 +134,7 @@ document.getElementById('loginForm').addEventListener('submit', function (event)
         if (data.redirectTo) window.location.href = data.redirectTo;
         else console.log('login success but missing redirectTo in data:', data);
     }).catch(function (error) {
-        document.getElementById('passwordError').innerText = 'Unexpected error. Try again later.';
+        document.getElementById('passwordError').innerText = '{{ login.errorInternal }}';
         console.warn(error, res);
     });
 });