Replace lodash-checkit usage with vuelidate (#2990)

* Remove lodash-checkit package from client * Replace lodash-checkit with vuelidate
usdigitalresponse · Apr 26, 2024 · ac02a72 · ac02a72
1 parent 14c2cd0
commit ac02a72
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 73 deletions.
diff --git a/packages/client/package.json b/packages/client/package.json
@@ -26,7 +26,6 @@
     "core-js": "^3.21.1",
     "jquery": "3.6.0",
     "lodash": "^4.17.21",
-    "lodash-checkit": "^2.3.3",
     "luxon": "^3.4.3",
     "moment": "^2.29.2",
     "numeral": "^2.0.6",

diff --git a/packages/client/src/arpa_reporter/views/LoginView.vue b/packages/client/src/arpa_reporter/views/LoginView.vue
@@ -23,54 +23,62 @@
       </div>
     </form>
     <div
-      v-if="message"
-      :class="messageClass"
+      v-if="serverResponse"
+      :class="{
+        'alert alert-success': serverResponse.success,
+        'alert alert-danger': !serverResponse.success,
+      }"
     >
-      {{ message }}
+      {{ serverResponse.message }}
+    </div>
+    <div
+      v-for="error of v$.$errors"
+      :key="error.$uid"
+      class="alert alert-danger"
+    >
+      {{ error.$message }}
     </div>
   </div>
 </template>
 
 <script>
-import _ from 'lodash-checkit';
 import { apiURL } from '@/helpers/fetchApi';
+import { useVuelidate } from '@vuelidate/core';
+import { required, email, helpers } from '@vuelidate/validators';
 
 export default {
   name: 'LoginView',
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
-    const message = _.get(this, '$route.query.message', null);
-    const messageClass = message ? 'alert alert-danger' : '';
+    const serverResponse = this.$route.query.message && {
+      message: this.$route.query.message,
+      success: false, // If message is present in the URL, it's because of an error (e.g., invalid token)
+    };
     return {
       email: '',
-      message,
-      messageClass,
+      serverResponse,
     };
   },
+  validations: {
+    email: {
+      required: helpers.withMessage('Please enter an email address', required),
+      email: helpers.withMessage('Please enter a valid email address', email),
+    },
+  },
   methods: {
-    login(event) {
+    async login(event) {
       event.preventDefault();
-      if (!this.email) {
-        this.message = 'Email cannot be blank';
-        this.messageClass = 'alert alert-danger';
+      this.serverResponse = null;
+      if (!(await this.v$.$validate())) {
         return;
       }
-      if (!_.isEmail(this.email)) {
-        this.message = `'${this.email}' is not a valid email address`;
-        this.messageClass = 'alert alert-danger';
-        return;
-      }
-
-      const redirectTo = (
-        // If we got to the login page via a redirect, a post-login redirect URL will already be specified
-        this.$route.query.redirect_to
-        // If we went to the login page directly, we default to redirecting to the homepage.
-        // This gets a full relative URL including any VueRouter base prefix, if configured (such as in GOST)
-        || this.$router.resolve('/').href
-      );
+      this.v$.$reset();
 
       const body = JSON.stringify({
         email: this.email,
-        redirect_to: redirectTo,
+        redirect_to: this.$route.query.redirect_to || this.$router.resolve('/').href,
       });
       const headers = {
         'Content-Type': 'application/json',
@@ -82,16 +90,18 @@ export default {
         })
         .then((r) => r.json())
         .then((r) => {
-          this.email = '';
-          this.message = r.message;
-          this.messageClass = r.success
-            ? 'alert alert-success'
-            : 'alert alert-danger';
+          this.serverResponse = {
+            message: r.message,
+            success: r.success,
+          };
         })
         .catch((error) => {
           console.log('error:', error.message);
-          this.message = error.message;
-          this.messageClass = 'alert alert-danger';
+          this.serverResponse = {
+            message: error.message
+              || 'There was a problem at USDR. Try again in a minute or two, and if you still receive the same error, contact the USDR team.',
+            success: false,
+          };
         });
     },
   },

diff --git a/packages/client/src/views/LoginView.vue b/packages/client/src/views/LoginView.vue
@@ -45,11 +45,21 @@
         </div>
       </form>
       <div
-        v-if="message"
-        :class="messageClass"
+        v-if="serverResponse"
         class="mt-3"
+        :class="{
+          'alert alert-success': serverResponse.success,
+          'alert alert-danger': !serverResponse.success,
+        }"
       >
-        {{ message }}
+        {{ serverResponse.message }}
+      </div>
+      <div
+        v-for="error of v$.$errors"
+        :key="error.$uid"
+        class="mt-3 alert alert-danger"
+      >
+        {{ error.$message }}
       </div>
       <hr class="my-4">
       <p>
@@ -68,64 +78,64 @@
 <script>
 /* eslint-disable import/no-unresolved */
 import { apiURL } from '@/helpers/fetchApi';
-import _ from 'lodash-checkit';
+import { useVuelidate } from '@vuelidate/core';
+import { required, email, helpers } from '@vuelidate/validators';
 
 export default {
   name: 'LoginView',
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
-    const message = _.get(this, '$route.query.message', null);
-    const messageClass = message ? 'alert alert-danger' : '';
-    const redirectTo = _.get(this, '$route.query.redirect_to', null);
+    const serverResponse = this.$route.query.message && {
+      message: this.$route.query.message,
+      success: false, // If message is present in the URL, it's because of an error (e.g., invalid token)
+    };
     return {
       email: '',
-      message,
-      messageClass,
-      redirectTo,
+      serverResponse,
     };
   },
+  validations: {
+    email: {
+      required: helpers.withMessage('Please enter an email address', required),
+      email: helpers.withMessage('Please enter a valid email address', email),
+    },
+  },
   methods: {
-    login(e) {
-      e.preventDefault();
-      if (!this.email) {
-        this.message = 'Email cannot be blank';
-        this.messageClass = 'alert alert-danger';
-        return;
-      }
-      if (!_.isEmail(this.email)) {
-        this.message = `'${this.email}' is not a valid email address`;
-        this.messageClass = 'alert alert-danger';
+    async login(event) {
+      event.preventDefault();
+      this.serverResponse = null;
+      if (!(await this.v$.$validate())) {
         return;
       }
+      this.v$.$reset();
 
-      const bodyRaw = { email: this.email };
-      if (this.redirectTo) {
-        bodyRaw.redirect_to = this.redirectTo;
-      }
-
-      const body = JSON.stringify(bodyRaw);
+      const body = JSON.stringify({
+        email: this.email,
+        redirect_to: this.$route.query.redirect_to || this.$router.resolve('/').href,
+      });
       const headers = {
         'Content-Type': 'application/json',
       };
-      let resStatus = 0;
       fetch(apiURL('/api/sessions'), { method: 'POST', headers, body })
         .then((r) => {
-          resStatus = r.status;
           if (!r.ok) throw new Error(`login: ${r.statusText} (${r.status})`);
           return r;
         })
         .then((r) => r.json())
         .then((r) => {
-          this.email = '';
-          this.message = r.message;
-          this.messageClass = r.success
-            ? 'alert alert-success'
-            : 'alert alert-danger';
+          this.serverResponse = {
+            message: r.message,
+            success: r.success,
+          };
         })
-        .catch((err) => {
-          this.message = resStatus === 500
-            ? 'There was a problem at USDR. Try again in a minute or two, and if you still receive the same error, contact the USDR team.'
-            : err.message;
-          this.messageClass = 'alert alert-danger';
+        .catch((error) => {
+          this.serverResponse = {
+            message: error.message
+              || 'There was a problem at USDR. Try again in a minute or two, and if you still receive the same error, contact the USDR team.',
+            success: false,
+          };
         });
     },
   },

diff --git a/yarn.lock b/yarn.lock
@@ -10722,7 +10722,7 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
-lodash-checkit@^2.3.3, lodash-checkit@^2.4.1:
+lodash-checkit@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/lodash-checkit/-/lodash-checkit-2.4.1.tgz#8b09c6b359a5d4de86f752ff9c231f1db5d23fd4"
   integrity sha512-OAg5CqY04/dnsO8izxXqlleuj7z/dOk6yV0pm0TVtRaUwG5v2PGw4XWSIG/dLK0UWYk7g0/TCk8OCf50oVwv6w==