Tag login email field as email type

ui/src/router/views/initialize.vue

@@ -21,27 +21,13 @@ export default {
         email: '',
         password: '',
         distanceUnit: 1,
-        currency: '',
+        currency: 'INR',
       },
     }
   },
   computed: {
     ...mapGetters('auth', ['isInitialized']),
     ...mapState('vehicles', ['currencyMasters', 'distanceUnitMasters']),
-    filteredCurrencyMasters() {
-      return this.currencyMasters.filter((option) => {
-        return (
-          option.namePlural
-            .toString()
-            .toLowerCase()
-            .indexOf(this.registerModel.currency.toLowerCase()) >= 0 ||
-          option.code
-            .toString()
-            .toLowerCase()
-            .indexOf(this.registerModel.currency.toLowerCase()) >= 0
-        )
-      })
-    },
   },
   mounted() {
     store.dispatch('vehicles/fetchMasters').then((data) => {})
@@ -153,9 +139,6 @@ export default {
         })
         .finally(() => (this.isWorking = false))
     },
-    formatCurrency(option) {
-      return `${option.namePlural} (${option.code})`
-    },
   },
 }
 </script>
@@ -165,10 +148,15 @@ export default {
     <div v-if="!migrationMode" class="box">
       <h1 class="title">Migrate from Clarkson</h1>
       <p>
-        If you have an existing Clarkson deployment and you want to migrate your data from that, press the following button.
+        If you have an existing Clarkson deployment and you want to migrate your data from that,
+        press the following button.
       </p>
       <br />
-      <b-field> <b-button type="is-primary" @click="migrationMode = 'clarkson'">Migrate from Clarkson</b-button></b-field>
+      <b-field>
+        <b-button type="is-primary" @click="migrationMode = 'clarkson'"
+          >Migrate from Clarkson</b-button
+        ></b-field
+      >
     </div>
     <div v-if="!migrationMode" class="box">
       <h1 class="title">Fresh Install</h1>
@@ -182,12 +170,21 @@ export default {
     </div>
     <div v-if="migrationMode === 'clarkson'" class="box content">
       <h1 class="title">Migrate from Clarkson</h1>
-      <p>You need to make sure that this deployment of Hammond can access the MySQL database used by Clarkson.</p>
-      <p>If that is not directly possible, you can make a copy of that database somewhere accessible from this instance.</p>
-      <p>Once that is done, enter the connection string to the MySQL instance in the following format.</p>
       <p
-        >All the users imported from Clarkson will have their username as their email in Clarkson database and pasword set to
+        >You need to make sure that this deployment of Hammond can access the MySQL database used by
-        <span class="" style="font-weight:bold">hammond</span></p
+        Clarkson.</p
+      >
+      <p
+        >If that is not directly possible, you can make a copy of that database somewhere accessible
+        from this instance.</p
+      >
+      <p
+        >Once that is done, enter the connection string to the MySQL instance in the following
+        format.</p
+      >
+      <p
+        >All the users imported from Clarkson will have their username as their email in Clarkson
+        database and pasword set to <span class="" style="font-weight:bold">hammond</span></p
       >
       <code>
         user:pass@tcp(127.0.0.1:3306)/dbname?charset=utf8mb4&parseTime=True&loc=Local
@@ -203,8 +200,15 @@ export default {
       </b-field>
 
       <div class="buttons">
-        <b-button v-if="!testSuccess" type="is-primary" :disabled="isWorking" @click="testConnection">Test Connection</b-button
+        <b-button
-        ><b-button v-if="testSuccess" type="is-success" :disabled="isWorking" @click="migrate">Migrate</b-button>
+          v-if="!testSuccess"
+          type="is-primary"
+          :disabled="isWorking"
+          @click="testConnection"
+          >Test Connection</b-button
+        ><b-button v-if="testSuccess" type="is-success" :disabled="isWorking" @click="migrate"
+          >Migrate</b-button
+        >
         <b-button type="is-danger is-light" @click="resetMigrationMode">Cancel</b-button>
       </div>
     </div>
@@ -218,22 +222,28 @@ export default {
           <b-input v-model="registerModel.email" type="email" required></b-input>
         </b-field>
         <b-field label="Your Password">
-          <b-input v-model="registerModel.password" type="password" required minlength="8" password-reveal></b-input>
+          <b-input
+            v-model="registerModel.password"
+            type="password"
+            required
+            minlength="8"
+            password-reveal
+          ></b-input>
         </b-field>
         <b-field label="Currency">
-          <b-autocomplete
+          <b-select v-model="registerModel.currency" placeholder="Currency" required expanded>
-            v-model="registerModel.currency"
+            <option v-for="option in currencyMasters" :key="option.code" :value="option.code">
-            :custom-formatter="formatCurrency"
+              {{ `${option.namePlural} (${option.code})` }}
-            placeholder="Currency"
+            </option>
-            :data="filteredCurrencyMasters"
+          </b-select>
-            :keep-first="true"
-            :open-on-focus="true"
-            required
-            @select="(option) => (selected = option)"
-          ></b-autocomplete>
         </b-field>
         <b-field label="Distance Unit">
-          <b-select v-model.number="registerModel.distanceUnit" placeholder="Distance Unit" required expanded>
+          <b-select
+            v-model.number="registerModel.distanceUnit"
+            placeholder="Distance Unit"
+            required
+            expanded
+          >
             <option v-for="(option, key) in distanceUnitMasters" :key="key" :value="key">
               {{ `${option.long} (${option.short})` }}
             </option>

ui/src/router/views/login.vue

@@ -16,7 +16,7 @@ export default {
       password: '',
       authError: null,
       tryingToLogIn: false,
-      errorMessage:''
+      errorMessage: '',
     }
   },
   computed: {
@@ -38,7 +38,7 @@ export default {
     // and password they provided.
     tryToLogIn() {
       this.tryingToLogIn = true
-      this.errorMessage='';
+      this.errorMessage = ''
       // Reset the authError if it existed.
       this.authError = null
       return this.logIn({
@@ -53,9 +53,9 @@ export default {
           // Redirect to the originally requested page, or to the home page
         })
         .catch((error) => {
-         if(error.response.data?.errors?.login){
+          if (error.response.data?.errors?.login) {
-           this.errorMessage=error.response.data.errors.login
+            this.errorMessage = error.response.data.errors.login
-         }
+          }
           this.tryingToLogIn = false
           this.authError = error
         })
@@ -67,21 +67,9 @@ export default {
 <template>
   <Layout>
     <form @submit.prevent="tryToLogIn">
-      <b-field label="Email">
+      <b-field label="Email"> <b-input v-model="username" tag="b-input" name="username" type="email" :placeholder="placeholders.username"/></b-field>
-        <b-input
-          v-model="username"
-          tag="b-input"
-          name="username"
-          :placeholder="placeholders.username"
-      /></b-field>
       <b-field label="Password">
-        <b-input
+        <b-input v-model="password" tag="b-input" name="password" type="password" :placeholder="placeholders.password" />
-          v-model="password"
-          tag="b-input"
-          name="password"
-          type="password"
-          :placeholder="placeholders.password"
-        />
       </b-field>
       <b-button tag="input" native-type="submit" :disabled="tryingToLogIn" type="is-primary">
         <BaseIcon v-if="tryingToLogIn" name="sync" spin />
@@ -89,9 +77,7 @@ export default {
           Log in
         </span>
       </b-button>
-      <p v-if="authError">
+      <p v-if="authError"> There was an error logging in to your account. {{ errorMessage }} </p>
-        There was an error logging in to your account. {{errorMessage}}
-      </p>
     </form>
   </Layout>
 </template>

ui/src/router/views/settings.vue

@@ -44,20 +44,6 @@ export default {
 
       return this.changePassModel.new === this.changePassModel.renew
     },
-    filteredCurrencyMasters() {
-      return this.currencyMasters.filter((option) => {
-        return (
-          option.namePlural
-            .toString()
-            .toLowerCase()
-            .indexOf(this.settingsModel.currency.toLowerCase()) >= 0 ||
-          option.code
-            .toString()
-            .toLowerCase()
-            .indexOf(this.settingsModel.currency.toLowerCase()) >= 0
-        )
-      })
-    },
   },
   methods: {
     changePassword() {
@@ -123,9 +109,6 @@ export default {
           this.tryingToSave = false
         })
     },
-    formatCurrency(option) {
-      return `${option.namePlural} (${option.code})`
-    },
   },
 }
 </script>
@@ -140,16 +123,11 @@ export default {
             These will be used as default values whenever you create a new fillup or expense.
           </h1>
           <b-field label="Currency">
-            <b-autocomplete
+            <b-select v-model="settingsModel.currency" placeholder="Currency" required expanded>
-              v-model="settingsModel.currency"
+              <option v-for="option in currencyMasters" :key="option.code" :value="option.code">
-              :custom-formatter="formatCurrency"
+                {{ `${option.namePlural} (${option.code})` }}
-              placeholder="Currency"
+              </option>
-              :data="filteredCurrencyMasters"
+            </b-select>
-              :keep-first="true"
-              :open-on-focus="true"
-              required
-              @select="(option) => (selected = option)"
-            ></b-autocomplete>
           </b-field>
           <b-field label="Distance Unit">
             <b-select v-model.number="settingsModel.distanceUnit" placeholder="Distance Unit" required expanded>