🛂 Добавил авторизацию

frontend/src/App.vue

@@ -1,15 +1,28 @@
 <template>
   <h1>🎰 Flex Bingo 🎰</h1>
-  <Game id="game" />
+  <Login id="login" @loggedIn="login" v-show="!loggedIn" />
+  <Game id="game" v-if="loggedIn" />
 </template>
 
 <script>
+import Login from './components/Login.vue'
 import Game from './components/Game.vue'
 
 export default {
   name: 'App',
   components: {
+    Login,
     Game
+  },
+  data() {
+    return {
+      loggedIn: null
+    }
+  },
+  methods: {
+    login: function(success) {
+      this.loggedIn = success
+    }
   }
 }
 </script>
@@ -30,7 +43,17 @@ body {
 }
 
 #game {
-  margin-left: 25%;
+  margin: auto;
   margin-bottom: 100px;
 }
+
+.correct {
+  background-color: rgb(124, 230, 124) !important;
+}
+.highlight_correct {
+  border: 1px solid rgb(124, 230, 124);
+}
+.wrong {
+  background-color: rgb(255, 71, 71) !important;
+}
 </style>

frontend/src/components/Game.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="card" v-if="card!==null">
+  <div class="card" v-if="card !== null">
     <img class="meme" v-bind:src="card.image">
     <h2>Кто скинул этот мем?</h2>
     <div class="answers">
@@ -82,13 +82,15 @@ export default {
   cursor: pointer;
 }
 
-.correct {
-  background-color: rgb(124, 230, 124);
-}
-.highlight_correct {
-  border: 1px solid rgb(124, 230, 124);
-}
-.wrong {
-  background-color: rgb(255, 71, 71);
+@keyframes correct-selected {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.5);
+  }
+  100% {
+    transform: scale(1);
+  }
 }
 </style>

frontend/src/components/Login.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <h1>Авторизация:</h1>
+    <p>{{ question }}</p>
+    <input v-model="answer"><br>
+    <button v-on:click="login" v-bind:class="{wrong: loggedIn === false}">Ввод</button>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+axios.defaults.withCredentials = true
+
+export default {
+  name: 'Login',
+  data() {
+    return {
+      question: null,
+      answer: null,
+      loggedIn: null
+    }
+  },
+  methods: {
+    login: function() {
+      axios
+        .post('http://localhost:3000/auth', {
+          "pass": this.answer,
+        })
+        .then(response => {
+          this.loggedIn = response.status == "200"
+          this.$emit('loggedIn', this.loggedIn)
+        })
+    }
+  },
+  mounted() {
+    this.question = process.env.VUE_APP_QUESTION
+
+    this.login()
+  }
+}
+</script>
+
+<style scoped>
+div {
+  background-color: #121212;
+  width: 400px;
+  margin: auto;
+  border-radius: 18px;
+  padding: 40px 10px 40px 10px;
+  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
+}
+
+input {
+  font-size: 1em;
+  text-align: center;
+  padding: 5px 8px 5px 8px;
+  margin-bottom: 1em;
+  border-radius: 6px;
+  border: none;
+  width: 20ch;
+}
+
+button {
+  color: white;
+  font-size: 1em;
+  box-sizing: content-box;
+  background-color: #5a5a5a;
+  border-radius: 6px;
+  border: none;
+  width: 20ch;
+  padding: 5px 8px 5px 8px;
+  cursor: pointer;
+}
+</style>