Рабочий фронтенд

frontend/src/App.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <img src="./assets/logo.png">
+    <h2 v-if="loggedin">
+      Прикол
+    </h2>
+    <Login v-else id="login" />
+  </div>
+</template>
+
+<script>
+import Login from './components/Login.vue'
+
+export default {
+  name: 'App',
+  components: {
+    Login
+  },
+  data() {
+    return {
+      loggedin: false
+    }
+  }
+}
+</script>
+
+<style>
+body {
+  background-color: #343a40;
+}
+
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+
+img {
+  width: 100px;
+  padding: 50px;
+  margin: auto;
+  display: block;
+  border-radius: 50%;
+}
+</style>

frontend/src/components/Login.vue

@@ -0,0 +1,86 @@
+<template>
+  <div id="main">
+    <transition name="flip" mode="out-in">
+      <div v-if="!usePhone" class="pageSide" key="emailForm">
+        <MazInput
+          v-model="email"
+          placeholder="E-mail"
+          autocomplete="new-email"
+          left-icon-name="email"
+          class="maz-mb-2"
+          :color=validateEmail()
+          clearable
+        />
+        <PassNBtns loginMethod="phone" @flip="usePhone = !usePhone" @auth="auth" />
+      </div>
+      <div v-else class="pageSide" key="phoneForm" >
+        <MazPhoneNumberInput 
+          v-model="phone" 
+          default-country-code="RU" 
+          no-country-selector 
+          class="maz-mb-2"
+          left-icon-name="phone"
+          clearable
+        />
+        <PassNBtns loginMethod="email" @flip="usePhone = !usePhone" @auth="auth" />
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+import { MazInput, MazPhoneNumberInput } from 'maz-ui';
+import PassNBtns from './PassNBtns.vue';
+
+export default {
+  name: 'Login',
+  components: {
+    MazInput,
+    MazPhoneNumberInput,
+    PassNBtns
+  },
+  data() {
+    return {
+      usePhone: false,
+      email: '',
+      phone: '',
+      reg: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,24}))$/
+    }
+  },
+  methods: {
+    validateEmail() {
+      if (this.reg.test(this.email)) {
+        return 'success'
+      } else {
+        return 'primary'
+      }
+    },
+    async auth(pass) {
+      const response = await axios.post("http://localhost:3000/api/login", {
+        login: this.usePhone ? this.phone : this.email,
+        pass: pass
+      });
+      this.loggedIn = response.data.loggedIn;
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .pageSide {
+    padding: 1.5rem;
+    background-color: #FFF;
+    border-radius: .3rem;
+    text-align: center;
+  }
+
+  .flip-enter-active {
+    transition: all 0.4s ease;
+  }
+  
+  .flip-enter, .flip-leave {
+    transform: perspective(1000px) rotateY(180deg);
+    opacity: 0;
+  }
+</style>

frontend/src/components/PassNBtns.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <MazInput
+      v-model="pass"
+      placeholder="Password"
+      type="password"
+      autocomplete="new-password"
+      left-icon-name="lock"
+      class="maz-mb-2"
+      clearable
+    />
+    <MazBtn 
+      v-on:click="$emit('auth', pass)"
+      class="maz-btn--mini maz-mr-2 maz-mt-2"
+    >
+      Login
+    </MazBtn>
+    <MazBtn
+      v-on:click="$emit('flip')"
+      class="maz-btn--mini maz-ml-2 maz-mt-2 maz-btn--default"
+    >
+      Use {{loginMethod}} to login
+    </MazBtn>
+  </div>
+</template>
+
+<script>
+import { MazInput, MazBtn } from 'maz-ui';
+
+export default {
+  name: 'Login',
+  components: {
+    MazInput,
+    MazBtn
+  },
+  data() {
+    return {
+      pass: ''
+    }
+  },
+  methods: {
+    auth() {
+      this.$emit('auth', this.pass)
+    }
+  },
+  props: {
+    loginMethod: String
+  }
+}
+</script>

frontend/src/main.js

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')