majestic-fox-2019 · aronanur · Feb 14, 2020 · Feb 14, 2020 · Feb 14, 2020 · Feb 14, 2020
diff --git a/client/.gitignore b/client/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+dist
+.cache
diff --git a/client/404.html b/client/404.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Page Not Found</title>
+
+    <style media="screen">
+      body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
+      #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
+      #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
+      #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
+      #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
+      #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
+      #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
+      #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
+      #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
+      @media (max-width: 600px) {
+        body, #message { margin-top: 0; background: white; box-shadow: none; }
+        body { border-top: 16px solid #ffa100; }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="message">
+      <h2>404</h2>
+      <h1>Page Not Found</h1>
+      <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
+      <h3>Why am I seeing this?</h3>
+      <p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
+    </div>
+  </body>
+</html>
diff --git a/client/App.vue b/client/App.vue
@@ -0,0 +1,182 @@
+<template>
+  <div id="app">
+    <div>
+      <div class="col-md-3 pt-3 toaster" :style="{ display : toaster !== null ? 'block' : 'none'}">
+        <div class="alert alert-info" role="alert">
+          {{ toaster }}
+        </div>
+      </div>
+    </div>
+    <div v-if="page.login">
+    <LoginPage v-on:login="login" :host="host" />
+    </div>
+    <div v-if="page.register">
+      <RegisterPage :register_data = register />
+    </div>
+    <div v-if="page.main">
+      <MainPage 
+      @logout="logout" 
+      :email="email" 
+      :host="host" 
+      :toaster="toaster" />
+    </div>
+  </div>
+</template>
+
+<script>
+import LoginPage from "./components/LoginPage";
+import RegisterPage from "./components/RegisterPage";
+import MainPage from './components/MainPage'
+import axios from "axios";
+
+export default {
+  name: "app",
+  components: {
+    MainPage,
+    LoginPage,
+    RegisterPage
+  },
+  data() {
+    return {
+      host: "http://localhost:3000",
+      toaster : null,
+      email : '',
+      page: {
+        login: true,
+        register: false,
+        main: false
+      },
+      register : {
+        form : {
+          name : '',
+          email : '',
+          password : ''
+        },
+        error : {
+        status : false,
+        errorMessage : {
+          name : '',
+          email : '',
+          password : ''
+        },
+        errorClass : {
+          name : '',
+          email : '',
+          password : ''
+        }
+      }
+      }
+    };
+  },
+  mounted(){
+    if(localStorage.token){
+      this.page.register = false
+      this.page.login = false
+      this.page.main = true
+      this.email = localStorage.email
+    }else{
+      this.page.register = false
+      this.page.login = true
+      this.page.main = false
+    }
+  },
+  methods: {
+    login(form) {
+      const data = {
+        email: form.email,
+        password: form.password
+      };
+
+      return axios
+        .post(`${this.host}/users/login`, data)
+        .then(response => {
+          this.page.login = false
+          this.page.main = true
+          this.toaster = 'Sucessfully login!'
+          localStorage.id = response.data.id
+          localStorage.email = response.data.email
+          localStorage.token = response.data.token;
+          form.clearField()
+          setTimeout(() => {
+              this.toaster = null
+          }, 2000);
+        })
+        .catch(err => {
+          form.showError(err.response.data)
+        });
+    },
+    doRegister(){
+      const data = {
+        name: this.register.form.name,
+        email: this.register.form.email,
+        password: this.register.form.password
+      };
+
+      this.clearValidation(this.register.error.errorClass)
+
+      axios
+        .post(`${this.host}/users/register`, data)
+        .then(response => {
+          this.toaster = 'Sucessfully registered as a user !'
+
+          setTimeout(() => {
+              this.toaster = null
+          }, 2000);
+
+          this.clearField(this.register.form)
+        })
+        .catch(err => {
+          this.register.error.status = true
+          this.register.error.errorMessage = err.response.data
+          this.showError(this.register.form, this.register.error)
+        });
+    },
+    googleSignOut(){
+      const auth2 = gapi.auth2.getAuthInstance();
+      auth2.signOut().then(function () {
+          console.log('User signed out.');
+      })
+    },
+    logout (){
+      localStorage.clear()
+      this.googleSignOut()
+      this.page.login = true
+      this.page.main = false
+      this.toaster = 'Sucessfully logout!'
+
+      setTimeout(() => {
+          this.toaster = null
+      }, 2000);
+    },
+    loginGoogle(){
+      this.page.login = false
+      this.page.main = true
+      this.email = localStorage.email
+    },
+    redirectAuthPage(){
+      console.log(this.page)
+      this.page.login = this.page.login ? false : true
+      this.page.register = this.page.register ? false : true
+    },
+    showError : function(errorObject, state){
+      for(let key in errorObject){
+        if(errorObject[key] === ''){
+          state.errorClass[key] = 'is-invalid'
+        }
+      }
+    },
+    clearValidation : function(objectValidation){
+      for(let key in objectValidation){
+        objectValidation[key] = ''
+      }
+    },
+    clearField: function(field){
+      for(let key in field){
+        field[key] = ''
+      }
+    }
+  }
+};
+</script>
+
+<style></style>
diff --git a/client/app.js b/client/app.js
@@ -0,0 +1,10 @@
+import Vue from 'vue';
+import App from './App.vue';
+import VueSocketIOExt from 'vue-socket.io-extended';
+import io from 'socket.io-client';
+
+const socket = io('https://localhost:3000');
+
+Vue.use(VueSocketIOExt, socket);
+
+new Vue({ render: createElement => createElement(App) }).$mount('#app');
diff --git a/client/assets/scss/main.scss b/client/assets/scss/main.scss
@@ -0,0 +1,155 @@
+$basic-background : #2676c7;
+$basic-font : 'Raleway', sans-serif;
+$card-bg : #ffffffaf;
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+.loginpage {
+  min-height: 100vh;
+}
+
+.registerpage {
+  min-height: 100vh;
+}
+
+.form-login-container {
+  position: relative;
+  top: 50px;
+  min-height: 350px;
+  background-color: white;
+  padding-bottom: 5px;
+}
+
+.form-register-container {
+  position: relative;
+  top: 50px;
+  min-height: 420px;
+  background-color: white;
+  padding-bottom: 5px;
+}
+
+.full-width-btn {
+  width: 100%;
+  height: 40px;
+}
+
+.toaster {
+  display: none;
+  top: 5px;
+  right: 10px;
+  position: absolute;
+  z-index: 1;
+}
+
+.trello-btn-bg {
+  background-color: hsla(0, 0%, 100%, .3)
+}
+
+.card-wrapper {
+  min-height: 95vh;
+  background-color: $basic-background;
+}
+
+.content {
+  width: 100%;
+  min-height: 90vh;
+  background-color: white;
+}
+
+.card {
+  background-color: $card-bg;
+  min-height: 100px;
+  max-height: 500px;
+  box-shadow: 1px 1px #aaa;
+}
+
+.card-title{
+  width: 95%;
+  margin: 0 auto;
+  height: 40px;
+  border: none;
+  display: flex;
+  justify-content: space-between;
+  padding-top: 4px;
+  p{
+    color: $basic-background;
+    text-align: center;
+    a{
+    transition: color 0.5s; 
+    }
+    a:hover {
+      color: black;
+    }
+  }
+}
+
+.card-content{
+  width: 100%;
+  height: auto;
+  max-height: 500px;
+  cursor: pointer;
+  overflow-y: auto;
+
+  .item{
+    width: 96%;
+    margin: 5px auto;
+    min-height: 50px;
+    height: auto;
+    border-radius: 3px;
+    background-color: white;
+    border: 1px solid #aaa;
+    transition: border 0.3s;
+
+    .content{
+      width: 95%;
+      margin: auto;
+      min-height: 60px;
+      height: auto;
+
+      p{
+        font-size: 12px;
+        text-align: justify;
+      }
+    }
+
+    .head{
+      width: 95%;
+      margin: 0 auto;
+      font-size: 12px;
+      height: 30px;
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+    }
+  }
+
+  .item:hover {
+    border: 1px solid black;
+  }
+}
+
+.card-form{
+  width: 100%;
+  margin: 0 auto;
+  height: 100px;
+  font-size: 14px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.card-footer{
+  display: flex;
+  justify-content: center;
+  min-height: 50px;
+  font-size: 14px;
+  a{
+    text-decoration: none;
+    transition: color 0.3s;
+  }
+  a:hover{
+    color: black;
+  }
+}