Merge pull request #541 from Peergos/feat/i18n-groundwork

Enable translations
Peergos · Feb 26, 2024 · 0c2eb5c · 0c2eb5c
2 parents 21e6f9c + 3975c7b
commit 0c2eb5c
Show file tree

Hide file tree

Showing 35 changed files with 1,097 additions and 598 deletions.
diff --git a/.github/workflows/browser_tests.yml b/.github/workflows/browser_tests.yml
@@ -11,7 +11,7 @@ jobs:
       uses: actions/setup-java@v3
       with:
         distribution: temurin
-        java-version: 11
+        java-version: 17
     - uses: actions/setup-python@v2
       with:
         python-version: '3.11.0'

diff --git a/JPack.jar b/JPack.jar
diff --git a/src/components/App.vue b/src/components/App.vue
@@ -24,10 +24,10 @@
 				    <i>permanent</i> account, please go 
 				    <a class="line" href="https://peergos.net?signup=true">here</a>.
 			        </p>
-                                <AppTab title="Login">
+                                <AppTab :title="translate('APP.LOGIN')">
 					<Login @initApp="init()" />
 				</AppTab>
-				<AppTab title="Signup">
+				<AppTab :title="translate('APP.SIGNUP')">
 					<Signup :token="token" />
 				</AppTab>
 			</AppTabs>
@@ -86,6 +86,7 @@ const ServerMessages = require("./ServerMessages.vue");
 const routerMixins = require("../mixins/router/index.js");
 const launcherMixin = require("../mixins/launcher/index.js");
 const sandboxAppMixins = require("../mixins/sandbox/index.js");
+const i18n = require("../i18n/index.js");
 
 module.exports = {
 	components: {
@@ -150,7 +151,7 @@ module.exports = {
             }
 	},
 
-	mixins: [routerMixins, sandboxAppMixins, launcherMixin],
+	mixins: [routerMixins, sandboxAppMixins, launcherMixin, i18n],
 
 	watch: {
 	    network(newNetwork) {

diff --git a/src/components/Login.vue b/src/components/Login.vue
@@ -5,7 +5,7 @@
 			autofocus
 			name="username"
 			v-model="username"
-			placeholder="Username"
+			:placeholder="translate('LOGIN.USERNAME')"
 			ref="username"
 			@input="(val) => (username = username.toLowerCase())"
 		/>
@@ -17,10 +17,10 @@
                 :consumer_cancel_func="consumer_cancel_func"
                 :consumer_func="consumer_func">
         </MultiFactorAuth>
-		<FormPassword v-model="password" placeholder="password" @keyup.native.enter="login()"/>
+		<FormPassword v-model="password" :placeholder="translate('LOGIN.PASSWORD')" @keyup.native.enter="login()"/>
 
         <label class="checkbox__group">
-            Stay logged in
+            {{ translate('LOGIN.STAY') }}
             <input
                 type="checkbox"
                 name="stayLoggedIn"
@@ -30,7 +30,7 @@
         </label>
 
 		<AppButton :disabled="isLoggingIn" class="login" @click.native="login()" type="primary" block accent  icon="arrow-right">
-			Sign in
+			{{ translate('LOGIN.BUTTON') }}
 		</AppButton>
 	</div>
 </template>
@@ -41,6 +41,7 @@ const FormPassword = require("./form/FormPassword.vue");
 const MultiFactorAuth = require("./auth/MultiFactorAuth.vue");
 const routerMixins = require("../mixins/router/index.js");
 const UriDecoder = require('../mixins/uridecoder/index.js');
+const i18n = require("../i18n/index.js");
 
 module.exports = {
 	components: {
@@ -69,7 +70,7 @@ module.exports = {
 			'isSecretLink',
 		]),
 	},
-	mixins:[routerMixins, UriDecoder],
+	mixins:[routerMixins, UriDecoder, i18n],
 
 	mounted() {
 		this.$refs.username.focus()

diff --git a/src/components/Search.vue b/src/components/Search.vue
@@ -4,7 +4,7 @@
     <div class="modal-container search full-height" @click.stop style="overflow-y:auto">
       <span @click="close" tabindex="0" v-on:keyup.enter="close" aria-label="close" class="close">&times;</span>
         <div class="modal-header">
-            <h2>Search: {{ path }}</h2>
+            <h2>{{ translate("SEARCH.SEARCH") }}: {{ path }}</h2>
         </div>
         <div class="modal-body">
             <div v-bind:class="errorClass">
@@ -14,15 +14,15 @@
                 <div class="flex-container">
                     <div class="flex-item search" style="margin: 10px; border-width: 1px; border-style: solid;">
                         <select v-model="selectedSearchType">
-                            <option value="contains">Filename contains</option>
-                            <option value="textContents">Text file contains</option>
-                            <option value="modifiedAfter">File modified after</option>
-                            <option value="modifiedBefore">File modified before</option>
-                            <option value="createdAfter">File created after</option>
-                            <option value="createdBefore">File created before</option>
-                            <option value="fileSizeGreaterThan">File size greater than</option>
-                            <option value="fileSizeLessThan">File size less than</option>
-                            <option value="mimeType">File type</option>
+                            <option value="contains">{{ translate("SEARCH.NAME.CONTAINS") }}</option>
+                            <option value="textContents">{{ translate("SEARCH.TEXT.CONTAINS") }}</option>
+                            <option value="modifiedAfter">{{ translate("SEARCH.MODIFIED.AFTER") }}</option>
+                            <option value="modifiedBefore">{{ translate("SEARCH.MODIFIED.BEFORE") }}</option>
+                            <option value="createdAfter">{{ translate("SEARCH.CREATED.AFTER") }}</option>
+                            <option value="createdBefore">{{ translate("SEARCH.CREATED.BEFORE") }}</option>
+                            <option value="fileSizeGreaterThan">{{ translate("SEARCH.SIZE.GREATER") }}</option>
+                            <option value="fileSizeLessThan">{{ translate("SEARCH.SIZE.LESS") }}</option>
+                            <option value="mimeType">{{ translate("SEARCH.TYPE") }}</option>
                         </select>
                     </div>
                     <div class="flex-item" v-if="selectedSearchType=='modifiedAfter' || selectedSearchType=='modifiedBefore' || selectedSearchType=='createdAfter' || selectedSearchType=='createdBefore'" style="margin: 10px;">
@@ -43,33 +43,33 @@
                     </div>
                     <div class="flex-item" v-if="selectedSearchType=='mimeType'" style="margin: 10px;">
                         <select v-model="selectedMimeType">
-                            <option value="audio">Audio</option>
-                            <option value="image">Image</option>
+                            <option value="audio">{{ translate("SEARCH.AUDIO") }}</option>
+                            <option value="image">{{ translate("SEARCH.IMAGE") }}</option>
                             <option value="application/pdf">PDF</option>
-                            <option value="text/plain">Text</option>
-                            <option value="video">Video</option>
+                            <option value="text/plain">{{ translate("SEARCH.TEXT") }}</option>
+                            <option value="video">{{ translate("SEARCH.VIDEO") }}</option>
                         </select>
                     </div>
                     <div class="flex-item" style="margin: 10px;">
-                        <button id='submit-search' class="btn btn-success" @click="search()">Search</button>
+                        <button id='submit-search' class="btn btn-success" @click="search()">{{ translate("SEARCH.SEARCH") }}</button>
                     </div>
                 </div>
             </div>
 
             <div>
-                <h3>Results: {{ matches.length }}</h3>
+                <h3>{{ translate("SEARCH.RESULTS") }}: {{ matches.length }}</h3>
                 <div v-if="showCancel" style="margin: 10px;">
                     <button class="btn btn-danger" @click="stopSearch()">Cancel Search</button>
                 </div>
                 <div v-if="matches!=0" class="table-responsive">
                     <table class="table">
                         <thead>
                         <tr  v-if="matches!=0" style="cursor:pointer;">
-                            <th @click="setSortBy('name')">Name <span v-if="sortBy=='name'" v-bind:class="['fas', normalSortOrder ? 'fa-angle-down' : 'fa-angle-up']"/></th>
-                            <th @click="setSortBy('path')">Directory <span v-if="sortBy=='path'" v-bind:class="['fas', normalSortOrder ? 'fa-angle-down' : 'fa-angle-up']"/></th>
-                            <th @click="setSortBy('size')">Size <span v-if="sortBy=='size'" v-bind:class="['fas', normalSortOrder ? 'fa-angle-down' : 'fa-angle-up']"/></th>
-                            <th @click="setSortBy('modified')">Modified <span v-if="sortBy=='modified'" v-bind:class="['fas', normalSortOrder ? 'fa-angle-down' : 'fa-angle-up']"/></th>
-                            <th @click="setSortBy('created')">Created <span v-if="sortBy=='created'" v-bind:class="['fas', normalSortOrder ? 'fa-angle-down' : 'fa-angle-up']"/></th>
+                            <th @click="setSortBy('name')">{{ translate("DRIVE.NAME") }}<span v-if="sortBy=='name'" v-bind:class="['fas', normalSortOrder ? 'fa-angle-down' : 'fa-angle-up']"/></th>
+                            <th @click="setSortBy('path')">{{ translate("SEARCH.DIR") }}<span v-if="sortBy=='path'" v-bind:class="['fas', normalSortOrder ? 'fa-angle-down' : 'fa-angle-up']"/></th>
+                            <th @click="setSortBy('size')">{{ translate("DRIVE.SIZE") }}<span v-if="sortBy=='size'" v-bind:class="['fas', normalSortOrder ? 'fa-angle-down' : 'fa-angle-up']"/></th>
+                            <th @click="setSortBy('modified')">{{ translate("DRIVE.MODIFIED") }} <span v-if="sortBy=='modified'" v-bind:class="['fas', normalSortOrder ? 'fa-angle-down' : 'fa-angle-up']"/></th>
+                            <th @click="setSortBy('created')">{{ translate("DRIVE.CREATED") }}<span v-if="sortBy=='created'" v-bind:class="['fas', normalSortOrder ? 'fa-angle-down' : 'fa-angle-up']"/></th>
 
                         </tr>
                         </thead>
@@ -103,11 +103,13 @@
 
 <script>
 const Spinner = require("./spinner/Spinner.vue");
+const i18n = require("../i18n/index.js");
 
 module.exports = {
 	components: {
 	    Spinner
 	},
+    mixins:[i18n],
     data: function() {
         return {
             searchContains: "",

diff --git a/src/components/Signup.vue b/src/components/Signup.vue
@@ -7,21 +7,20 @@
 				name="username"
 				v-model="username"
 				ref="username"
-				placeholder="Public username"
+				:placeholder="translate('SIGNUP.USERNAME')"
 				@input="(val) => (username = username.toLowerCase())"
 			/>
 
 			<AppButton class="generate-password" type="primary" block accent @click.native="generatePassword()">
-				Generate password
+				{{ translate("SIGNUP.GENERATE") }}
 			</AppButton>
 
-			<FormPassword v-model="password" :passwordIsVisible="showPasswords" placeholder="Click generate password" firstOfTwo />
+			<FormPassword v-model="password" :passwordIsVisible="showPasswords" :placeholder="translate('SIGNUP.CLICKGEN')" firstOfTwo />
 
-			<FormPassword v-model="password2" :passwordIsVisible="showPasswords" placeholder="Re-enter password" @keyup.native.enter="signup()"/>
+			<FormPassword v-model="password2" :passwordIsVisible="showPasswords" :placeholder="translate('SIGNUP.REENTER')" @keyup.native.enter="signup()"/>
 
 			<label class="checkbox__group">
-				I understand that passwords cannot be reset or recovered - if I forget my password, then I will lose access to my
-				account and data. If I enter my password into a malicious website then I will lose control of my account.
+				{{ translate("SIGNUP.AGREE") }}
 				<input
 					type="checkbox"
 					name="safePassword"
@@ -31,7 +30,7 @@
 			</label>
 
 			<label class="checkbox__group">
-				I accept the <a href="/terms.html" target="_blank" rel="noopener noreferrer">Terms of Service</a> and <a href="/privacy.html" target="_blank" rel="noopener noreferrer">Privacy Policy</a>
+				{{ translate("SIGNUP.ACCEPT") }} <a href="/terms.html" target="_blank" rel="noopener noreferrer">{{ translate("SIGNUP.TERMS") }}</a> {{ translate("SIGNUP.AND") }} <a href="/privacy.html" target="_blank" rel="noopener noreferrer">{{ translate("SIGNUP.POLICY") }}</a>
 				<input
 					type="checkbox"
 					name="tosAccepted"
@@ -50,42 +49,42 @@
 			    <div class="card__meta options">
 				<h3>Pro Account</h3>
 				<ul>
-				    <li>100 GB of hyper secure storage</li>
-				    <li>All our bundled private applications</li>
-				    <li>&#x00A3;5 / month</li>
+				    <li>100 GB {{ translate("SIGNUP.HYPER") }}</li>
+				    <li>{{ translate("SIGNUP.BUNDLED") }}</li>
+				    <li>&#x00A3;5 / {{ translate("SIGNUP.MONTH") }}</li>
 				</ul>
                                 <AppButton @click.native="setPlan(100000000000)" type="primary" block accent>Select Pro</AppButton>
 			    </div>
                             <div class="card__meta options">
 				<h3>Visionary Account</h3>
 				<ul>
-				    <li>500 GB of hyper secure storage</li>
-				    <li>All our bundled private applications</li>
-				    <li>&#x00A3;10 / month</li>
+				    <li>500 GB {{ translate("SIGNUP.HYPER") }}</li>
+				    <li>{{ translate("SIGNUP.BUNDLED") }}</li>
+				    <li>&#x00A3;10 / {{ translate("SIGNUP.MONTH") }}</li>
 				</ul>
                                 <AppButton @click.native="setPlan(500000000000)" type="primary" block accent>Select Visionary</AppButton>
 			    </div>
                             <div class="card__meta options">
 				<h3>Pioneer Account</h3>
 				<ul>
-				    <li>2000 GB of hyper secure storage</li>
-				    <li>All our bundled private applications</li>
-				    <li>&#x00A3;25 / month</li>
+				    <li>2000 GB {{ translate("SIGNUP.HYPER") }}</li>
+				    <li>{{ translate("SIGNUP.BUNDLED") }}</li>
+				    <li>&#x00A3;25 / {{ translate("SIGNUP.MONTH") }}</li>
 				</ul>
                                 <AppButton @click.native="setPlan(2000000000000)" type="primary" block accent>Select Pioneer</AppButton>
 			    </div>
                             <div class="card__meta options">
 				<h3>Trailblazer Account</h3>
 				<ul>
-				    <li>4000 GB of hyper secure storage</li>
-				    <li>All our bundled private applications</li>
-				    <li>&#x00A3;40 / month</li>
+				    <li>4000 GB {{ translate("SIGNUP.HYPER") }}</li>
+				    <li>{{ translate("SIGNUP.BUNDLED") }}</li>
+				    <li>&#x00A3;40 / {{ translate("SIGNUP.MONTH") }}</li>
 				</ul>
                                 <AppButton @click.native="setPlan(4000000000000)" type="primary" block accent>Select Trailblazer</AppButton>
 			    </div>
                             <div class="card__meta options">
-				<h3>Want to try it first?</h3>
-				<label>Try it for free on our <u><a href="https://peergos-demo.net/?signup=true" target="_blank">demo server</a></u>.
+				<h3>{{ translate("SIGNUP.TRYTITLE") }}</h3>
+				<label>{{ translate("SIGNUP.TRY") }} <u><a href="https://peergos-demo.net/?signup=true" target="_blank">demo server</a></u>.
                                 </label>
 			    </div>
                         </div>
@@ -127,6 +126,7 @@ const BannedUsernames = require('../mixins/password/bannedUsernames.json');
 const FormPassword = require("./form/FormPassword.vue");
 const UriDecoder = require('../mixins/uridecoder/index.js');
 const sandboxMixin = require("../mixins/sandbox/index.js");
+const i18n = require("../i18n/index.js");
 const Continue = require("Continue.vue");
 module.exports = {
     components: {
@@ -135,7 +135,7 @@ module.exports = {
         Continue,
     },
 
-    mixins:[UriDecoder, sandboxMixin],
+    mixins:[UriDecoder, sandboxMixin, i18n],
 
     props: {
 	token: {
@@ -170,7 +170,7 @@ module.exports = {
 	    'network'
 	]),
         signupButtonText() {
-            return this.desiredQuota > 0 ? "Add payment card and sign up" : "Sign up";
+            return this.desiredQuota > 0 ? this.translate("SIGNUP.SIGNUPPAID") : this.translate("SIGNUP.SIGNUPFREE");
         },
     },
     mounted() {