create components conversation

public/package.json

@@ -16,9 +16,11 @@
   "author": "Thuan Envity",
   "dependencies": {
     "axios": "^0.19.0",
+    "bootstrap": "^4.4.0",
     "core-js": "^3.3.2",
     "lodash": "^4.17.15",
     "moment": "^2.24.0",
+    "popper.js": "^1.16.0",
     "socket.io-client": "^2.3.0",
     "vue": "^2.6.10",
     "vue-router": "^3.1.3",
@@ -31,6 +33,9 @@
     "babel-eslint": "^10.0.3",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
+    "jquery": "^3.4.1",
+    "node-sass": "^4.13.0",
+    "sass-loader": "^8.0.0",
     "vue-template-compiler": "^2.6.10"
   },
   "eslintConfig": {

public/src/App.vue

@@ -32,6 +32,7 @@ export default {
     // this.socket.on("disconnect", () => {
     //   this.rooms = [];
     // });
+    document.body.style.overflowY = "hidden";
   },
   methods: {
     connect() {
@@ -52,4 +53,8 @@ export default {
   }
 };
 </script>
-<style lang="scss"></style>
+<style lang="scss">
+  .body{
+    overflow-y: hidden;
+  }
+</style>

public/src/components/auth/Login.vue

@@ -1,48 +1,40 @@
 <template>
   <div>
-    <section>
-      <div>
-        <span>Sign In</span>
-      </div>
-      <div>
-        <form @submit.prevent="handleSubmit" class="form">
-          <span>
-            <ion-icon name="rocket" class="icon"></ion-icon>We are excited to
-            see you again!
-          </span>
-          <br />
-          <div class="form-input">
-            <input
-              type="text"
-              name="username"
-              class="form-control"
-              placeholder="Enter your username"
-              required
-            />
-            <label for="username">Username</label>
-          </div>
-
-          <div class="form-input">
-            <input
-              type="password"
-              name="password"
-              class="form-control"
-              placeholder="Enter your password"
-              pattern=".{5,15}"
-              title="Password must be between 5 and 15 characters"
-              required
-            />
-            <label for="password">Password</label>
-          </div>
-          <div class="form-input">
-            <span>Do you have an account?</span>
-            <br />
-            <router-link :to="{ name: 'Register' }">Register</router-link>
-          </div>
-          <button type="submit" class="form-submit">Login</button>
-        </form>
-      </div>
-    </section>
+    <div class="container login-container">
+        <div class="col-md-5 login-form-1">
+        <img alt="icon-user" src="./user.jpg" class="user-icon">
+          <form @submit.prevent="handleSubmit" class="form">
+            <div class="form-group">
+              <input
+                  type="text"
+                  name="username"
+                  class="form-control"
+                  placeholder="Enter your username"
+                  required
+              />
+            </div>
+            <div class="form-group">
+              <input
+                  type="password"
+                  name="password"
+                  class="form-control"
+                  placeholder="Enter your password"
+                  pattern=".{5,15}"
+                  title="Password must be between 5 and 15 characters"
+                  required
+              />
+            </div>
+            <div class="form-group">
+              <button type="submit" class="btnSubmit">Login</button>
+            </div>
+            <div class="form-group">
+              <span>Don't have an account? </span>
+              <router-link :to="{ name: 'Register' }">Sign up</router-link>
+              <span> here</span>
+            </div>
+          </form>
+        </div>
+    </div>
   </div>
 </template>
 <script>
@@ -90,3 +82,47 @@ export default {
   }
 };
 </script>
+<style lang="scss" scoped>
+  .container{
+    margin: auto;
+  }
+  .login-container{
+    margin-top: 5%;
+    margin-bottom: 5%;
+    text-align: center;
+  }
+  .login-form-1{
+    padding: 5%;
+    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
+    margin: auto;
+    margin-top: 5%;
+  }
+  .login-form-1 h3{
+    text-align: center;
+    color: #333;
+  }
+  .login-container form{
+    padding: 10%;
+  }
+  .btnSubmit
+  {
+    width: 50%;
+    border-radius: 1rem;
+    padding: 1.5%;
+    border: none;
+    cursor: pointer;
+  }
+  .login-form-1 .btnSubmit{
+    font-weight: 600;
+    color: #fff;
+    background-color: #0062cc;
+  }
+  .login-form-1 .ForgetPwd{
+    color: #0062cc;
+    font-weight: 600;
+    text-decoration: none;
+  }
+  .user-icon{
+    max-width: 150px;
+  }
+</style>

public/src/components/auth/Register.vue

@@ -1,43 +1,48 @@
 <template>
-  <div class="page login">
-    <section>
-      <div>Register Here</div>
-      <div class="section-content">
-        <p>We hope will you enjoy our application!</p>
-      </div>
-      <div>
+  <div>
+    <div class="container login-container">
+      <div class="col-md-5 login-form-1">
+        <img alt="icon-user" src="./user.jpg" class="user-icon">
         <form @submit.prevent="handleSubmit" class="form">
-          <span>We always welcome new Envity</span>
-          <br />
-          <div class="form-input-group">
+          <div class="form-group">
             <input
-              type="text"
-              name="username"
-              class=""
-              placeholder="Enter your username"
-              required
+                    type="text"
+                    name="username"
+                    class="form-control"
+                    placeholder="Enter your username"
+                    required
             />
-            <label for="username">Username</label>
           </div>
-          <div class="form-input-group">
+          <div class="form-group">
             <input
-              type="password"
-              name="password"
-              class=""
-              placeholder="Enter your password"
-              required
+                    type="password"
+                    name="password"
+                    class="form-control"
+                    placeholder="Enter your password"
+                    pattern=".{5,15}"
+                    title="Password must be between 5 and 15 characters"
+                    required
             />
-            <label for="password">Password</label>
           </div>
-          <div class="form-input-group">
-            <span>Already have an account?</span>
-            <br />
-            <router-link :to="{ name: 'Login' }">Login</router-link>
+          <div class="form-group">
+            <input
+                    type="password"
+                    name="password"
+                    class="form-control"
+                    placeholder="Confirm your password"
+                    pattern=".{5,15}"
+                    title="Password must be between 5 and 15 characters"
+                    required
+            />
           </div>
-          <button type="submit" class="form-submit">Register</button>
+          <button type="submit"  class="btnSubmit">Register</button>
         </form>
+        <div class="form-input-group">
+          <span>Already have an account? </span>
+          <router-link :to="{ name: 'Login' }">Sign in</router-link>
+        </div>
       </div>
-    </section>
+    </div>
   </div>
 </template>
 
@@ -52,6 +57,50 @@ export default {
 		errors: []
 	};
   },
-  
+
 };
 </script>
+<style lang="scss" scoped>
+  .container{
+    margin: auto;
+  }
+  .login-container{
+    margin-top: 5%;
+    margin-bottom: 5%;
+    text-align: center;
+  }
+  .login-form-1{
+    padding: 5%;
+    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
+    margin: auto;
+    margin-top: 2%;
+  }
+  .login-form-1 h3{
+    text-align: center;
+    color: #333;
+  }
+  .login-container form{
+    padding: 10%;
+  }
+  .btnSubmit
+  {
+    width: 50%;
+    border-radius: 1rem;
+    padding: 1.5%;
+    border: none;
+    cursor: pointer;
+  }
+  .login-form-1 .btnSubmit{
+    font-weight: 600;
+    color: #fff;
+    background-color: #0062cc;
+  }
+  .login-form-1 .ForgetPwd{
+    color: #0062cc;
+    font-weight: 600;
+    text-decoration: none;
+  }
+  .user-icon{
+    max-width: 150px;
+  }
+</style>