Рабочий сайт

frontend/src/App.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
-    <img src="./assets/logo.png">
-    <h2 v-if="loggedin">
-      Прикол
-    </h2>
-    <Login v-else id="login" />
+    <img id="logo" src="./assets/logo.png">
+    <div class="pageSide" v-if="loggedin">
+      <img :src="image" >
+    </div>
+    <Login v-else id="login" @auth="auth" />
   </div>
 </template>
 
@@ -18,7 +18,15 @@ export default {
   },
   data() {
     return {
-      loggedin: false
+      loggedin: false,
+    }
+  },
+  methods: {
+    auth(image) {
+      if (image) {
+        this.loggedin = true
+        this.image = image
+      }
     }
   }
 }
@@ -38,11 +46,18 @@ body {
   margin-top: 60px;
 }
 
-img {
+#logo {
   width: 100px;
   padding: 50px;
   margin: auto;
   display: block;
   border-radius: 50%;
 }
+
+.pageSide {
+  padding: 1.5rem;
+  background-color: #FFF;
+  border-radius: .3rem;
+  text-align: center;
+}
 </style>

frontend/src/components/Login.vue

@@ -5,7 +5,7 @@
         <MazInput
           v-model="email"
           placeholder="E-mail"
-          autocomplete="new-email"
+          autocomplete="email"
           left-icon-name="email"
           class="maz-mb-2"
           :color=validateEmail()
@@ -18,6 +18,7 @@
           v-model="phone" 
           default-country-code="RU" 
           no-country-selector 
+          autocomplete="tel"
           class="maz-mb-2"
           left-icon-name="phone"
           clearable
@@ -57,24 +58,33 @@ export default {
       }
     },
     async auth(pass) {
-      const response = await axios.post("http://localhost:3000/api/login", {
-        login: this.usePhone ? this.phone : this.email,
-        pass: pass
+      axios({
+        method: "post",
+        url: "http://127.0.0.1:3000/api/login",
+        withCredentials: true,
+        responseType: 'arraybuffer',
+        headers: {
+          "Content-Type": "application/json",
+        },
+        data: {
+          login: this.usePhone ? this.phone : this.email,
+          pass: pass
+        }
+      }).then((response) => {
+        var bytes = new Uint8Array(response.data);
+        var binary = bytes.reduce((data, b) => data += String.fromCharCode(b), '');
+        this.src = "data:image/jpeg;base64," + btoa(binary);
+        this.$emit('auth', this.src)
       });
-      this.loggedIn = response.data.loggedIn;
     }
+  },
+  mounted() {
+    this.auth()
   }
 }
 </script>
 
 <style scoped>
-  .pageSide {
-    padding: 1.5rem;
-    background-color: #FFF;
-    border-radius: .3rem;
-    text-align: center;
-  }
-
   .flip-enter-active {
     transition: all 0.4s ease;
   }

frontend/src/components/PassNBtns.vue

@@ -4,7 +4,7 @@
       v-model="pass"
       placeholder="Password"
       type="password"
-      autocomplete="new-password"
+      autocomplete="current-password"
       left-icon-name="lock"
       class="maz-mb-2"
       clearable