fix: using NeCheckbox instead of input and improved network error message (#758)

Author: andre8244

src/components/controller/ControllerAppLogin.vue

@@ -8,6 +8,7 @@ import {
   getAxiosErrorMessage,
   getStringFromStorage,
   NeButton,
+  NeCheckbox,
   NeHeading,
   NeInlineNotification,
   NeLink,
@@ -215,18 +216,7 @@ function isFormInvalid() {
             />
             <div class="flex items-center justify-between">
               <div class="flex items-center">
-                <input
-                  id="remember-me"
-                  v-model="rememberMe"
-                  name="remember-me"
-                  type="checkbox"
-                  class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600 dark:border-gray-700 dark:text-primary-600 dark:focus:ring-primary-400"
-                />
-                <label
-                  for="remember-me"
-                  class="ml-3 block text-sm leading-6 text-gray-900 dark:text-gray-100"
-                  >{{ t('login.remember_me') }}</label
-                >
+                <NeCheckbox id="remember-me" v-model="rememberMe" :label="t('login.remember_me')" />
               </div>
 
               <div class="text-sm leading-6">

src/components/standalone/StandaloneAppLogin.vue

@@ -14,7 +14,8 @@ import {
   getAxiosErrorMessage,
   deleteFromStorage,
   getStringFromStorage,
-  saveToStorage
+  saveToStorage,
+  NeCheckbox
 } from '@nethesis/vue-components'
 import { useLoginStore } from '@/stores/standalone/standaloneLogin'
 import { onMounted, ref, watch } from 'vue'
@@ -261,18 +262,11 @@ async function verifyOtp() {
               />
               <div class="flex items-center justify-between">
                 <div class="flex items-center">
-                  <input
+                  <NeCheckbox
                     id="remember-me"
                     v-model="rememberMe"
-                    name="remember-me"
-                    type="checkbox"
-                    class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600 dark:border-gray-700 dark:text-primary-600 dark:focus:ring-primary-400"
+                    :label="t('login.remember_me')"
                   />
-                  <label
-                    for="remember-me"
-                    class="ml-3 block text-sm leading-6 text-gray-900 dark:text-gray-100"
-                    >{{ t('login.remember_me') }}</label
-                  >
                 </div>
                 <div class="text-sm leading-6">
                   <NeLink

src/i18n/en.json

@@ -75,7 +75,7 @@
   },
   "error": {
     "generic_error": "Something went wrong",
-    "network_error": "Network error",
+    "network_error": "Network error. Check your connection and reload the page.",
     "network_timeout": "Network timeout",
     "http_401": "Authentication error",
     "http_403": "Authorization error",