Рабочий сайт

frontend/src/App.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
-    <img src="./assets/logo.png">
+    <img id="logo" src="./assets/logo.png">
-    <h2 v-if="loggedin">
+    <div class="pageSide" v-if="loggedin">
-      Прикол
+      <img :src="image" >
-    </h2>
+    </div>
-    <Login v-else id="login" />
+    <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", {
+      axios({
-        login: this.usePhone ? this.phone : this.email,
+        method: "post",
-        pass: pass
+        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

package.json

@@ -20,10 +20,15 @@
     "axios": "^0.21.1",
     "bcrypt": "^5.0.1",
     "connect-mongo": "^4.4.1",
+    "cookie-parser": "^1.4.5",
+    "cookie-session": "^1.4.0",
+    "cors": "^2.8.5",
     "dotenv": "^8.2.0",
     "express": "^4.17.1",
-    "express-session": "^1.17.1",
+    "express-session": "^1.17.2",
-    "mongodb": "^3.6.5"
+    "memorystore": "^1.6.6",
+    "mongodb": "^3.6.5",
+    "vue-phone-number-input": "^1.1.10"
   },
   "devDependencies": {
     "nodemon": "^2.0.7"

server.js

@@ -1,98 +1,44 @@
 const express = require('express')
-const session = require('express-session')
+const cookieSession = require('cookie-session')
 const app = express()
-const {MongoClient} = require('mongodb')
+const cors = require('cors')
-const MongoStore = require('connect-mongo')
-const bcrypt = require('bcrypt')
 require('dotenv').config()
 
-const {verifyCaptcha} = require('./verify-captcha')
+app.use(cookieSession({
-
+  name: 'session',
-app.use(express.static(__dirname + '/public'))
-app.use(express.json())
-app.use(express.urlencoded({ extended: true }))
-
-const client = new MongoClient(process.env.URI, { useUnifiedTopology: true })
-
-app.use(session({
   secret: process.env.SECRET,
-  resave: false,
+  maxAge: 24 * 60 * 60 * 1000, // 24 hours
-  saveUninitialized: true,
+  secure: false,
-  store: MongoStore.create({
+  sameSite: 'none'
-    client,
-    dbName: 'reg_example'
-  }),
-  cookie: { maxAge: 1000 * 60 * 60 * 24 }
 }))
 
-client.connect()
+app.set('trust proxy', 2)
 
-app.get('/', (req, res) => {
+app.use(
+  express.urlencoded({ extended: true }),
+  express.json(),
+  cors({credentials: true, origin: 'http://localhost:8080'})
+)
+
+app.post('/api/login', (req, res) => {
+  req.session.loggedIn = req.session.loggedIn ?? false
   if (req.session.loggedIn) {
-    res.status(200).sendFile(__dirname+'/public/personal.html')
+    res.status(200).sendFile(__dirname+'/public/pic.jpg');
   } else {
-    res.status(200).sendFile(__dirname+'/public/auth.html')
+    if ((req.body.login === 'gora@studio.ru' || req.body.login === "+79211231313") && req.body.pass === "2021") {
+      req.session.loggedIn = true
+      res.status(200).sendFile(__dirname+'/public/pic.jpg')
+    } else {
+      res.status(401).send()
+    }
   }
 })
 
-app.get('/get-users', async (_, res) => {
+app.post('/api/logout', (req, res) => {
-  try {
-    const users = await client.db('reg_example').collection('users').find().toArray()
-    res.status(200).send(users)
-  } catch (e) {
-    console.log("Error: " + e)
-    res.status(500).send()
-  }
-})
-
-app.post('/register', async (req, res) => {
-  verifyCaptcha(req, res, async () => {
-    const hashedPass = await bcrypt.hash(req.body.pass, 10)
-    try {
-      const user = await client.db('reg_example').collection('users').findOne({
-        login: req.body.login
-      })
-      if (user) {
-        res.send('A user with this username already exists.')
-      } else {
-        await client.db('reg_example').collection('users').insertOne({
-          login: req.body.login,
-          pass: hashedPass
-        })
-        req.session.loggedIn = true
-        res.status(201).redirect('/')
-      }
-    } catch (e) {
-      console.log("Error: " + e)
-      res.status(500).send()
-    }
-  })
-})
-
-app.post('/login', async (req, res) => {
-  verifyCaptcha(req, res, async () => {
-    try {
-      const user = await client.db('reg_example').collection('users').findOne({
-        login: req.body.login
-      })
-      if (user && bcrypt.compareSync(req.body.pass, user.pass)) {
-        req.session.loggedIn = true
-        res.status(200).redirect('/')
-      } else {
-        res.status(401).send("Invalid login credentials")
-      }
-    } catch (e) {
-      console.log("Error: " + e)
-      res.status(500).send()
-    }
-  })
-})
-
-app.get('/logout', (req, res) => {
   if (req.session) {
     req.session.loggedIn = false
+    res.status(200).send()
   }
-  res.redirect('/')
 })
 
 app.listen(process.env.PORT)

verify-captcha.js

@@ -1,22 +0,0 @@
-const axios = require('axios')
-
-module.exports = {
-  verifyCaptcha: function (req, res, cb) {
-    if (!req.body['g-recaptcha-response']) {
-      return res.status(400).send("No captcha")
-    }
-
-    const URL = "https://www.google.com/recaptcha/api/siteverify?secret=" + process.env.SECRET_KEY + "&response=" + req.body['g-recaptcha-response'] + "&remoteip=" + req.socket.remoteAddress
-
-    axios.get(URL).then(function (response) {
-      if (response.data.success !== undefined && !response.data.success) {
-        return res.status(429).send("Invalid captcha")
-      }
-
-      cb()
-    })
-    .catch(function (error) {
-      console.log(error);
-    })
-  }
-}