Add template and create register

assets/css/custom.css

+/* BASIC */
+
+html {
+  background-color: #fffb027a;
+}
+
+body {
+  font-family: 'Poppins', sans-serif;
+  height: 100vh;
+}
+
+a {
+  color: #92badd;
+  display: inline-block;
+  text-decoration: none;
+  font-weight: 400;
+}
+
+h2 {
+  text-align: center;
+  font-size: 16px;
+  font-weight: 600;
+  text-transform: uppercase;
+  display: inline-block;
+  margin: 40px 8px 10px 8px;
+  color: #ccc;
+}
+
+/* STRUCTURE */
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  min-height: 100%;
+  padding: 20px;
+}
+
+#formContent {
+  -webkit-border-radius: 10px 10px 10px 10px;
+  border-radius: 10px 10px 10px 10px;
+  background: #fff;
+  width: 90%;
+  max-width: 450px;
+  position: relative;
+  padding: 1px;
+  -webkit-box-shadow: 0 30px 60px 0 rgba(0, 0, 0, 0.3);
+  box-shadow: 0 30px 60px 0 rgba(0, 0, 0, 0.3);
+  text-align: center;
+} /* dimension */
+
+#formFooter {
+  background-color: #f6f6f6;
+  border-top: 1px solid #dce8f1;
+  padding: 25px;
+  text-align: center;
+  -webkit-border-radius: 0 0 10px 10px;
+  border-radius: 0 0 10px 10px;
+}
+
+/* TABS */
+
+h2.inactive {
+  color: #ccc;
+}
+
+h2.active {
+  color: #0d0d0d;
+  border-bottom: 2px solid #5fbae9;
+}
+
+input[type='button'],
+input[type='submit'],
+input[type='reset'] {
+  background-color: #56baed;
+  border: none;
+  color: white;
+  padding: 15px 80px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  text-transform: uppercase;
+  font-size: 13px;
+  -webkit-box-shadow: 0 10px 30px 0 rgba(95, 186, 233, 0.4);
+  box-shadow: 0 10px 30px 0 rgba(95, 186, 233, 0.4);
+  -webkit-border-radius: 5px 5px 5px 5px;
+  border-radius: 5px 5px 5px 5px;
+  margin: 5px 20px 40px 20px;
+  -webkit-transition: all 0.3s ease-in-out;
+  -moz-transition: all 0.3s ease-in-out;
+  -ms-transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+}
+
+input[type='button']:hover,
+input[type='submit']:hover,
+input[type='reset']:hover {
+  background-color: #39ace7;
+}
+
+input[type='button']:active,
+input[type='submit']:active,
+input[type='reset']:active {
+  -moz-transform: scale(0.95);
+  -webkit-transform: scale(0.95);
+  -o-transform: scale(0.95);
+  -ms-transform: scale(0.95);
+  transform: scale(0.95);
+}
+
+input[type='text'] {
+  background-color: #f6f6f6;
+  color: #0d0d0d;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 5px;
+  width: 85%;
+  border: 2px solid #f6f6f6;
+  -webkit-transition: all 0.5s ease-in-out;
+  -moz-transition: all 0.5s ease-in-out;
+  -ms-transition: all 0.5s ease-in-out;
+  -o-transition: all 0.5s ease-in-out;
+  transition: all 0.5s ease-in-out;
+  -webkit-border-radius: 5px 5px 5px 5px;
+  border-radius: 5px 5px 5px 5px;
+}
+
+input[type='text']:focus {
+  background-color: #fff;
+  border-bottom: 2px solid #5fbae9;
+}
+
+input[type='text']:placeholder {
+  color: #ccc;
+}
+
+input[type='password'] {
+  background-color: #f6f6f6;
+  color: #0d0d0d;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 5px;
+  width: 85%;
+  border: 2px solid #f6f6f6;
+  -webkit-transition: all 0.5s ease-in-out;
+  -moz-transition: all 0.5s ease-in-out;
+  -ms-transition: all 0.5s ease-in-out;
+  -o-transition: all 0.5s ease-in-out;
+  transition: all 0.5s ease-in-out;
+  -webkit-border-radius: 5px 5px 5px 5px;
+  border-radius: 5px 5px 5px 5px;
+}
+
+input[type='password']:focus {
+  background-color: #fff;
+  border-bottom: 2px solid #5fbae9;
+}
+
+input[type='password']:placeholder {
+  color: #ccc;
+}
+.fadeindown {
+  -webkit-animation-name: fadeindown;
+  animation-name: fadeindown;
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+@-webkit-keyframes fadeindown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes fadeindown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+/* Simple CSS3 Fade-in Animation */
+@-webkit-keyframes faden {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-moz-keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.fadein {
+  opacity: 0;
+  -webkit-animation: fadein ease-in 1;
+  -moz-animation: fadein ease-in 1;
+  animation: fadein ease-in 1;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-duration: 1s;
+  -moz-animation-duration: 1s;
+  animation-duration: 1s;
+}
+
+.fadein.first {
+  -webkit-animation-delay: 0.4s;
+  -moz-animation-delay: 0.4s;
+  animation-delay: 0.4s;
+}
+
+.fadein.second {
+  -webkit-animation-delay: 0.6s;
+  -moz-animation-delay: 0.6s;
+  animation-delay: 0.6s;
+}
+
+.fadein.third {
+  -webkit-animation-delay: 0.8s;
+  -moz-animation-delay: 0.8s;
+  animation-delay: 0.8s;
+}
+
+.fadein.fourth {
+  -webkit-animation-delay: 1s;
+  -moz-animation-delay: 1s;
+  animation-delay: 1s;
+}
+
+/* .underlineHover:after {
+    display: block;
+    left: 0;
+    bottom: -10px;
+    width: 0;
+    height: 2px;
+    background-color: #56baed;
+    content: '';
+    transition: width 0.2s;
+  } */
+
+.underlineHover:hover {
+  color: #0d0d0d;
+}
+
+/* .underlineHover:hover:after {
+    width: 100%;
+  } */
+
+/* OTHERS */
+
+*:focus {
+  outline: none;
+}
+
+#icon {
+  width: 60%;
+}
+
+button {
+  background-color: #56baed;
+  border: none;
+  color: white;
+  padding: 15px 80px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  text-transform: uppercase;
+  font-size: 13px;
+  -webkit-box-shadow: 0 10px 30px 0 rgba(95, 186, 233, 0.4);
+  box-shadow: 0 10px 30px 0 rgba(95, 186, 233, 0.4);
+  -webkit-border-radius: 5px 5px 5px 5px;
+  border-radius: 5px 5px 5px 5px;
+  margin: 5px 20px 40px 20px;
+  -webkit-transition: all 0.3s ease-in-out;
+  -moz-transition: all 0.3s ease-in-out;
+  -ms-transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+  -moz-transform: scale(0.95);
+  -webkit-transform: scale(0.95);
+  -o-transform: scale(0.95);
+  -ms-transform: scale(0.95);
+  transform: scale(0.95);
+}

commitlint.config.js

-module.exports = {
-  extends: ['@commitlint/config-conventional'],
-}
+module.exports = { extends: ['@commitlint/config-conventional'] }

layouts/default.vue

 <template>
   <div>
+    <div id="navbar">
+      <div id="logo">
+        <Logo />
+      </div>
+      <ul id="navbar-child">
+        <li><nuxt-link to="/">Home</nuxt-link></li>
+        <li><nuxt-link to="/chat">Chat Room</nuxt-link></li>
+        <li><nuxt-link to="/about">About Me</nuxt-link></li>
+        <li>
+          <!-- hi username -->
+          Hi
+          <!-- log out button -->
+        </li>
+        <li>
+          <!-- log in button -->
+          <nuxt-link to="/about">{Not login yet}</nuxt-link>
+        </li>
+      </ul>
+    </div>
+    <div class="default_nuxt">
       <Nuxt />
     </div>
+  </div>
 </template>
 
+<style lang="scss">
+#navbar {
+  height: 50px;
+  width: 100%;
+  background-color: black;
+  #navbar-child {
+    float: right;
+    margin-top: 27px;
+  }
+  .defautl-nuxt {
+    max-width: 800px;
+    margin: auto;
+  }
+  li {
+    float: left;
+    list-style-type: none;
+    display: list-item;
+    text-align: -webkit-match-parent;
+    a {
+      color: red;
+      text-decoration: none;
+      margin-right: 10px;
+      font-size: 20px;
+    }
+  }
+
+  svg {
+    max-width: 50px;
+    max-height: 60px;
+  }
+  #logo {
+    padding-left: 20px;
+    width: 50px;
+    height: 60px;
+    float: left;
+  }
+}
+</style>
+
 <style>
 html {
   font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',

layouts/error.vue

+<template>
+  <div class="error_page">
+    <h1>Something went wrong</h1>
+    <h2>Return to <nuxt-link to="/">Home page</nuxt-link></h2>
+  </div>
+</template>
+
+<style lang="scss" scope>
+.error_page {
+  color: red;
+  margin: 0 auto;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+</style>

nuxt.config.js

@@ -35,14 +35,22 @@ export default {
     '@nuxtjs/pwa',
     // https://go.nuxtjs.dev/content
     '@nuxt/content',
+    '@nuxtjs/auth-next',
   ],
 
   // Axios module configuration (https://go.nuxtjs.dev/config-axios)
-  axios: {},
+  axios: {
+    // baseURL: process.env.API_URL || ' http://localhost:8000/api/',
+    // debug: process.env.DEBUG || false,
+    // proxyHeaders: false,
+    // credentials: false,
+  },
 
   // Content module configuration (https://go.nuxtjs.dev/config-content)
   content: {},
 
   // Build Configuration (https://go.nuxtjs.dev/config-build)
   build: {},
+  auth: {},
+  env: { apiKey: 'AIzaSyA0qXrqxpNc5FuQ_PE9D2bE4nlmPTuFAnc' },
 }

package.json

 {
   "name": "chat",
   "version": "1.0.0",
+  "license": "UNLICENSED",
   "private": true,
   "scripts": {
     "dev": "nuxt",
@@ -11,19 +12,26 @@
     "lint:style": "stylelint **/*.{vue,css} --ignore-path .gitignore",
     "lint": "yarn lint:js && yarn lint:style"
   },
-  "lint-staged": {
-    "*.{js,vue}": "eslint",
-    "*.{css,vue}": "stylelint"
-  },
   "husky": {
     "hooks": {
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
       "pre-commit": "lint-staged"
     }
   },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "prettier --write",
+      "eslint --fix",
+      "git add"
+    ],
+    "*.{html,css,less,ejs,json}": [
+      "prettier --write",
+      "git add"
+    ]
+  },
   "dependencies": {
     "@nuxt/content": "^1.9.0",
-    "@nuxtjs/axios": "^5.12.2",
+    "@nuxtjs/auth-next": "5.0.0-1607693598.34d83ea",
+    "@nuxtjs/axios": "^5.12.3",
     "@nuxtjs/pwa": "^3.0.2",
     "core-js": "^3.6.5",
     "nuxt": "^2.14.6"

pages/index.vue

 <template>
   <div class="container">
-    <div>
-      <Logo />
-      <h1 class="title">chat</h1>
-      <div class="links">
-        <a
-          href="https://nuxtjs.org/"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="button--green"
-        >
-          Documentation
-        </a>
-        <a
-          href="https://github.com/nuxt/nuxt.js"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="button--grey"
-        >
-          GitHub
-        </a>
-      </div>
+    <div v-if="checkLogin">HOME PAGE</div>
+    <div v-else>
+      <script>
+        window.location.href = '/login'
+      </script>
     </div>
   </div>
 </template>
-
 <script>
-export default {}
+export default {
+  data() {
+    return {
+      checkLogin: false,
+    }
+  },
+}
 </script>
 
 <style>
+@import '@/assets/css/custom.css';
 .container {
   margin: 0 auto;
   min-height: 100vh;
@@ -38,26 +28,4 @@ export default {}
   align-items: center;
   text-align: center;
 }
-
-.title {
-  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  display: block;
-  font-weight: 300;
-  font-size: 100px;
-  color: #35495e;
-  letter-spacing: 1px;
-}
-
-.subtitle {
-  font-weight: 300;
-  font-size: 42px;
-  color: #526488;
-  word-spacing: 5px;
-  padding-bottom: 15px;
-}
-
-.links {
-  padding-top: 15px;
-}
 </style>

pages/login.vue

+<template>
+  <div class="container">
+    <div v-if="checkLogin" class="wrapper fadeInDown">
+      <div id="formContent">
+        <div class="fadein first">
+          <Logo />
+        </div>
+        <h1 class="fadein second">Login</h1>
+        <!-- Login Form -->
+        <input
+          id="login"
+          v-model="username"
+          type="text"
+          class="fadein second"
+          name="login"
+          placeholder="login"
+        />
+        <input
+          id="password"
+          v-model="password"
+          type="password"
+          class="fadein third"
+          name="login"
+          placeholder="password"
+        />
+        <button type="submit" class="fadein fourth" value="Log In">
+          Submit
+        </button>
+
+        <!-- Remind Passowrd -->
+        <!-- <div id="formFooter">
+          <a class="underlineHover" href="#">Forgot Password?</a>
+        </div> -->
+      </div>
+    </div>
+    <div v-else>TEST</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Login',
+  layout: 'clean',
+  data() {
+    return {
+      checkLogin: true,
+      username: '',
+      password: '',
+      error: null,
+    }
+  },
+
+  methods: {},
+}
+</script>
+
+<style scope>
+@import '@/assets/css/custom.css';
+.container {
+  margin: 0 auto;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+</style>

pages/register/index.vue

+<template>
+  <div class="container">
+    <div v-if="checkLogin" class="wrapper fadeInDown">
+      <div id="formContent">
+        <div class="fadein first">
+          <Logo />
+        </div>
+        <!-- Login Form -->
+        <h1 class="fadein second">Register</h1>
+        <form @submit.prevent="onSubmit">
+          <input
+            id="email"
+            v-model="email"
+            type="text"
+            class="fadein second"
+            name="email"
+            placeholder="email"
+          />
+          <input
+            id="password"
+            v-model="password"
+            type="password"
+            class="fadein third"
+            name="password"
+            placeholder="password"
+          />
+          <input
+            id="repassword"
+            v-model="rePassword"
+            type="password"
+            class="fadein third"
+            name="repassword"
+            placeholder="rePassword"
+          />
+          <button type="submit" class="fadein fourth" value="Log In">
+            Submit
+          </button>
+        </form>
+        <!-- Remind Passowrd -->
+        <!-- <div id="formFooter">
+          <a class="underlineHover" href="#">Forgot Password?</a>
+        </div> -->
+      </div>
+    </div>
+    <div v-else>TEST</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Login',
+  layout: 'clean',
+  data() {
+    return {
+      checkLogin: true,
+      email: '',
+      password: '',
+      rePassword: '',
+      error: null,
+    }
+  },
+  methods: {
+    checkPw() {
+      return this.password === this.rePassword
+    },
+    onSubmit() {
+      const valPass = this.checkPw()
+      if (valPass) {
+        this.$axios
+          .$post(
+            'https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=AIzaSyA0qXrqxpNc5FuQ_PE9D2bE4nlmPTuFAnc',
+            {
+              email: this.email,
+              password: this.password,
+              returnSecureToken: true,
+            }
+          )
+          .then((result) => {
+            alert('Register Success, please login')
+            window.location.href = '/'
+          })
+      } else {
+      }
+    },
+  },
+}
+</script>
+
+<style scope>
+@import '@/assets/css/custom.css';
+.container {
+  margin: 0 auto;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+</style>

plugins/axios.js

+// export default function ({ $axios, app }) {
+//   $axios.onError((error) => {
+//     const statusCode = error.response.status
+
+//     // refresh token if it expired
+//     if (statusCode === 403) {
+//       const originalRequest = error.config
+//       if (!originalRequest._retry) {
+//         originalRequest._retry = true
+//         return $axios
+//           .post('accounts/refresh-token/', {
+//             refresh: app.$auth.getRefreshToken('local'),
+//           })
+//           .then((response) => {
+//             originalRequest.headers['Authorization'] =
+//               'Bearer ' + response.data.access
+//             app.$auth.setToken('local', 'Bearer ' + response.data.access)
+//             return $axios(originalRequest)
+//           })
+//       }
+//     }
+
+//     return Promise.reject(error)
+//   })
+// }

store/index.js

+// export const getters = {
+//   isAuthenticated(state) {
+//     return state.auth.loggedIn
+//   },
+
+//   loggedInUser(state) {
+//     return state.auth.user
+//   },
+// }