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

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

Browse Source
This commit is contained in:
Anatoly Kopyl
2021-06-03 02:01:45 +03:00
parent c3b3f6763e
commit 8bce702a9c
15 changed files with 27341 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/.gitignore vendored Normal file
View File

@@ -0,0 +1,23 @@
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

14
frontend/babel.config.js Normal file
View File

@@ -0,0 +1,14 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
[
'component',
{
libraryName: 'maz-ui',
styleLibraryName: 'css'
}
]
]
}

27050
frontend/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

45
frontend/package.json Normal file
View File

@@ -0,0 +1,45 @@
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.21.1",
"core-js": "^3.6.5",
"maz-ui": "^2.3.9",
"vue": "^2.6.11"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"babel-plugin-component": "^1.1.1",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

BIN
frontend/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

17
frontend/public/index.html Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

48
frontend/src/App.vue Normal file
View File

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

BIN
frontend/src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

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

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

50
frontend/src/components/PassNBtns.vue Normal file
View File

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

8
frontend/src/main.js Normal file
View File

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

30
public/auth.html
View File

@@ -1,30 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Registration</title>
</head>
<body>
<h1>Register</h1>
<form action="http://localhost:3000/register" method="POST">
<span class="input_row">Username: <input name="login" type="text"></span>
<span class="input_row">Password: <input name="pass" type="password"></span>
<input type="hidden" class="g-recaptcha-response" name="g-recaptcha-response">
<input type="submit" value="Register">
</form>
<h1>Login</h1>
<form action="http://localhost:3000/login" method="POST">
<span class="input_row">Username: <input name="login" type="text"></span>
<span class="input_row">Password: <input name="pass" type="password"></span>
<input type="hidden" class="g-recaptcha-response" name="g-recaptcha-response">
<input type="submit" value="Login">
</form>
<script src="https://www.google.com/recaptcha/api.js?render=6LcTXIsaAAAAAGWE4913KuaqU1tTT9uyqmvPADcn"></script>
<script src="index.js"></script>
</body>
</html>

7
public/index.js
View File

@@ -1,7 +0,0 @@
grecaptcha.ready(function () {
grecaptcha.execute('6LcTXIsaAAAAAGWE4913KuaqU1tTT9uyqmvPADcn', { action: 'demo' })
.then(function (token) {
document.getElementsByClassName('g-recaptcha-response')[0].value = token;
document.getElementsByClassName('g-recaptcha-response')[1].value = token;
});
});

16
public/personal.html
View File

@@ -1,16 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Personal page</title>
</head>
<body>
<h1>Personal page</h1>
<form action="http://localhost:3000/logout" method="GET">
<input type="submit" value="Logout">
</form>
</body>
</html>

14
public/style.css
View File

@@ -1,14 +0,0 @@
* {
text-align: center;
font-family: 'Courier New', Courier, monospace;
}
span.input_row {
display: flex;
justify-content: space-between;
}
form {
width: 30%;
margin: auto;
}