update translations and UI elements for improved user experience

Author: technologiespro

package.json

@@ -1,6 +1,6 @@
 {
   "name": "smart2fa",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "private": true,
   "description": "Alternative open source software for 2fa authorization",
   "author": "technolog <technolog@smartholdem.io>",
@@ -59,7 +59,7 @@
     "@vue/cli-plugin-vuex": "~4.5.13",
     "@vue/cli-service": "~4.5.13",
     "babel-eslint": "^10.1.0",
-    "electron": "13.0.0",
+    "electron": "31.0.0-beta.1",
     "electron-devtools-installer": "^3.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",

public/style.css

@@ -1,3 +1,7 @@
+#app {
+    margin: auto;
+    max-width: 640px;
+}
 
 -moz-scrollbar, ::-webkit-scrollbar {
     width: 7px;
@@ -32,3 +36,4 @@ body, html {
     /* Non-prefixed version, currently
                                      supported by Chrome, Opera and Firefox */
 }
+

src/locales/en.json

@@ -21,6 +21,7 @@
   "keys_added": "Keys added",
   "token_add_info_input": "This feature is for adding a new access token from a new site or application. Enter the proposed secret code, get an access token and confirm it on the added site.",
   "token_add_info_qr": "This feature is for adding a new access token from a new site or application. Scan the proposed QR code, get an access token and confirm it on the added site.",
-  "google_migrate_info": "This feature is designed to quickly import access tokens from the Google Authenticator app. In the Google Authenticator app, click in the settings to transfer accounts - export accounts. Scan the Google Authenticator QR codes to transfer to Smart2FA."
-
+  "google_migrate_info": "This feature is designed to quickly import access tokens from the Google Authenticator app. In the Google Authenticator app, click in the settings to transfer accounts - export accounts. Scan the Google Authenticator QR codes to transfer to Smart2FA.",
+  "unlock": "Unlock",
+  "remove": "Remove all"
 }

src/locales/ru.json

@@ -21,5 +21,7 @@
   "keys_added": "Добавлены ключи",
   "token_add_info_input": "Эта функция предназначена для добавления нового токена доступа с нового сайта или приложения. Введите предложенный секретный-код, получите токен-доступа и подтвердите его на добавляемом сайте.",
   "token_add_info_qr": "Эта функция предназначена для добавления нового токена доступа с нового сайта или приложения. Отсканируйте предложенный QR-код, получите токен-доступа и подтвердите его на добавляемом сайте.",
-  "google_migrate_info": "Данная функция предназначена для быстрого импорта токенов доступа из приложения Google Authenticator. В приложении Google Authenticator нажмите в настройках перенести аккаунты  - экспорт аккаунтов. Отсканируйте QR-коды Google Authenticator, для переноса в Smart2FA. Если у вас нет камеры, выберите графический файл с QR-кодом."
+  "google_migrate_info": "Данная функция предназначена для быстрого импорта токенов доступа из приложения Google Authenticator. В приложении Google Authenticator нажмите в настройках перенести аккаунты  - экспорт аккаунтов. Отсканируйте QR-коды Google Authenticator, для переноса в Smart2FA. Если у вас нет камеры, выберите графический файл с QR-кодом.",
+  "unlock": "Вход",
+  "remove": "Удалить всё"
 }

src/views/Home.vue

@@ -2,7 +2,7 @@
   <div class="w-100">
     <b-navbar toggleable="lg" type="dark" variant="info" :sticky="true" fixed="top"
               style="position: fixed;background: linear-gradient(-45deg, #146eb9 1%, #146eb9 48%, #146eb9);">
-      <b-navbar-brand><img width="24px" src="images/logo48.png"/> <span class="small mr-1">SMART 2FA</span>
+      <b-navbar-brand><img width="24px" src="images/logo48.png" alt="logo"/> <span class="small mr-1">SMART 2FA</span>
         <span class="badge badge-success"
               style="border: solid 1px rgba(35,59,93,0.76);" v-html="(seconds < 10 ? '0' + seconds : seconds)">
         </span>
@@ -14,7 +14,8 @@
           <b-nav-item @click="op = 'importKeys'; ddShow = false">
             <span class="text-white">{{ $t('import_from_google') }}</span>
           </b-nav-item>
-          <b-nav-item v-show="isElectron" v-b-modal.modal-save-file>
+          <!-- v-show="isElectron"  -->
+          <b-nav-item v-b-modal.modal-save-file>
             <span class="text-white">{{ $t('save_to_file') }}</span>
           </b-nav-item>
         </b-navbar-nav>
@@ -30,11 +31,16 @@
     </b-navbar>
 
 
+    <div v-if="op!=='home'" style="position: relative; max-width: 800px; height: 100vh; background: rgba(0,0,0,0.5); z-index: 200000;">
+      <div class="text-center text-white" style="margin-top: 20px;">
+        <b-spinner variant="primary" label="Loading..."></b-spinner>
+      </div>
+
     <div v-if="op === 'importKeys'"
          style="backdrop-filter: blur(4px); background: rgba(43,68,87,0.63); width: 100%; height: 100vh; position: absolute; top:0; padding: 4% !important; margin: 0 !important; z-index: 200000;">
       <QrScanImport2fa
           style="margin-left: auto; margin-right: auto; width:250px; height:250px; border: solid 2px #333;margin-top: 50px;"/>
-      <div style="margin-left: auto; margin-right: auto;width:25px;margin-bottom: 5px; margin-top: 25px;">
+      <div style="width:25px;margin: 25px auto 5px;">
         <b-button @click="op = 'home'" :pill="true" variant="success">X</b-button>
       </div>
       <p class="text-white">{{ $t('google_migrate_info') }}</p>
@@ -82,6 +88,9 @@
 
     </div>
 
+    </div>
+
+
     <div class="row">
       <div class="container" style="margin-top:55px;padding-bottom: 48px;position: relative;">
         <div class="w-100" style="background: rgb(193 51 162);position: fixed; margin-top: 0px">
@@ -119,7 +128,7 @@
 
     </div>
 
-    <img @click="ddShow = !ddShow" class="btnBotAdd" src="images/add.png"/>
+    <img @click="ddShow = !ddShow" class="btnBotAdd" src="images/add.png" alt="add"/>
     <div v-show="ddShow"
          style="border-radius: 6px 6px 0 6px; position: absolute; bottom: 56px;right: 15px; background: linear-gradient(-45deg, #4eabf7 1%, #4eabf7 48%, #4eabf7);">
       <b-nav vertical class="w-100">

src/views/Unlock.vue

@@ -27,10 +27,10 @@
 
             <div class="row">
               <div class="col-6">
-                <b-button :disabled="!isValid" type="submit" variant="primary" class="w-100 text-uppercase">Unlock</b-button>
+                <b-button :disabled="!isValid" type="submit" variant="primary" class="w-100 text-uppercase">{{$t('unlock')}}</b-button>
               </div>
               <div class="col-6">
-                <b-button @click="show = false" variant="danger" class="w-100 text-uppercase">Reset All data?</b-button>
+                <b-button @click="show = false" variant="danger" class="w-100 text-uppercase">{{$t('remove')}}</b-button>
               </div>
             </div>