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

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>