Initial Smartproc

2023-05-27 07:03:08 +07:00
parent b3feeb7809
commit fc7a97585a
90 changed files with 89395 additions and 0 deletions
@@ -0,0 +1,143 @@
+<template>
+  <div class="wrapper">
+    <div class="content-wrapper">
+      <form class="login-form" @submit.prevent="onSubmit">
+    <dx-form :form-data="formData" :disabled="loading">
+      <dx-item
+        data-field="email"
+        editor-type="dxTextBox"
+        :editor-options="{ stylingMode: 'filled', placeholder: 'Email', mode: 'email' }"
+      >
+        <dx-required-rule message="Dibutuhkan alamat email" />
+        <dx-email-rule message="Alamat email tidak valid" />
+        <dx-label :visible="false" />
+      </dx-item>
+      <dx-item
+        data-field='password'
+        editor-type='dxTextBox'
+        :editor-options="{ stylingMode: 'filled', placeholder: 'Password', mode: 'password' }"
+      >
+        <dx-required-rule message="Password harus diisi" />
+        <dx-label :visible="false" />
+      </dx-item>
+      <dx-item
+        data-field="rememberMe"
+        editor-type="dxCheckBox"
+        :editor-options="{ text: 'Ingat saya', elementAttr: { class: 'form-text' } }"
+      >
+        <dx-label :visible="false" />
+      </dx-item>
+      <dx-button-item>
+        <dx-button-options
+          width="100%"
+          type="default"
+          template="signInTemplate"
+          :use-submit-behavior="true"
+        >
+        </dx-button-options>
+      </dx-button-item>
+      <dx-item>
+        <template #default>
+          <div class="link">
+            <router-link to="/reset-password">Lupa password?</router-link>
+          </div>
+        </template>
+      </dx-item>
+      <template #signInTemplate>
+        <div>
+          <span class="dx-button-text">
+            <dx-load-indicator v-if="loading" width="24px" height="24px" :visible="true" />
+            <span v-if="!loading">Log In</span>
+          </span>
+        </div>
+      </template>
+    </dx-form>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+import DxLoadIndicator from "devextreme-vue/load-indicator";
+import DxForm, {
+  DxItem,
+  DxEmailRule,
+  DxRequiredRule,
+  DxLabel,
+  DxButtonItem,
+  DxButtonOptions
+} from "devextreme-vue/form";
+import notify from 'devextreme/ui/notify';
+
+import auth from "../auth";
+
+import { reactive, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+export default {
+  setup() {
+    const route = useRoute();
+    const router = useRouter();
+
+    const formData = reactive({
+      email:"",
+      password:""
+    });
+    const loading = ref(false);
+
+    function onCreateAccountClick() {
+      router.push("/create-account");
+    }
+
+    async function onSubmit() {
+      const { email, password } = formData;
+      loading.value = true;
+      const result = await auth.logIn(email, password);
+      if (!result.isOk) {
+        loading.value = false;
+        notify(result.message, "error", 2000);
+      } else {
+        router.push(route.query.redirect || "/home");
+      }
+    }
+
+    return {
+      formData,
+      loading,
+      onCreateAccountClick,
+      onSubmit
+    };
+  },
+  components: {
+    DxLoadIndicator,
+    DxForm,
+    DxEmailRule,
+    DxRequiredRule,
+    DxItem,
+    DxLabel,
+    DxButtonItem,
+    DxButtonOptions
+  }
+};
+</script>
+
+<style lang="scss">
+@import "../themes/generated/variables.base.scss";
+
+.login-form {
+  .link {
+    text-align: center;
+    font-size: 16px;
+    font-style: normal;
+
+    a {
+      text-decoration: none;
+    }
+  }
+
+  .form-text {
+    margin: 10px 0;
+    color: rgba($base-text-color, alpha($base-text-color) * 0.7);
+  }
+}
+</style>