:recycle: fix up more pug and postcss formatting

frontend/src/router.js

@@ -1,52 +0,0 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import home from './views/home.vue'
-
-const routes = [
-  {
-    path: '/',
-    component: home,
-    name: 'home',
-    meta: { requiresAuth: true, requiresProfile: true }
-  },
-  {
-    path: '/profile',
-    component: () => import(/* webpackChunkName: "profile" */ './views/Profile.vue'),
-    name: 'profile',
-    meta: { requiresAuth: true }
-  },
-  {
-    path: '/friends',
-    component: () => import(/* webpackChunkName: "friends" */ './views/Friends.vue'),
-    name: 'friends',
-    meta: { requiresAuth: true, requiresProfile: true }
-  },
-  {
-    path: '/chats/:uid',
-    component: () => import(/* webpackChunkName: "chats" */ './views/Chats.vue'),
-    name: 'chat',
-    props: true,
-    meta: { requiresAuth: true, requiresProfile: true }
-  },
-  {
-    path: '/login',
-    component: () => import(/* webpackChunkName: "login" */ './views/Login.vue'),
-    name: 'login'
-  },
-  {
-    path: '/register',
-    component: () => import(/* webpackChunkName: "register" */ './views/Register.vue'),
-    name: 'register'
-  },
-  {
-    path: '/forget',
-    component: () => import(/* webpackChunkName: "forget" */ './views/Forget.vue'),
-    name: 'forget'
-  },
-]
-
-const router = createRouter({
-  history: createWebHistory(),
-  routes,
-})
-
-export default router

frontend/src/router/index.js

@@ -1,76 +1,58 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import home from '../views/home.vue'
+import Profile from '../views/Profile.vue'
+import Friends from '../views/Friends.vue'
+import Chats from '../views/Chats.vue'
+import Login from '../views/Login.vue'
+import Register from '../views/Register.vue'
+import Forget from '../views/Forget.vue'
 
 const routes = [
-    {
-        path: '/',
-        name: 'Home',
-        component: home,
-    },
-    {
-        path: '/account',
-        name: 'Account',
-        // route level code-splitting
-        // this generates a separate chunk (about.[hash].js) for this route
-        // which is lazy-loaded when the route is visited.
-        component: () =>
-            import(/* webpackChunkName: "about" */ '../views/account.vue'),
-    },
-    {
-        path: '/editprofile',
-        name: 'EditProfile',
-        component: () =>
-            import(
-                /* webpackChunkName: "AcctSettings" */ '../views/EditProfile.vue'
-            ),
-    },
-    {
-        path: '/EditSurvey',
-        name: 'EditSurvey',
-        component: () =>
-            import(
-                /* webpackChunkName: "AcctSettings" */ '../views/EditSurvey.vue'
-            ),
-    },
-    {
-        path: '/acctsettings',
-        name: 'AcctSettings',
-        component: () =>
-            import(
-                /* webpackChunkName: "AcctSettings" */ '../views/AcctSettings.vue'
-            ),
-    },
-    {
-        path: '/searchsettings',
-        name: 'SearchSettings',
-        component: () =>
-            import(
-                /* webpackChunkName: "AcctSettings" */ '../views/SearchSettings.vue'
-            ),
-    },
-    {
-        path: '/match',
-        name: 'Match',
-        // route level code-splitting
-        // this generates a separate chunk (about.[hash].js) for this route
-        // which is lazy-loaded when the route is visited.
-        component: () =>
-            import(/* webpackChunkName: "about" */ '../views/Match.vue'),
-    },
-    {
-        path: '/chat',
-        name: 'Chat',
-        // route level code-splitting
-        // this generates a separate chunk (about.[hash].js) for this route
-        // which is lazy-loaded when the route is visited.
-        component: () =>
-            import(/* webpackChunkName: "about" */ '../views/Chat.vue'),
-    },
+  {
+    path: '/',
+    component: home,
+    name: 'home',
+    meta: { requiresAuth: true, requiresProfile: true }
+  },
+  {
+    path: '/profile',
+    component: Profile,
+    name: 'profile',
+    meta: { requiresAuth: true }
+  },
+  {
+    path: '/friends',
+    component: Friends,
+    name: 'friends',
+    meta: { requiresAuth: true, requiresProfile: true }
+  },
+  {
+    path: '/chats/:uid',
+    component: Chats,
+    name: `chat`,
+    props: true,
+    meta: { requiresAuth: true, requiresProfile: true }
+  },
+  {
+    path: `/login`,
+    component: Login,
+    name: `login`
+  },
+  {
+    path: `/register`,
+    component: Register,
+    name: `register`
+  },
+  {
+    path: `/forget`,
+    component: Forget,
+    name: 'forget'
+  },
 ]
 
 const router = createRouter({
-    history: createWebHistory(),
-    routes,
+  history: createWebHistory(),
+  routes,
 })
 
-export default router
+export default router

frontend/src/views/Forget.vue

@@ -1,21 +1,16 @@
-<template>
-  <div class="forget__box">
-    <h2>Forget</h2>
-    <form @submit.prevent="onSubmit">
-      <div class="user__box">
-        <input type="email" required v-model="form.email" />
-        <label>Email</label>
-      </div>
-      <button type="submit">
-        <span></span>
-        <span></span>
-        <span></span>
-        <span></span>
-        {{ requesting ? "Log..." : "Send" }}
-      </button>
-      <router-link to="/login">Login</router-link>
-    </form>
-  </div>
+<template lang="pug">
+.forget__box
+  h2 Forget
+  form(@submit.prevent="onSubmit")
+    .user__box
+      input(type="email" required="" v-model="form.email")
+      label Email
+    button(type="submit")
+      span
+      span
+      span
+      span {{ requesting ? "Log..." : "Send" }}
+    router-link(to="/login") Login
 </template>
 
 <script>
@@ -25,188 +20,172 @@ export default {
     requesting: false,
     form: {
       email: "",
-    },
+    }
   }),
   methods: {
     onSubmit() {
-      this.requesting = true;
-      // auth
-      //   .sendPasswordResetEmail(this.form.email)
-      //   .then(() => this.$router.push({ name: "login" }))
-      //   .catch((error) => console.log(error))
-      //   .finally(() => (this.requesting = false));
-    },
-  },
-};
+      this.requesting = true
+    }
+  }
+}
 </script>
 
-<style>
-html {
-  background-color: #e90d77;
-}
-.content {
-  background: none;
-}
-.wrapper {
-  position: unset;
-}
-.forget__box {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 300px;
-  padding: 40px;
-  transform: translate(-50%, -50%);
-  background: rgba(0, 0, 0, 0.5);
-  box-sizing: border-box;
-  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
-  border-radius: 10px;
-}
-.forget__box h2 {
-  margin: 0 0 30px;
-  padding: 0;
-  color: #fff;
-  text-align: center;
-}
-.forget__box .user__box {
-  position: relative;
-}
-.forget__box .user__box input {
-  width: 100%;
-  padding: 10px 0;
-  font-size: 16px;
-  color: #fff;
-  margin-bottom: 30px;
-  border: none;
-  border-bottom: 1px solid #fff;
-  outline: none;
-  background: transparent;
-}
-.forget__box .user__box label {
-  position: absolute;
-  top: 0;
-  left: 0;
-  padding: 10px 0;
-  font-size: 16px;
-  color: #fff;
-  pointer-events: none;
-  transition: 0.5s;
-}
+<style lang="postcss">
+html
+  background-color: #e90d77
+
+.content
+  background: none
+
+.wrapper
+  position: unset
+
+.forget__box
+  position: absolute
+  top: 50%
+  left: 50%
+  width: 300px
+  padding: 40px
+  transform: translate(-50%, -50%)
+  background: rgba(0, 0, 0, 0.5)
+  box-sizing: border-box
+  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6)
+  border-radius: 10px
+
+.forget__box h2
+  margin: 0 0 30px
+  padding: 0
+  color: #fff
+  text-align: center
+
+.forget__box .user__box
+  position: relative
+
+.forget__box .user__box input
+  width: 100%
+  padding: 10px 0
+  font-size: 16px
+  color: #fff
+  margin-bottom: 30px
+  border: none
+  border-bottom: 1px solid #fff
+  outline: none
+  background: transparent
+
+.forget__box .user__box label
+  position: absolute
+  top: 0
+  left: 0
+  padding: 10px 0
+  font-size: 16px
+  color: #fff
+  pointer-events: none
+  transition: 0.5s
+
 .forget__box .user__box input:focus ~ label,
-.forget__box .user__box input:valid ~ label {
-  top: -20px;
-  left: 0;
-  color: #e90d77;
-  font-size: 12px;
-}
-.forget__box form button {
-  position: relative;
-  display: inline-block;
-  padding: 10px 20px;
-  color: #e90d77;
-  font-size: 16px;
-  text-decoration: none;
-  text-transform: uppercase;
-  overflow: hidden;
-  transition: 0.5s;
-  margin-top: 40px;
-  letter-spacing: 4px;
-  background: none;
-  border: none;
-}
-.forget__box button:hover {
-  background: #e90d77;
-  color: #fff;
-  border-radius: 5px;
-  box-shadow: 0 0 5px #e90d77, 0 0 25px #e90d77, 0 0 50px #e90d77,
-    0 0 100px #e90d77;
-}
-.forget__box button span {
-  position: absolute;
-  display: block;
-}
-.forget__box button span:nth-child(1) {
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 2px;
-  background: linear-gradient(90deg, transparent, #e90d77);
-  animation: btn-anim1 1s linear infinite;
-}
-.forget__box form a {
-  color: white;
-    text-decoration: none;
-    margin-left: 5px;
-    padding: 10px;
-}
-.forget__box form a:hover {
-  background: #e90d77;
-  color: #fff;
-  border-radius: 5px;
-  box-shadow: 0 0 5px #e90d77, 0 0 25px #e90d77, 0 0 50px #e90d77,
-    0 0 100px #e90d77;
-}
-@keyframes btn-anim1 {
-  0% {
-    left: -100%;
-  }
+.forget__box .user__box input:valid ~ label
+  top: -20px
+  left: 0
+  color: #e90d77
+  font-size: 12px
+
+.forget__box form button
+  position: relative
+  display: inline-block
+  padding: 10px 20px
+  color: #e90d77
+  font-size: 16px
+  text-decoration: none
+  text-transform: uppercase
+  overflow: hidden
+  transition: 0.5s
+  margin-top: 40px
+  letter-spacing: 4px
+  background: none
+  border: none
+
+.forget__box button:hover
+  background: #e90d77
+  color: #fff
+  border-radius: 5px
+  box-shadow: 0 0 5px #e90d77, 0 0 25px #e90d77, 0 0 50px #e90d77, 0 0 100px #e90d77
+
+.forget__box button span
+  position: absolute
+  display: block
+
+.forget__box button span:nth-child(1)
+  top: 0
+  left: -100%
+  width: 100%
+  height: 2px
+  background: linear-gradient(90deg, transparent, #e90d77)
+  animation: btn-anim1 1s linear infinite
+
+.forget__box form a
+  color: white
+  text-decoration: none
+  margin-left: 5px
+  padding: 10px
+
+.forget__box form a:hover
+  background: #e90d77
+  color: #fff
+  border-radius: 5px
+  box-shadow: 0 0 5px #e90d77, 0 0 25px #e90d77, 0 0 50px #e90d77, 0 0 100px #e90d77
+
+@keyframes btn-anim1
+  0%
+    left: -100%
   50%,
-  100% {
-    left: 100%;
-  }
-}
-.forget__box button span:nth-child(2) {
-  top: -100%;
-  right: 0;
-  width: 2px;
-  height: 100%;
-  background: linear-gradient(180deg, transparent, #e90d77);
-  animation: btn-anim2 1s linear infinite;
-  animation-delay: 0.25s;
-}
-@keyframes btn-anim2 {
-  0% {
-    top: -100%;
-  }
+  100%
+    left: 100%
+  
+.forget__box button span:nth-child(2)
+  top: -100%
+  right: 0
+  width: 2px
+  height: 100%
+  background: linear-gradient(180deg, transparent, #e90d77)
+  animation: btn-anim2 1s linear infinite
+  animation-delay: 0.25s
+
+@keyframes btn-anim2
+  0%
+    top: -100%
   50%,
-  100% {
-    top: 100%;
-  }
-}
-.forget__box button span:nth-child(3) {
-  bottom: 0;
-  right: -100%;
-  width: 100%;
-  height: 2px;
-  background: linear-gradient(270deg, transparent, #e90d77);
-  animation: btn-anim3 1s linear infinite;
-  animation-delay: 0.5s;
-}
-@keyframes btn-anim3 {
-  0% {
-    right: -100%;
-  }
+  100%
+    top: 100%
+  
+.forget__box button span:nth-child(3)
+  bottom: 0
+  right: -100%
+  width: 100%
+  height: 2px
+  background: linear-gradient(270deg, transparent, #e90d77)
+  animation: btn-anim3 1s linear infinite
+  animation-delay: 0.5s
+
+@keyframes btn-anim3
+  0%
+    right: -100%
   50%,
-  100% {
-    right: 100%;
-  }
-}
-.forget__box a span:nth-child(4) {
-  bottom: -100%;
-  left: 0;
-  width: 2px;
-  height: 100%;
-  background: linear-gradient(360deg, transparent, #e90d77);
-  animation: btn-anim4 1s linear infinite;
-  animation-delay: 0.75s;
-}
-@keyframes btn-anim4 {
-  0% {
-    bottom: -100%;
-  }
+  100%
+    right: 100%
+  
+.forget__box a span:nth-child(4)
+  bottom: -100%
+  left: 0
+  width: 2px
+  height: 100%
+  background: linear-gradient(360deg, transparent, #e90d77)
+  animation: btn-anim4 1s linear infinite
+  animation-delay: 0.75s
+
+@keyframes btn-anim4
+  0%
+    bottom: -100%
   50%,
-  100% {
-    bottom: 100%;
-  }
-}
+  100%
+    bottom: 100%
 </style>

frontend/src/views/Login.vue

@@ -16,8 +16,7 @@
       span
       span
       span
-      span
-        {{ requesting ? "Log..." : "Login" }}
+      span {{ requesting ? "Log..." : "Login" }}
     router-link.links(to="/register") Register
 </template>
 

frontend/src/views/Profile.vue

@@ -1,52 +1,25 @@
-<template>
-  <div class="login__box">
-    <h2>Profile</h2>
-    <form @submit.prevent="onSubmit">
-      <div class="user__box">
-        <input type="text" required minlength="6" v-model="form.fullname" />
-        <label>Fullname</label>
-      </div>
-
-      <div class="user__box">
-        <input type="text" required minlength="10" v-model="form.avatar" />
-        <label>Image URL</label>
-      </div>
-
-      <div class="user__box">
-        <input
-          type="number"
-          required
-          v-model="form.age"
-          min="18"
-          max="60"
-          minlength="2"
-          maxlength="3"
-        />
-        <label>Age</label>
-      </div>
-
-      <div class="user__box">
-        <input
-          type="text"
-          required
-          minlength="10"
-          maxlength="50"
-          v-model="form.metadata"
-        />
-        <label>Description</label>
-      </div>
-
-      <button type="submit">
-        <span></span>
-        <span></span>
-        <span></span>
-        <span></span>
-        {{ requesting ? "Log..." : "Update" }}
-      </button>
-
-      <router-link class="links" to="/">Back</router-link>
-    </form>
-  </div>
+<template lang="pug">
+.login__box
+  h2 Profile
+  form(@submit.prevent="onSubmit")
+    .user__box
+      input(type="text" required="" minlength="6" v-model="form.fullname")
+      label Fullname
+    .user__box
+      input(type="text" required="" minlength="10" v-model="form.avatar")
+      label Image URL
+    .user__box
+      input(type="number" required="" v-model="form.age" min="18" max="60" minlength="2" maxlength="3")
+      label Age
+    .user__box
+      input(type="text" required="" minlength="10" maxlength="50" v-model="form.metadata")
+      label Description
+    button(type="submit")
+      span
+      span
+      span
+      span {{ requesting ? "Log..." : "Update" }}
+    router-link.links(to="/") Back
 </template>
 
 <script>

frontend/src/views/Register.vue

@@ -17,8 +17,7 @@
       span
       span
       span
-      span
-        {{ requesting ? "Log..." : "Register" }}
+      span {{ requesting ? "Log..." : "Register" }}
     router-link.links(to="/login") Login
 </template>
 
@@ -42,7 +41,7 @@ export default {
 }
 </script>
 
-<style>
+<style lang="postcss">
 html
   background-color: #e90d77
 
@@ -202,7 +201,7 @@ html
 @keyframes btn-anim4
   0%
     bottom: -100%
-  50%, 100%
+  50%,
+  100%
     bottom: 100%
-  
 </style>