prettier

frontend/src/App.vue

@@ -5,8 +5,8 @@ main
 
 <script>
 export default {
-  name: "app",
-  components: {}
+    name: 'app',
+    components: {},
 }
 </script>
 

frontend/src/components/Messages.vue

@@ -1,51 +1,51 @@
 <template>
-  <div class="sidebar__messages">
-    <h4 class="message__title">{{ title }}</h4>
-    <router-link
-      :to="'/chats/' + user.uid"
-      v-for="user in users"
-      :key="user.uid"
-      :class="[uid == user.uid ? 'active' : '',  'sidebar__message']"
-    >
-      <div class="message__left">
-        <p> avatar goes here
-      </div>
-      <div class="message__right">
-        <h4 class="message__name">{{ user.name }}</h4>
-        <p class="message__content">
-          {{ user.metadata.rawMetadata || "Hello I'm using tinder!" }}
-        </p>
-      </div>
-    </router-link>
-  </div>
+    <div class="sidebar__messages">
+        <h4 class="message__title">{{ title }}</h4>
+        <router-link
+            :to="'/chats/' + user.uid"
+            v-for="user in users"
+            :key="user.uid"
+            :class="[uid == user.uid ? 'active' : '', 'sidebar__message']"
+        >
+            <div class="message__left">
+                <p>avatar goes here</p>
+            </div>
+
+            <div class="message__right">
+                <h4 class="message__name">{{ user.name }}</h4>
+                <p class="message__content">
+                    {{ user.metadata.rawMetadata || "Hello I'm using tinder!" }}
+                </p>
+            </div>
+        </router-link>
+    </div>
 </template>
 
 <script>
 export default {
-  name: "messages",
-  props: {
-    title: { type: String, default: "Messages" },
-    users: {
-      type: [Object, Array],
-      default: function () {
-        return [
-          {
-            uid: "1",
-            name: "Fullname",
-            avatar:
-              "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/newborn-baby-boy-sleeping-peacefully-wearing-knit-royalty-free-image-1589459736.jpg?crop=0.669xw:1.00xh;0.228xw,0&resize=640:*",
-            metadata: { age: "21", rawMetadata: "Some Text Here!" },
-          },
-        ];
-      },
+    name: 'messages',
+    props: {
+        title: { type: String, default: 'Messages' },
+        users: {
+            type: [Object, Array],
+            default: function () {
+                return [
+                    {
+                        uid: '1',
+                        name: 'Fullname',
+                        avatar: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/newborn-baby-boy-sleeping-peacefully-wearing-knit-royalty-free-image-1589459736.jpg?crop=0.669xw:1.00xh;0.228xw,0&resize=640:*',
+                        metadata: { age: '21', rawMetadata: 'Some Text Here!' },
+                    },
+                ]
+            },
+        },
     },
-  },
-  computed: {
-    uid() {
-      return this.$route.params.uid;
+    computed: {
+        uid() {
+            return this.$route.params.uid
+        },
     },
-  },
-};
+}
 </script>
 
 <style lang="postcss">
@@ -87,5 +87,4 @@ export default {
 
 .message__name
   margin-bottom: 10px
-
-</style>
+</style>

frontend/src/components/TinderCard.vue

@@ -1,93 +1,89 @@
 <template>
-  <div class="tinder__card">
-    <div class="tinder__card__container">
-      <div
-        v-for="user in users"
-        :key="user.id"
-        @throwout="swipped(user)"
-        :config="config"
-        class="swipe"
-      >
-        <div
-          class="card"
-          :style="{ 'background-image': `url(${user.avatar})` }"
-        >
-          <div class="card__content">
-            <h3>{{ user.name }}</h3>
-          </div>
-        </div>
-      </div>
+    <div class="tinder__card">
+        <div class="tinder__card__container">
+            <div
+                v-for="user in users"
+                :key="user.id"
+                @throwout="swipped(user)"
+                :config="config"
+                class="swipe"
+            >
+                <div
+                    class="card"
+                    :style="{ 'background-image': `url(${user.avatar})` }"
+                >
+                    <div class="card__content">
+                        <h3>{{ user.name }}</h3>
+                    </div>
+                </div>
+            </div>
 
-      <div class="swipe__icons">
-        // Icons
-      </div>
+            <div class="swipe__icons">// Icons</div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
 export default {
-  name: "tinder-cards",
-  props: {
-    users: {
-      type: [Object, Array],
-      default: function () {
-        return [
-          {
-            uid: "1",
-            name: "Fullname",
-            avatar:
-              "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/newborn-baby-boy-sleeping-peacefully-wearing-knit-royalty-free-image-1589459736.jpg?crop=0.669xw:1.00xh;0.228xw,0&resize=640:*",
-            metadata: { age: "21", rawMetadata: "Some Text Here!" },
-          },
-        ];
-      },
-    },
-    uid: {
-      type: String
-    }
-  },
-  data() {
-    return {
-      config: {
-        // allowedDirections: [VueSwing.Direction.LEFT, VueSwing.Direction.RIGHT],
-        minThrowOutDistance: 250,
-        maxThrowOutDistance: 300,
-      },
-      favorites: [],
-      requests: [],
-    };
-  },
-  created() {
-    this.getUser();
-  },
-  components: {},
-  methods: {
-    logOut() {
-    },
-    reject() {
-      this.swipped(this.currentCard);
+    name: 'tinder-cards',
+    props: {
+        users: {
+            type: [Object, Array],
+            default: function () {
+                return [
+                    {
+                        uid: '1',
+                        name: 'Fullname',
+                        avatar: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/newborn-baby-boy-sleeping-peacefully-wearing-knit-royalty-free-image-1589459736.jpg?crop=0.669xw:1.00xh;0.228xw,0&resize=640:*',
+                        metadata: { age: '21', rawMetadata: 'Some Text Here!' },
+                    },
+                ]
+            },
+        },
+        uid: {
+            type: String,
+        },
     },
-    swipped(user) {
-      const index = this.users.findIndex((u) => u.uid == user.uid);
-      this.users.splice(index, 1);
-      user.id = Date.now() + (Math.random() * 100000).toFixed();
-      this.users.unshift({ ...user });
+    data() {
+        return {
+            config: {
+                // allowedDirections: [VueSwing.Direction.LEFT, VueSwing.Direction.RIGHT],
+                minThrowOutDistance: 250,
+                maxThrowOutDistance: 300,
+            },
+            favorites: [],
+            requests: [],
+        }
     },
-    getUser() {
-      return 
+    created() {
+        this.getUser()
     },
-    onRequest() {
-      const data = { ...this.currentCard };
-      return
+    components: {},
+    methods: {
+        logOut() {},
+        reject() {
+            this.swipped(this.currentCard)
+        },
+        swipped(user) {
+            const index = this.users.findIndex(u => u.uid == user.uid)
+            this.users.splice(index, 1)
+            user.id = Date.now() + (Math.random() * 100000).toFixed()
+            this.users.unshift({ ...user })
+        },
+        getUser() {
+            return
+        },
+        onRequest() {
+            const data = { ...this.currentCard }
+            return
+        },
     },
-  },
-  computed: {
-    currentCard() {
-      return this.users[this.users.length - 1];
+    computed: {
+        currentCard() {
+            return this.users[this.users.length - 1]
+        },
     },
-  },
-};
+}
 </script>
 <style lang="postcss">
 .card
@@ -152,4 +148,4 @@ export default {
 @media only screen and (min-width: 768px)
   .swipe__icon__power
     display: none
-</style>
+</style>

frontend/src/main.js

@@ -1,24 +1,24 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-import router from './router' 
+import router from './router'
 
 router.beforeEach((to, from, next) => {
-  const requiresAuth = false
-  const requiresProfile = true
+    const requiresAuth = false
+    const requiresProfile = true
 
-  if (requiresAuth) {
-    console.log('You are not authorized to access this area.')
-    next('login')
-  } else {
-    next()
-  }
+    if (requiresAuth) {
+        console.log('You are not authorized to access this area.')
+        next('login')
+    } else {
+        next()
+    }
 
-  // if (requiresProfile) {
-  //   console.log('You must first complete your profile.')
-  //   next('profile')
-  // } else {
-  //   next()
-  // }
+    // if (requiresProfile) {
+    //   console.log('You must first complete your profile.')
+    //   next('profile')
+    // } else {
+    //   next()
+    // }
 })
 
-createApp(App).use(router).mount('#app')
+createApp(App).use(router).mount('#app')

frontend/src/router/index.js

@@ -8,51 +8,51 @@ import Register from '../views/Register.vue'
 import Forget from '../views/Forget.vue'
 
 const routes = [
-  {
-    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'
-  },
+    {
+        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/shared/MainHeader.vue

@@ -1,22 +1,22 @@
 <template>
-  <div id="main-header">
-    <router-link class="header__icon mobile--only" to="/friends">
-      <p>friends</p>
-    </router-link>
-    
-    <router-link class="header__icon" to="/">
-      <p>home</p>
-    </router-link>
+    <div id="main-header">
+        <router-link class="header__icon mobile--only" to="/friends">
+            <p>friends</p>
+        </router-link>
 
-    <router-link class="header__icon mobile--only" to="/profile">
-      <p>profile</p>
-    </router-link>
-  </div>
+        <router-link class="header__icon" to="/">
+            <p>home</p>
+        </router-link>
+
+        <router-link class="header__icon mobile--only" to="/profile">
+            <p>profile</p>
+        </router-link>
+    </div>
 </template>
 
 <script>
 export default {
-  name: "main-header",
+    name: 'main-header',
 }
 </script>
 
@@ -33,4 +33,4 @@ export default {
   .mobile--only
     /* display: none */
     display: block
-</style>
+</style>

frontend/src/shared/Sidebar.vue

@@ -1,25 +1,38 @@
 <template lang="pug">
 .sidebar__messages
-  h4.message__title {{ title }}
-  router-link(:to="`/chats/${user.uid}`" v-for="user in users" :key="user.uid" :class="[uid == user.uid ? 'active' : '',  'sidebar__message']")
-    .message__left
-      p avatar and status
-    .message__right
-      h4.message__name {{ user.name }}
-      p.message__content {{ user.metadata.rawMetadata || "Hello!" }}
-</template> 
+    h4.message__title {{ title }}
+    router-link(
+        :class='[uid == user.uid ? "active" : "", "sidebar__message"]'
+        :key='user.uid'
+        :to='`/chats/${user.uid}`'
+        v-for='user in users'
+    )
+        .message__left
+            p avatar and status
+        .message__right
+            h4.message__name {{ user.name }}
+            p.message__content {{ user.metadata.rawMetadata || "Hello!" }}
+</template>
 
 <script>
 export default {
-  data() {
-    return {
-      title: 'i am a title',
-      uid: 111,
-      users: [
-        { name:'sample', uid: 111, metadata: { rawMetadata: 'rawmeta' } },
-        { name:'usample', uid: 112, metadata: { rawMetadata: 'morerawmeta' } }
-      ]
-    }
-  }
+    data() {
+        return {
+            title: 'i am a title',
+            uid: 111,
+            users: [
+                {
+                    name: 'sample',
+                    uid: 111,
+                    metadata: { rawMetadata: 'rawmeta' },
+                },
+                {
+                    name: 'usample',
+                    uid: 112,
+                    metadata: { rawMetadata: 'morerawmeta' },
+                },
+            ],
+        }
+    },
 }
 </script>

frontend/src/views/Chats.vue

@@ -1,116 +1,137 @@
 <template lang="pug">
 #chats
-  .content-wrapper
-    .content
-      section.msger
-        header.msger-header
-          .msger-header-title
-            .msger__avatar
-              p | avatar goes here
-            .msger__avatar__details
-              p {{ user.name }}
-              small {{ user.status }}
-        main.msger-chat(ref="container")
-          .msg-list(v-for="message in messages" :key="message.sentAt")
-            div(v-if="typeof message.text != 'undefined'")
-              .msg.left-msg(v-if="message.receiverId !== user.uid")
-                .msg--wrapper
-                  .bubble--wrapper
-                    p | avatar goes here
-                    .msg-bubble
-                      .msg-info
-                        .msg-info-name {{ user.name }}
-                      .msg-text {{ message.text }}
-                  .msg-info-time {{ toReadableString(message.sentAt) }}
-              .msg.right-msg(v-else="")
-                .msg--wrapper
-                  .bubble--wrapper
-                    p | avatar goes here
-                    .msg-bubble
-                      .msg-info
-                        .msg-info-name {{ message.sender.name }}
-                      .msg-text {{ message.text }}
-                  .msg-info-time
-                    img.message__timestamp__img(v-if="message.sentAt && !message.deliveredAt && !message.readAt" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAFo9M/3AAAAAXNSR0IArs4c6QAAARdJREFUOBFjYEAGIiIiUQg+kBeB4EFZYmJiVnDB////M8I5WBmSkpImIAkmmCxQy0MYmwFogxGcQxYDaEIaTCPcKSA3/vv3T56JiYn11atXi2AKBopGdiQLuiNERUU9WVlZD8HEwSElLi4eBZTgcXBwYAGGmOyzZ89uwBTAvQk19p+AgMDiO3fu/IQpQKGBptigCNCFw0ysLSAPfvv2zZ+bm1vo69evj2H64OkFJoCNVlFR4bty5UoCUI6Xj4/vLDY1YDEFBQUOkE3ICiQkJBRAIQhMLAHY0jE8mEGagPFh8ffvXz0g8xMjI+MWFhYWjd+/fxsB2ddev359BNlgGBvFAJgg0DZrYNLUBvHZ2NgOIUcsTM3goQFXzEj1uzh+EwAAAABJRU5ErkJggg==" alt="time")
-                    img.message__timestamp__img(v-else-if="message.sentAt && message.deliveredAt && !message.readAt" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAFo9M/3AAAAAXNSR0IArs4c6QAAAWNJREFUOBFjYEAGEhISosh8BgaQCCNMSFJS0gTGZhARETECYbgAMgOuRUxMzAokwQhUGgGkmYD435s3b1aABBn+///PCMJgDskE0Mg0kCYYDTYGZOG/f//kmZiYWIFGr2NkZAx69erVIpJNp5IGmONgNIpfRUVFPVlZWe//+fNHnoWF5eGzZ89uMImLi0cBJXgcHBxYgD6Qtba2vg3yEUgS5CiwCVDj/gkICCz++PFjND8//9I7d+78RHE10BQbkACMRpGkKYeZkOkgz3379s2fm5tb6OvXr4/R+SjBhG6YiooK34cPH8KAcfyLj49vJVCeHRgIocC4/g3iwwNCQUGBA2QysgHAFK0ACj1gQgkApT0pKSk5ZD5MLdgFwLiw+Pv3rx5Q8BPQ9C3ASNL4/fu3EZB97fXr10eAIWsINMQUxodpBtEoXgDaZg2MRG2QBBsb2yFQZAINdwEargTjg+QGFwAAd+eJSUtUxzMAAAAASUVORK5CYII=" alt="time")
-                    img.message__timestamp__img(v-else="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAFo9M/3AAAAAXNSR0IArs4c6QAAAWdJREFUOBHNUrtKA1EQPXeNRUDxgVqLQj7AjWjAwh8QKyvbuIIgVhYWNhYWdhFBkugPpLOwt7CwSEQLrTQI1roB44Os7nhm4YZdCyWg4MDsmTOzM3dm7gXiMlUWN84B9RjrcouyBQOJOMmmqg0mMJ5S0IjhrzfELmpQWzYZdUJEjGpEOv6wZNSKxagMScEYzDHU63RjIgxwzvOGO67+Swm2OYupeN1sSY650DzxSFFjxi3JXcpgxunDQ8tHc2wA6bqPV06h24NT88zoe4h7Bv10D4bqDTwqajAh2aLsqcNiIvin5McbzVUkHTRwwms642BrX/m3BbjLcbZ/RX3i4JnWC/pDwTWLNZWfLhrf0flyBzKoldW2ki3LPG19jBdVDyNvz5j+CFFn8qVyTdZ/ow64uR2+sXXy25SDWa7do62Pfp9tr0yWZIMnb1tObEtiBN7wLk9Y1ahxkK8umUOOUSFdsLyd+W+MTyDvnh60pF/jAAAAAElFTkSuQmCC" alt="time")
-                    p | {{ toReadableString(message.sentAt) }}
-          .spacer
-        form.msger-inputarea(@submit.prevent="sendMessage()")
-          input.msger-input(type="text" placeholder="Enter your message..." v-model.trim="message")
-          button.msger-send-btn(type="submit") Send
-  p sidebar goes here
+    .content-wrapper
+        .content
+            section.msger
+                header.msger-header
+                    .msger-header-title
+                        .msger__avatar
+                            p | avatar goes here
+                        .msger__avatar__details
+                            p {{ user.name }}
+                            small {{ user.status }}
+                main.msger-chat(ref='container')
+                    .msg-list(
+                        :key='message.sentAt'
+                        v-for='message in messages'
+                    )
+                        div(v-if='typeof message.text != "undefined"')
+                            .msg.left-msg(
+                                v-if='message.receiverId !== user.uid'
+                            )
+                                .msg--wrapper
+                                    .bubble--wrapper
+                                        p | avatar goes here
+                                        .msg-bubble
+                                            .msg-info
+                                                .msg-info-name {{ user.name }}
+                                            .msg-text {{ message.text }}
+                                    .msg-info-time {{ toReadableString(message.sentAt) }}
+                            .msg.right-msg(v-else='')
+                                .msg--wrapper
+                                    .bubble--wrapper
+                                        p | avatar goes here
+                                        .msg-bubble
+                                            .msg-info
+                                                .msg-info-name {{ message.sender.name }}
+                                            .msg-text {{ message.text }}
+                                    .msg-info-time
+                                        img.message__timestamp__img(
+                                            alt='time'
+                                            src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAFo9M/3AAAAAXNSR0IArs4c6QAAARdJREFUOBFjYEAGIiIiUQg+kBeB4EFZYmJiVnDB////M8I5WBmSkpImIAkmmCxQy0MYmwFogxGcQxYDaEIaTCPcKSA3/vv3T56JiYn11atXi2AKBopGdiQLuiNERUU9WVlZD8HEwSElLi4eBZTgcXBwYAGGmOyzZ89uwBTAvQk19p+AgMDiO3fu/IQpQKGBptigCNCFw0ysLSAPfvv2zZ+bm1vo69evj2H64OkFJoCNVlFR4bty5UoCUI6Xj4/vLDY1YDEFBQUOkE3ICiQkJBRAIQhMLAHY0jE8mEGagPFh8ffvXz0g8xMjI+MWFhYWjd+/fxsB2ddev359BNlgGBvFAJgg0DZrYNLUBvHZ2NgOIUcsTM3goQFXzEj1uzh+EwAAAABJRU5ErkJggg=='
+                                            v-if='message.sentAt && !message.deliveredAt && !message.readAt'
+                                        )
+                                        img.message__timestamp__img(
+                                            alt='time'
+                                            src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAFo9M/3AAAAAXNSR0IArs4c6QAAAWNJREFUOBFjYEAGEhISosh8BgaQCCNMSFJS0gTGZhARETECYbgAMgOuRUxMzAokwQhUGgGkmYD435s3b1aABBn+///PCMJgDskE0Mg0kCYYDTYGZOG/f//kmZiYWIFGr2NkZAx69erVIpJNp5IGmONgNIpfRUVFPVlZWe//+fNHnoWF5eGzZ89uMImLi0cBJXgcHBxYgD6Qtba2vg3yEUgS5CiwCVDj/gkICCz++PFjND8//9I7d+78RHE10BQbkACMRpGkKYeZkOkgz3379s2fm5tb6OvXr4/R+SjBhG6YiooK34cPH8KAcfyLj49vJVCeHRgIocC4/g3iwwNCQUGBA2QysgHAFK0ACj1gQgkApT0pKSk5ZD5MLdgFwLiw+Pv3rx5Q8BPQ9C3ASNL4/fu3EZB97fXr10eAIWsINMQUxodpBtEoXgDaZg2MRG2QBBsb2yFQZAINdwEargTjg+QGFwAAd+eJSUtUxzMAAAAASUVORK5CYII='
+                                            v-else-if='message.sentAt && message.deliveredAt && !message.readAt'
+                                        )
+                                        img.message__timestamp__img(
+                                            alt='time'
+                                            src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAFo9M/3AAAAAXNSR0IArs4c6QAAAWdJREFUOBHNUrtKA1EQPXeNRUDxgVqLQj7AjWjAwh8QKyvbuIIgVhYWNhYWdhFBkugPpLOwt7CwSEQLrTQI1roB44Os7nhm4YZdCyWg4MDsmTOzM3dm7gXiMlUWN84B9RjrcouyBQOJOMmmqg0mMJ5S0IjhrzfELmpQWzYZdUJEjGpEOv6wZNSKxagMScEYzDHU63RjIgxwzvOGO67+Swm2OYupeN1sSY650DzxSFFjxi3JXcpgxunDQ8tHc2wA6bqPV06h24NT88zoe4h7Bv10D4bqDTwqajAh2aLsqcNiIvin5McbzVUkHTRwwms642BrX/m3BbjLcbZ/RX3i4JnWC/pDwTWLNZWfLhrf0flyBzKoldW2ki3LPG19jBdVDyNvz5j+CFFn8qVyTdZ/ow64uR2+sXXy25SDWa7do62Pfp9tr0yWZIMnb1tObEtiBN7wLk9Y1ahxkK8umUOOUSFdsLyd+W+MTyDvnh60pF/jAAAAAElFTkSuQmCC'
+                                            v-else=''
+                                        )
+                                        p | {{ toReadableString(message.sentAt) }}
+                    .spacer
+                form.msger-inputarea(@submit.prevent='sendMessage()')
+                    input.msger-input(
+                        placeholder='Enter your message...'
+                        type='text'
+                        v-model.trim='message'
+                    )
+                    button.msger-send-btn(type='submit') Send
+    p sidebar goes here
 </template>
 
 <script>
 export default {
-  name: "chats",
-  props: {
-    uid: {
-      type: String,
-      required: true,
+    name: 'chats',
+    props: {
+        uid: {
+            type: String,
+            required: true,
+        },
     },
-  },
-  data() {
-    return {
-      messages: [],
-      message: "",
-      user: {},
-    };
-  },
-  components: {},
-  created() {
-    this.getMessages()
-    this.getUser()
-    this.listenForMessage()
-  },
-  destroyed() {
-    CometChat.removeMessageListener(this.uid)
-  },
-  updated() {
-    this.scrollToEnd()
-  },
-  methods: {
-    getUser() {
-      const uid = this.uid;
-      const user = {uid}
-      this.user = user
+    data() {
+        return {
+            messages: [],
+            message: '',
+            user: {},
+        }
     },
-    getMessages() {
-      const limit = 50;
-      this.messages = []
+    components: {},
+    created() {
+        this.getMessages()
+        this.getUser()
+        this.listenForMessage()
     },
-    sendMessage() {
-      const receiverID = this.uid;
-      const messageText = this.message;
-      const receiverType = 'USER'
-      const textMessage = { receiverID, messageText, receiverType}
-      // Send message somewhere
+    destroyed() {
+        CometChat.removeMessageListener(this.uid)
     },
-    listenForMessage() {
-      const listenerID = this.uid;
-      // Websocket listener
+    updated() {
+        this.scrollToEnd()
     },
-    scrollToEnd () {
-      const elmnt = this.$refs.container;
-      elmnt.scrollTop = elmnt.scrollHeight;
+    methods: {
+        getUser() {
+            const uid = this.uid
+            const user = { uid }
+            this.user = user
+        },
+        getMessages() {
+            const limit = 50
+            this.messages = []
+        },
+        sendMessage() {
+            const receiverID = this.uid
+            const messageText = this.message
+            const receiverType = 'USER'
+            const textMessage = { receiverID, messageText, receiverType }
+            // Send message somewhere
+        },
+        listenForMessage() {
+            const listenerID = this.uid
+            // Websocket listener
+        },
+        scrollToEnd() {
+            const elmnt = this.$refs.container
+            elmnt.scrollTop = elmnt.scrollHeight
+        },
+        toReadableString(time) {
+            if (time < 0) time = 0
+            let hrs = ~~((time / 3600) % 24),
+                mins = ~~((time % 3600) / 60),
+                timeType = hrs > 11 ? 'PM' : 'AM'
+            if (hrs > 12) hrs = hrs - 12
+            if (hrs == 0) hrs = 12
+            if (mins < 10) mins = '0' + mins
+            return hrs + ':' + mins + timeType
+        },
     },
-    toReadableString(time) {
-      if (time < 0) time = 0;
-      let hrs = ~~((time / 3600) % 24),
-        mins = ~~((time % 3600) / 60),
-        timeType = hrs > 11 ? "PM" : "AM";
-      if (hrs > 12) hrs = hrs - 12;
-      if (hrs == 0) hrs = 12;
-      if (mins < 10) mins = "0" + mins;
-      return hrs + ":" + mins + timeType;
+    watch: {
+        messages() {
+            this.scrollToEnd()
+        },
     },
-  },
-  watch: {
-    messages() {
-      this.scrollToEnd()
-    }
-  }
 }
 </script>
 
@@ -311,14 +332,14 @@ body
 @media only screen and (max-width: 768px)
   .content
     margin-left: 0
-  
+
   .msger-input
     width: calc(100% - 105px)
-  
+
 :root
   --body-bg: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)
   --msger-bg: #fff
   --border: 2px solid #ddd
   --left-msg-bg: #ececec
   --right-msg-bg: #579ffb
-</style>
+</style>

frontend/src/views/Forget.vue

@@ -1,32 +1,32 @@
 <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
+    h2 Forget
+    form(@submit.prevent='onSubmit')
+        .user__box
+            input(required='' type='email' v-model='form.email')
+            label Email
+        button(type='submit')
+            span
+            span
+            span
+            span {{ requesting ? "Log..." : "Send" }}
+        router-link(to='/login') Login
 </template>
 
 <script>
 export default {
-  data: () => ({
-    valid: true,
-    requesting: false,
-    form: {
-      email: "",
-    }
-  }),
-  methods: {
-    onSubmit() {
-      this.requesting = true
-    }
-  }
+    data: () => ({
+        valid: true,
+        requesting: false,
+        form: {
+            email: '',
+        },
+    }),
+    methods: {
+        onSubmit() {
+            this.requesting = true
+        },
+    },
 }
 </script>
 
@@ -140,7 +140,7 @@ html
   50%,
   100%
     left: 100%
-  
+
 .forget__box button span:nth-child(2)
   top: -100%
   right: 0
@@ -156,7 +156,7 @@ html
   50%,
   100%
     top: 100%
-  
+
 .forget__box button span:nth-child(3)
   bottom: 0
   right: -100%
@@ -172,7 +172,7 @@ html
   50%,
   100%
     right: 100%
-  
+
 .forget__box a span:nth-child(4)
   bottom: -100%
   left: 0
@@ -188,4 +188,4 @@ html
   50%,
   100%
     bottom: 100%
-</style>
+</style>

frontend/src/views/Friends.vue

@@ -1,13 +1,13 @@
 <template>
-  <!-- <CometChatUserListWithMessages /> -->
+    <!-- <CometChatUserListWithMessages /> -->
 </template>
 
 <script>
 // import { CometChatUserListWithMessages } from "../cometchat-pro-vue-ui-kit";
 export default {
-  name: "friends",
-  components: {
-    // CometChatUserListWithMessages,
-  },
-};
-</script>
+    name: 'friends',
+    components: {
+        // CometChatUserListWithMessages,
+    },
+}
+</script>

frontend/src/views/Login.vue

@@ -1,46 +1,46 @@
 <template lang="pug">
 .login__box
-  h2 Login
-  form(@submit.prevent="onSubmit")
-    .user__box
-      input(type="email" required="" v-model="form.email")
-      label Email
-    .user__box
-      input(type="password" required="" v-model="form.password")
-      label Password
-    .user__box
-      router-link.forget__link(to="/forget") Forget Password
-    .user__box(style="margin-top: 10px; cursor: pointer;")
-      p.forget__link(@click="guestAccount") Guest Account
-    button(type="submit")
-      span
-      span
-      span
-      span {{ requesting ? "Log..." : "Login" }}
-    router-link.links(to="/register") Register
+    h2 Login
+    form(@submit.prevent='onSubmit')
+        .user__box
+            input(required='' type='email' v-model='form.email')
+            label Email
+        .user__box
+            input(required='' type='password' v-model='form.password')
+            label Password
+        .user__box
+            router-link.forget__link(to='/forget') Forget Password
+        .user__box(style='margin-top: 10px; cursor: pointer')
+            p.forget__link(@click='guestAccount') Guest Account
+        button(type='submit')
+            span
+            span
+            span
+            span {{ requesting ? "Log..." : "Login" }}
+        router-link.links(to='/register') Register
 </template>
 
 <script>
 export default {
-  data: () => ({
-    requesting: false,
-    form: {
-      email: "",
-      password: "",
+    data: () => ({
+        requesting: false,
+        form: {
+            email: '',
+            password: '',
+        },
+    }),
+    methods: {
+        onSubmit() {
+            this.requesting = true
+            // Do some auth
+        },
+        guestAccount() {
+            this.form.email = 'lucy@me.com'
+            this.form.password = '123456'
+            this.onSubmit()
+        },
     },
-  }),
-  methods: {
-    onSubmit() {
-      this.requesting = true;
-      // Do some auth
-    },
-    guestAccount() {
-      this.form.email = "lucy@me.com";
-      this.form.password = "123456";
-      this.onSubmit();
-    },
-  },
-};
+}
 </script>
 
 <style lang="postcss">
@@ -161,7 +161,7 @@ html
     left: -100%
   50%, 100%
     left: 100%
-  
+
 .login__box button span:nth-child(2)
   top: -100%
   right: 0
@@ -176,7 +176,7 @@ html
     top: -100%
   50%, 100%
     top: 100%
-  
+
 
 .login__box button span:nth-child(3)
   bottom: 0
@@ -192,7 +192,7 @@ html
     right: -100%
   50%, 100%
     right: 100%
-  
+
 
 .login__box a span:nth-child(4)
   bottom: -100%
@@ -208,5 +208,4 @@ html
     bottom: -100%
   50%, 100%
     bottom: 100%
-  
-</style>
+</style>

frontend/src/views/Match.vue

@@ -1,28 +1,31 @@
 <template lang="pug">
 .match
-  .matches
-    h1 Matches
-    .row
-      card
-        card
-          card
-  .messages
-    h2 Messages
-    .matched.active
-      icon
-        .messagecontent
-          h3 NSE Tropical
-          |                     Recently active, match now!
-    .matched
-      icon
-        .messagecontent
-          h3 Golden Communications
-          |                     Click to match now!
-    .matched
-      icon
-        .messagecontent
-          h3 Mojo Solutions
-          |                     Click to match now!
+    .matches
+        h1 Matches
+        .row
+            card
+                card
+                    card
+    .messages
+        h2 Messages
+        .matched.active
+            icon
+                .messagecontent
+                    h3 NSE Tropical
+                    |
+                    | Recently active, match now!
+        .matched
+            icon
+                .messagecontent
+                    h3 Golden Communications
+                    |
+                    | Click to match now!
+        .matched
+            icon
+                .messagecontent
+                    h3 Mojo Solutions
+                    |
+                    | Click to match now!
 </template>
 
 <script>

frontend/src/views/Profile.vue

@@ -1,62 +1,81 @@
 <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
+    h2 Profile
+    form(@submit.prevent='onSubmit')
+        .user__box
+            input(
+                minlength='6'
+                required=''
+                type='text'
+                v-model='form.fullname'
+            )
+            label Fullname
+        .user__box
+            input(minlength='10' required='' type='text' v-model='form.avatar')
+            label Image URL
+        .user__box
+            input(
+                max='60'
+                maxlength='3'
+                min='18'
+                minlength='2'
+                required=''
+                type='number'
+                v-model='form.age'
+            )
+            label Age
+        .user__box
+            input(
+                maxlength='50'
+                minlength='10'
+                required=''
+                type='text'
+                v-model='form.metadata'
+            )
+            label Description
+        button(type='submit')
+            span
+            span
+            span
+            span {{ requesting ? "Log..." : "Update" }}
+        router-link.links(to='/') Back
 </template>
 
 <script>
 export default {
-  name: "profile-update",
-  data() {
-    return {
-      requesting: false,
-      form: {
-        fullname: "",
-        avatar: "",
-        age: "",
-        metadata: "",
-      },
-    };
-  },
-  created() {
-    this.getUser();
-  },
-  methods: {
-    onSubmit() {
-      this.requesting = true;
-      // this.getUser()
-      // this.setUser()
+    name: 'profile-update',
+    data() {
+        return {
+            requesting: false,
+            form: {
+                fullname: '',
+                avatar: '',
+                age: '',
+                metadata: '',
+            },
+        }
     },
-    getUser() {
-      const uid = auth.currentUser.uid;
-      return
+    created() {
+        this.getUser()
     },
-    setUser() {
-      // CometChat.updateUser(user, apiKey)
-      // .then(() => this.$router.push({ name: "home" }))
-      // .catch((error) => console.log(error))
-      // .finally(() => this.requesting = false);
+    methods: {
+        onSubmit() {
+            this.requesting = true
+            // this.getUser()
+            // this.setUser()
+        },
+        getUser() {
+            const uid = auth.currentUser.uid
+            return
+        },
+        setUser() {
+            // CometChat.updateUser(user, apiKey)
+            // .then(() => this.$router.push({ name: "home" }))
+            // .catch((error) => console.log(error))
+            // .finally(() => this.requesting = false);
+        },
     },
-  },
-};
+}
 </script>
 
 <style lang="postcss">
@@ -87,10 +106,10 @@ html
   color: #fff
   text-align: center
 
-.login__box .user__box 
+.login__box .user__box
   position: relative
 
-.login__box .user__box input 
+.login__box .user__box input
   width: 100%
   padding: 10px 0
   font-size: 16px
@@ -101,7 +120,7 @@ html
   outline: none
   background: transparent
 
-.login__box .user__box label 
+.login__box .user__box label
   position: absolute
   top: 0
   left: 0
@@ -112,13 +131,13 @@ html
   transition: 0.5s
 
 .login__box .user__box input:focus ~ label,
-.login__box .user__box input:valid ~ label 
+.login__box .user__box input:valid ~ label
   top: -20px
   left: 0
   color: #e90d77
   font-size: 12px
 
-.login__box form button 
+.login__box form button
   position: relative
   display: inline-block
   padding: 10px 20px
@@ -152,11 +171,11 @@ html
   background: linear-gradient(90deg, transparent, #e90d77)
   animation: btn-anim1 1s linear infinite
 
-.login__box form .forget__link 
+.login__box form .forget__link
   color: white
   text-decoration: none
 
-.login__box form .forget__link:hover 
+.login__box form .forget__link:hover
   color: #e90d77
 
 .login__box form .links
@@ -177,7 +196,7 @@ html
     left: -100%
   50%, 100%
     left: 100%
-  
+
 .login__box button span:nth-child(2)
   top: -100%
   right: 0
@@ -193,7 +212,7 @@ html
   50%, 100%
     top: 100%
 
-.login__box button span:nth-child(3) 
+.login__box button span:nth-child(3)
   bottom: 0
   right: -100%
   width: 100%
@@ -207,7 +226,7 @@ html
     right: -100%
   50%, 100%
     right: 100%
-  
+
 .login__box a span:nth-child(4)
   bottom: -100%
   left: 0
@@ -222,4 +241,4 @@ html
     bottom: -100%
   50%, 100%
     bottom: 100%
-</style>
+</style>

frontend/src/views/Register.vue

@@ -1,43 +1,53 @@
 <template lang="pug">
 .register__box
-  h2 Register
-  form(@submit.prevent="onSubmit")
-    .user__box
-      input(type="text" required="" minlength="5" v-model="form.fullname")
-      label Fullname
-    .user__box
-      input(type="email" required="" minlength="10" v-model="form.email")
-      label Email
-    .user__box
-      input(type="password" minlength="6" required="" v-model="form.password")
-      label Password
-    .user__box
-      router-link.forget__link(to="/forget") Forget Password
-    button(type="submit")
-      span
-      span
-      span
-      span {{ requesting ? "Log..." : "Register" }}
-    router-link.links(to="/login") Login
+    h2 Register
+    form(@submit.prevent='onSubmit')
+        .user__box
+            input(
+                minlength='5'
+                required=''
+                type='text'
+                v-model='form.fullname'
+            )
+            label Fullname
+        .user__box
+            input(minlength='10' required='' type='email' v-model='form.email')
+            label Email
+        .user__box
+            input(
+                minlength='6'
+                required=''
+                type='password'
+                v-model='form.password'
+            )
+            label Password
+        .user__box
+            router-link.forget__link(to='/forget') Forget Password
+        button(type='submit')
+            span
+            span
+            span
+            span {{ requesting ? "Log..." : "Register" }}
+        router-link.links(to='/login') Login
 </template>
 
 <script>
 export default {
-  data: () => ({
-    valid: true,
-    requesting: false,
-    form: {
-      email: "",
-      password: "",
-      fullname: "",
-    }
-  }),
-  methods: {
-    onSubmit() {
-      this.requesting = true
-      this.requesting = false
+    data: () => ({
+        valid: true,
+        requesting: false,
+        form: {
+            email: '',
+            password: '',
+            fullname: '',
+        },
+    }),
+    methods: {
+        onSubmit() {
+            this.requesting = true
+            this.requesting = false
+        },
     },
-  },
 }
 </script>
 
@@ -158,7 +168,7 @@ html
     left: -100%
   50%, 100%
     left: 100%
-  
+
 .register__box button span:nth-child(2)
   top: -100%
   right: 0
@@ -173,7 +183,7 @@ html
     top: -100%
   50%, 100%
     top: 100%
-  
+
 .register__box button span:nth-child(3)
   bottom: 0
   right: -100%
@@ -188,7 +198,7 @@ html
     right: -100%
   50%, 100%
     right: 100%
-  
+
 .register__box a span:nth-child(4)
   bottom: -100%
   left: 0
@@ -204,4 +214,4 @@ html
   50%,
   100%
     bottom: 100%
-</style>
+</style>

frontend/src/views/home.vue

@@ -1,10 +1,10 @@
 <template lang="pug">
 #home
-  .content-wrapper
-    .content
-      main-header
-      profile-cards(:uid="uid" :users="swipables")
-  sidebar
+    .content-wrapper
+        .content
+            main-header
+            profile-cards(:uid='uid' :users='swipables')
+    sidebar
 </template>
 
 <script>
@@ -12,26 +12,28 @@ import mainHeader from '../shared/MainHeader.vue'
 import sidebar from '../shared/Sidebar.vue'
 import profileCards from '../components/TinderCard.vue'
 export default {
-  name: "home",
-  components: { mainHeader, profileCards, sidebar },
-  data() {
-    return {
-      swipables: [],
-      uid: "",
-    };
-  },
-  created() {
-    // this.uid = auth.currentUser?.uid || "99999";
-    this.uid = "99999"
-    this.getUsers()
-  },
-  methods: {
-    getUsers() {
-      const users = []
-      this.swipables = users.filter(u => (u.id = Date.now() + (Math.random() * 100000).toFixed()))
+    name: 'home',
+    components: { mainHeader, profileCards, sidebar },
+    data() {
+        return {
+            swipables: [],
+            uid: '',
+        }
     },
-  },
-};
+    created() {
+        // this.uid = auth.currentUser?.uid || "99999";
+        this.uid = '99999'
+        this.getUsers()
+    },
+    methods: {
+        getUsers() {
+            const users = []
+            this.swipables = users.filter(
+                u => (u.id = Date.now() + (Math.random() * 100000).toFixed()),
+            )
+        },
+    },
+}
 </script>
 <style lang="postcss">
 html
@@ -51,4 +53,4 @@ html
 @media only screen and (max-width: 768px)
   .content
     margin-left: 0
-</style>
+</style>