Сообщение о неверном вводе

frontend/src/App.vue

@@ -2,19 +2,28 @@
   <div>
     <img id="logo" src="./assets/logo.png">
     <div class="pageSide" v-if="loggedin">
-      <img :src="image" >
+      <img id="meme" :src="image">
+      <MazBtn 
+        class="maz-btn--mini"
+        @click="logout"
+      >
+        Logout
+      </MazBtn>
     </div>
     <Login v-else id="login" @auth="auth" />
   </div>
 </template>
 
 <script>
+import axios from 'axios';
 import Login from './components/Login.vue'
+import { MazBtn } from 'maz-ui';
 
 export default {
   name: 'App',
   components: {
-    Login
+    Login,
+    MazBtn
   },
   data() {
     return {
@@ -25,8 +34,13 @@ export default {
     auth(image) {
       if (image) {
         this.loggedin = true
-        this.image = image
+        this.image = image  
       }
+    },
+    logout() {
+      axios.post('http://127.0.0.1:3000/api/logout').then(() => {
+        this.loggedin = false
+      });
     }
   }
 }
@@ -37,13 +51,10 @@ body {
   background-color: #343a40;
 }
 
-#app {
+body {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
 }
 
 #logo {
@@ -54,10 +65,21 @@ body {
   border-radius: 50%;
 }
 
+#meme {
+  width: 100%;
+  margin-bottom: 3em;
+}
+
 .pageSide {
   padding: 1.5rem;
   background-color: #FFF;
   border-radius: .3rem;
   text-align: center;
+  max-width: 600px;
+  margin: auto;
+}
+
+@media screen and (max-width: 600px) {
+  
 }
 </style>