anatolykopyl/vk-bingo
1
0
Fork 0
mirror of https://github.com/anatolykopyl/vk-bingo.git synced 2026-03-26 12:54:25 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Anatoly Kopyl
2021-03-28 00:32:14 +03:00
parent 9835949e9b
commit 8a48043960
9 changed files with 193 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/package-lock.json generated
View File

@@ -18,6 +18,7 @@
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"dotenv-webpack": "^7.0.2",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0"
}
@@ -5265,12 +5266,36 @@
"node": ">=8"
}
},
"node_modules/dotenv-defaults": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/dotenv-defaults/-/dotenv-defaults-2.0.1.tgz",
"integrity": "sha512-ugFCyBF7ILuwpmznduHPQZBMucHHJ8T4OBManTEVjemxCm2+nqifSuW2lD2SNKdiKSH1E324kZSdJ8M04b4I/A==",
"dev": true,
"dependencies": {
"dotenv": "^8.2.0"
}
},
"node_modules/dotenv-expand": {
"version": "5.1.0",
"resolved": "https://registry.npm.taobao.org/dotenv-expand/download/dotenv-expand-5.1.0.tgz",
"integrity": "sha1-P7rwIL/XlIhAcuomsel5HUWmKfA=",
"dev": true
},
"node_modules/dotenv-webpack": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-7.0.2.tgz",
"integrity": "sha512-RY+/5uM/XY4bGtih9f9ic8hlrUDxVcZZBPWlnX/aHhaKxcVVX9SH/5VH7CSmvVo9GL6PKvQOA0X1bc552rnatQ==",
"dev": true,
"dependencies": {
"dotenv-defaults": "^2.0.1"
},
"engines": {
"node": ">=10"
},
"peerDependencies": {
"webpack": "^4 || ^5"
}
},
"node_modules/duplexer": {
"version": "0.1.2",
"resolved": "https://registry.npm.taobao.org/duplexer/download/duplexer-0.1.2.tgz?cache=0&sync_timestamp=1597221020457&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fduplexer%2Fdownload%2Fduplexer-0.1.2.tgz",
@@ -19288,12 +19313,30 @@
"integrity": "sha1-l+YZJZradQ7qPk6j4mvO6lQksWo=",
"dev": true
},
"dotenv-defaults": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/dotenv-defaults/-/dotenv-defaults-2.0.1.tgz",
"integrity": "sha512-ugFCyBF7ILuwpmznduHPQZBMucHHJ8T4OBManTEVjemxCm2+nqifSuW2lD2SNKdiKSH1E324kZSdJ8M04b4I/A==",
"dev": true,
"requires": {
"dotenv": "^8.2.0"
}
},
"dotenv-expand": {
"version": "5.1.0",
"resolved": "https://registry.npm.taobao.org/dotenv-expand/download/dotenv-expand-5.1.0.tgz",
"integrity": "sha1-P7rwIL/XlIhAcuomsel5HUWmKfA=",
"dev": true
},
"dotenv-webpack": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-7.0.2.tgz",
"integrity": "sha512-RY+/5uM/XY4bGtih9f9ic8hlrUDxVcZZBPWlnX/aHhaKxcVVX9SH/5VH7CSmvVo9GL6PKvQOA0X1bc552rnatQ==",
"dev": true,
"requires": {
"dotenv-defaults": "^2.0.1"
}
},
"duplexer": {
"version": "0.1.2",
"resolved": "https://registry.npm.taobao.org/duplexer/download/duplexer-0.1.2.tgz?cache=0&sync_timestamp=1597221020457&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fduplexer%2Fdownload%2Fduplexer-0.1.2.tgz",

1
frontend/package.json
View File

@@ -19,6 +19,7 @@
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"dotenv-webpack": "^7.0.2",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0"
},

27
frontend/src/App.vue
View File

@@ -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>

20
frontend/src/components/Game.vue
View File

@@ -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>

74
frontend/src/components/Login.vue Normal file
View File

@@ -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>