From 5d365d11680dfe09c129f49e1e9030fe62b4ea33 Mon Sep 17 00:00:00 2001
From: Abhijeet Jain <abhijeetjain456@gmail.com>
Date: Sun, 18 Sep 2022 18:22:26 +0530
Subject: [PATCH 1/3] feat(): fix layout

---
 package.json               |  3 +-
 src/App.vue                | 40 ++++++++++++++++++++-----
 src/components/NavMenu.vue | 60 ++++++++++++++++++++++++++++++++++++++
 src/views/Home.vue         | 18 +-----------
 src/views/Login.vue        | 17 +++--------
 vue.config.js              |  3 ++
 yarn.lock                  |  9 +++++-
 7 files changed, 110 insertions(+), 40 deletions(-)
 create mode 100644 src/components/NavMenu.vue

diff --git a/package.json b/package.json
index c703907..83db1d9 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "dev": "vue-cli-service serve",
+    "dev": "cross-env PORT=8000 vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
@@ -28,6 +28,7 @@
     "@vue/cli-service": "~5.0.0",
     "@vue/eslint-config-typescript": "^9.1.0",
     "babel-plugin-component": "^1.1.1",
+    "cross-env": "^7.0.3",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
diff --git a/src/App.vue b/src/App.vue
index 0c69ed8..bafe79e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,20 +1,44 @@
 <template>
-  <div id="app">
-    <nav>
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </nav>
+  <Container id="app" direction="vertical">
+    <Header :height="'auto'">
+      <!-- <nav>
+        <router-link to="/">Home</router-link> |
+        <router-link to="/about">About</router-link>
+      </nav> -->
+      <NavMenu />
+    </Header>
+    <!-- <Main> -->
     <router-view />
-  </div>
+    <!-- </Main> -->
+  </Container>
 </template>
 
-<style lang="scss">
+<script lang="ts">
+import { Vue, Component } from "vue-property-decorator";
+import { Container, Header, Main } from "element-ui";
+const NavMenu = () =>
+  import(
+    /* webpackChunkName: 'NavMenu' */ /* webpackPrefetch: true */ "./components/NavMenu.vue"
+  );
+
+@Component({
+  components: {
+    Container,
+    Header,
+    Main,
+    NavMenu,
+  },
+})
+export default class App extends Vue {}
+</script>
+
+<style lang="scss" scoped>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #2c3e50;
+  // color: #2c3e50;
 }
 
 nav {
diff --git a/src/components/NavMenu.vue b/src/components/NavMenu.vue
new file mode 100644
index 0000000..1fd9b5b
--- /dev/null
+++ b/src/components/NavMenu.vue
@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <Menu
+      style="display: inline-flex; float: left"
+      data-qa-id="nav-menu"
+      :mode="'horizontal'"
+      :router="true"
+      :default-active="currentRoute"
+    >
+      <MenuItem
+        v-for="route in $router.options.routes"
+        :key="route.path"
+        :route="route"
+        :index="route.path"
+      >
+        {{ route.path }}
+      </MenuItem>
+    </Menu>
+    <Button
+      style="text-color: white; float: right"
+      type="primary"
+      @click="openLoginDialog = true"
+      round
+      >Login</Button
+    >
+    <div v-if="openLoginDialog">
+      <Login
+        :open="openLoginDialog"
+        @close="(val) => (openLoginDialog = val)"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Watch } from "vue-property-decorator";
+import { Menu, MenuItem, Button } from "element-ui";
+import Login from "@/views/Login.vue";
+
+@Component({
+  components: {
+    Menu,
+    MenuItem,
+    Button,
+    Login,
+  },
+})
+export default class NavMenu extends Vue {
+  currentRoute = "/";
+  openLoginDialog = false;
+
+  @Watch("$route.path")
+  onRoutePathChange(newValue: string) {
+    // triggered only once at startup since router is not reactive.
+    this.currentRoute = newValue;
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index c3d9f4c..05d8254 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,16 +1,5 @@
 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
-    <Button @click="openDialog" type="primary" icon="el-icon-switch-button"
-      >Login</Button
-    >
-    <Login
-      v-if="openLoginDialog"
-      :open="openLoginDialog"
-      @close="(val) => (openLoginDialog = val)"
-    />
-  </div>
+  <div class="home">Homepage</div>
 </template>
 
 <script lang="ts">
@@ -18,10 +7,6 @@ import { Component, Vue } from "vue-property-decorator";
 import { Button } from "element-ui";
 
 // Components
-const HelloWorld = () =>
-  import(
-    /* webpackChunkName: "HelloWorld" */ /* webpackPrefetch: true */ "../components/HelloWorld.vue"
-  );
 const Login = () =>
   import(
     /* webpackChunkName: "Login" */ /* webpackPrefetch: true */ "./Login.vue"
@@ -29,7 +14,6 @@ const Login = () =>
 
 @Component({
   components: {
-    HelloWorld,
     Login,
     Button,
   },
diff --git a/src/views/Login.vue b/src/views/Login.vue
index b07a0cb..5de7030 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -14,9 +14,9 @@
         <Input :show-password="true" v-model="loginModel.password" />
       </FormItem>
       <FormItem>
-        <Button type="primary" :disabled="!canSubmit" @click="submitLogin"
-          >Login</Button
-        >
+        <Button type="primary" :disabled="!canSubmit" @click="submitLogin">
+          Login
+        </Button>
       </FormItem>
     </Form>
   </Dialog>
@@ -66,7 +66,7 @@ export default class Login extends Vue {
       {
         type: "string",
         whitespace: true,
-        message: "Hmm, ever had a username with spaces?!",
+        message: "Hmm, ever had a username with just spaces?!",
       },
     ],
     password: {
@@ -81,15 +81,6 @@ export default class Login extends Vue {
     password: "",
   };
 
-  username = "";
-  password = "";
-
-  openDialog = false;
-
-  mounted() {
-    this.openDialog = this.open;
-  }
-
   get canSubmit(): boolean {
     return !!this.loginModel.username && !!this.loginModel.password;
   }
diff --git a/vue.config.js b/vue.config.js
index ca2ee30..0727460 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -2,4 +2,7 @@ const { defineConfig } = require("@vue/cli-service");
 module.exports = defineConfig({
   transpileDependencies: true,
   lintOnSave: false,
+  configureWebpack: {
+    devtool: "source-map",
+  },
 });
diff --git a/yarn.lock b/yarn.lock
index d4c3250..6a5e137 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2539,6 +2539,13 @@ cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
+cross-env@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf"
+  integrity sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==
+  dependencies:
+    cross-spawn "^7.0.1"
+
 cross-spawn@^5.0.1:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
@@ -2559,7 +2566,7 @@ cross-spawn@^6.0.0:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
-cross-spawn@^7.0.2, cross-spawn@^7.0.3:
+cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
   integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==

From 70ae7653fd2d9270e5cf8569fe77847e945abfda Mon Sep 17 00:00:00 2001
From: Abhijeet Jain <abhijeetjain456@gmail.com>
Date: Sun, 18 Sep 2022 19:37:17 +0530
Subject: [PATCH 2/3] feat(): beautify login dialog

---
 src/App.vue                |  6 ++--
 src/components/NavMenu.vue |  3 +-
 src/views/Login.vue        | 58 +++++++++++++++++++++++++++++++-------
 3 files changed, 53 insertions(+), 14 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index bafe79e..feab023 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -35,9 +35,9 @@ export default class App extends Vue {}
 <style lang="scss" scoped>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
+  // -webkit-font-smoothing: antialiased;
+  // -moz-osx-font-smoothing: grayscale;
+  // text-align: center;
   // color: #2c3e50;
 }
 
diff --git a/src/components/NavMenu.vue b/src/components/NavMenu.vue
index 1fd9b5b..fbe24b6 100644
--- a/src/components/NavMenu.vue
+++ b/src/components/NavMenu.vue
@@ -18,9 +18,10 @@
     </Menu>
     <Button
       style="text-color: white; float: right"
+      plain
       type="primary"
+      icon="el-icon-switch-button"
       @click="openLoginDialog = true"
-      round
       >Login</Button
     >
     <div v-if="openLoginDialog">
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 5de7030..01ffadc 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -1,24 +1,39 @@
 <template>
-  <Dialog :visible="open" :title="'Login'" @close="close">
+  <Dialog
+    :width="'400px'"
+    :visible="open"
+    :title="'Login'"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    @close="close"
+  >
     <Form
       :statusIcon="true"
-      inline
+      :label-width="'auto'"
       :model="loginModel"
       :rules="formValidator"
       size="small"
+      @validate="onValidate"
     >
       <FormItem :label="'Username'" required prop="username">
-        <Input v-model="loginModel.username" />
+        <Input class="form_input" v-model="loginModel.username" />
       </FormItem>
       <FormItem :label="'Password'" required prop="password">
-        <Input :show-password="true" v-model="loginModel.password" />
-      </FormItem>
-      <FormItem>
-        <Button type="primary" :disabled="!canSubmit" @click="submitLogin">
-          Login
-        </Button>
+        <Input
+          class="form_input"
+          :show-password="true"
+          v-model="loginModel.password"
+        />
       </FormItem>
     </Form>
+    <template #footer>
+      <Button type="primary" :disabled="!canSubmit" @click="submitLogin">
+        Login
+      </Button>
+      <Button type="secondary" :disabled="!canSubmit" @click="submitLogin">
+        Sign Up
+      </Button>
+    </template>
   </Dialog>
 </template>
 
@@ -81,8 +96,17 @@ export default class Login extends Vue {
     password: "",
   };
 
+  formValidity: { [key: string]: boolean } = {
+    username: false,
+    password: false,
+  };
+
   get canSubmit(): boolean {
-    return !!this.loginModel.username && !!this.loginModel.password;
+    return (
+      !!this.loginModel.username &&
+      !!this.loginModel.password &&
+      this.isFormValid
+    );
   }
 
   submitLogin() {
@@ -91,9 +115,23 @@ export default class Login extends Vue {
     this.loginModel.password = "";
   }
 
+  get isFormValid(): boolean {
+    return this.formValidity.username && this.formValidity.password;
+  }
+
+  onValidate(result: string, isValid: boolean) {
+    this.formValidity[result] = isValid;
+  }
+
   @Emit()
   close() {
     return false;
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.form_input {
+  width: 100%;
+}
+</style>

From 01d751a8f7b2bab66a1e22d9abd23f0c6047a13a Mon Sep 17 00:00:00 2001
From: Abhijeet Jain <abhijeetjain456@gmail.com>
Date: Sun, 18 Sep 2022 22:14:11 +0530
Subject: [PATCH 3/3] validate password for whitespace

---
 .eslintrc.js        |  1 +
 src/views/Login.vue | 45 +++++++++++++++++++++++++--------------------
 2 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index d99c1e8..396c98d 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -15,5 +15,6 @@ module.exports = {
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "@typescript-eslint/ban-types": "off",
   },
 };
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 01ffadc..0024937 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -8,6 +8,7 @@
     @close="close"
   >
     <Form
+      ref="loginForm"
       :statusIcon="true"
       :label-width="'auto'"
       :model="loginModel"
@@ -53,17 +54,19 @@ import { Dialog, Input, Form, FormItem, Button } from "element-ui";
 export default class Login extends Vue {
   @Prop() open!: boolean;
 
+  loginModel = {
+    username: "",
+    password: "",
+  };
+
   // https://github.com/yiminghe/async-validator
-  // validatePass = (rule, value, callback: Function) => {
-  //       if (value === '') {
-  //         callback(new Error('Please input the password'));
-  //       } else {
-  //         if (this.ruleForm.checkPass !== '') {
-  //           this.$refs.ruleForm.validateField('checkPass');
-  //         }
-  //         callback();
-  //       }
-  //     };
+  validatePass = (rule: object, password: string, callback: Function) => {
+    console.log(rule);
+    if (/\s/.test(password)) {
+      callback(new Error("No spaces please!"));
+    }
+    callback();
+  };
 
   formValidator = {
     username: [
@@ -84,16 +87,18 @@ export default class Login extends Vue {
         message: "Hmm, ever had a username with just spaces?!",
       },
     ],
-    password: {
-      required: true,
-      type: "string",
-      message: "We wont tell anyone, just need to authenticate it's you!",
-    },
-  };
-
-  loginModel = {
-    username: "",
-    password: "",
+    password: [
+      {
+        required: true,
+        type: "string",
+        message: "We wont tell anyone, just need to authenticate it's you!",
+      },
+      {
+        type: "string",
+        message: "No spaces please!",
+        validator: this.validatePass,
+      },
+    ],
   };
 
   formValidity: { [key: string]: boolean } = {