feat: Support dark mode in login pages (#7420)

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
2023-06-30 19:19:52 -07:00
parent 022f4f899f
commit b57063a8b8
57 changed files with 1516 additions and 1483 deletions
--- a/app/javascript/v3/views/auth/password/Edit.vue
+++ b/app/javascript/v3/views/auth/password/Edit.vue
@@ -0,0 +1,132 @@
+<template>
+  <div
+    class="flex flex-col bg-woot-25 min-h-full w-full py-12 sm:px-6 lg:px-8 justify-center dark:bg-slate-900"
+  >
+    <form
+      class="sm:mx-auto sm:w-full sm:max-w-lg bg-white dark:bg-slate-800 p-11 shadow sm:shadow-lg sm:rounded-lg"
+      @submit.prevent="submitForm"
+    >
+      <h1
+        class="mb-1 text-left text-2xl font-medium tracking-tight text-slate-900 dark:text-white"
+      >
+        {{ $t('SET_NEW_PASSWORD.TITLE') }}
+      </h1>
+
+      <div class="column log-in-form space-y-5">
+        <form-input
+          v-model.trim="credentials.password"
+          class="mt-3"
+          name="password"
+          type="password"
+          :has-error="$v.credentials.password.$error"
+          :error-message="$t('SET_NEW_PASSWORD.PASSWORD.ERROR')"
+          :placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
+          @blur="$v.credentials.password.$touch"
+        />
+        <form-input
+          v-model.trim="credentials.confirmPassword"
+          class="mt-3"
+          name="confirm_password"
+          type="password"
+          :has-error="$v.credentials.confirmPassword.$error"
+          :error-message="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.ERROR')"
+          :placeholder="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.PLACEHOLDER')"
+          @blur="$v.credentials.confirmPassword.$touch"
+        />
+        <submit-button
+          :disabled="
+            $v.credentials.password.$invalid ||
+              $v.credentials.confirmPassword.$invalid ||
+              newPasswordAPI.showLoading
+          "
+          :button-text="$t('SET_NEW_PASSWORD.SUBMIT')"
+          :loading="newPasswordAPI.showLoading"
+        />
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+import { required, minLength } from 'vuelidate/lib/validators';
+import FormInput from '../../../components/Form/Input.vue';
+import SubmitButton from '../../../components/Button/SubmitButton.vue';
+import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
+import { setNewPassword } from '../../../api/auth';
+
+export default {
+  components: {
+    FormInput,
+    SubmitButton,
+  },
+  props: {
+    resetPasswordToken: { type: String, default: '' },
+    redirectUrl: { type: String, default: '' },
+    config: { type: String, default: '' },
+  },
+  data() {
+    return {
+      // We need to initialize the component with any
+      // properties that will be used in it
+      credentials: {
+        confirmPassword: '',
+        password: '',
+      },
+      newPasswordAPI: {
+        message: '',
+        showLoading: false,
+      },
+      error: '',
+    };
+  },
+  mounted() {
+    // If url opened without token
+    // redirect to login
+    if (!this.resetPasswordToken) {
+      window.location = DEFAULT_REDIRECT_URL;
+    }
+  },
+  validations: {
+    credentials: {
+      password: {
+        required,
+        minLength: minLength(6),
+      },
+      confirmPassword: {
+        required,
+        minLength: minLength(6),
+        isEqPassword(value) {
+          if (value !== this.credentials.password) {
+            return false;
+          }
+          return true;
+        },
+      },
+    },
+  },
+  methods: {
+    showAlert(message) {
+      // Reset loading, current selected agent
+      this.newPasswordAPI.showLoading = false;
+      bus.$emit('newToastMessage', message);
+    },
+    submitForm() {
+      this.newPasswordAPI.showLoading = true;
+      const credentials = {
+        confirmPassword: this.credentials.confirmPassword,
+        password: this.credentials.password,
+        resetPasswordToken: this.resetPasswordToken,
+      };
+      setNewPassword(credentials)
+        .then(() => {
+          window.location = DEFAULT_REDIRECT_URL;
+        })
+        .catch(error => {
+          this.showAlert(
+            error?.message || this.$t('SET_NEW_PASSWORD.API.ERROR_MESSAGE')
+          );
+        });
+    },
+  },
+};
+</script>