Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

regScreen #5

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

regScreen #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions frontend/src/components/Header.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,3 @@ export default {
justify-content: center;
}
</style>



50 changes: 50 additions & 0 deletions frontend/src/components/Layout.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<template>
<div class='layout'>
<div class='header' >
<slot name='header'> </slot>
</div>
<div class='content' >
<slot name='content'></slot>
</div>
<div class='footer'>
<slot name='footer'></slot>
</div>
</div>
</template>

<script>
export default {
name:'Layout',
}
</script>

<style lang="scss" scoped>
@import '~@/utils/var.scss';
.content {
margin-top:$space--m;
margin-bottom:$space--m;
display:flex;
flex-direction: column;
justify-content: center;
}
.footer {
display:flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.header {
text-align: center;
font-family: $font-family--header;
font-size: $font-size--header;
}
.layout {
color:$font-color--main;
font-family:$font-family--main;
font-size:$font-size--main;
margin-top:$space--l;
margin-bottom:$space--l;
background-color:$color--bg-main;

}
</style>
220 changes: 160 additions & 60 deletions frontend/src/components/Register.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,64 +1,117 @@
<template>
<div id='app' >

<form enctype="multipart/form-data" method="post" >

<inputText v-model='name.first'>
<span slot='label'>Имя</span>
</inputText>

<span v-if='!$v.name.first.required'>Поле должно быть заполнено</span>
<span v-if='!$v.name.first.alpha'>Только буквы</span>
<br>

Фамилия
<br>
<input type='text' v-model='name.last' >
<span v-if='!$v.name.last.required'>Поле должно быть заполнено</span>
<span v-if='!$v.name.last.alpha'>Только буквы</span>
<br>

Курс
<br>
<input type='text' v-model='courseStr' @input='checkCourse'>
<span v-if='!$v.courseStr.required'>Поле должно быть заполнено</span>
<span v-if='(errCourse)&&($v.courseStr.required)'>Некоррекные данные</span>

<br>
Email
<br>
<input type='text' v-model='email'>
<span v-if='!$v.email.required'>Поле должно быть заполнено</span>
<span v-if='!$v.email.email'>Не email</span>
<br>
Код смерти
<br>
<input type='text' v-model='deathCode'>
<span v-if='!$v.deathCode.required'>Поле должно быть заполнено</span>
<span v-if='!$v.deathCode.between'>Число от 1000 до 9999</span>
<br>
Vk
<br>
<input type='text' v-model='vk'>
<span v-if='!$v.vk.required'>Поле должно быть заполнено</span>
<br>
Фото
<br>
<input type='file' id='file' @change='loadPhoto' accept='image/jpeg,image/png'>
<span v-if='!$v.photo.required'>Загрузите фото</span>
<br><br>
<button type='button' @click='register'>Зарегистрироваться</button>

</form>

</div>
<div id='app' >
<form enctype="multipart/form-data" method="post" >
<layout v-show='stage1'>
<div slot='header'>
Регистрация
</div>
<div slot='content'>
<inputText v-model='email'>
<span slot='label'>Email</span>
<div slot='error'>
<span v-if='!$v.email.required&&err'>Введите email</span>
<span v-if='!$v.email.email'>Не email</span>
</div>
</inputText>

<br>

<inputText v-model='deathCode'>
<span slot='label'>Код смерти</span>
<div slot='error'>
<span v-if='!$v.deathCode.required&&err'>Введите код</span>
<span v-if='!$v.deathCode.between'>Число от 1000 до 9999</span>
</div>
</inputText>

<br>

<inputText v-model='deathCodeRep'>
<span slot='label'>Повторите код</span>
<div slot='error'>
<span v-if='!$v.deathCodeRep.required&&err'>Повторите код</span>
<span v-if='!$v.deathCodeRep.sameAsCode&&$v.deathCodeRep.required'>Коды не совпадают</span>

</div>
</inputText>
</div>

<div slot='footer'>
<img src='../pictures/arrow.png' width='37px' height='47px' @click='nextStage'>
</div>
</layout>

<layout v-show='!stage1' >
<div slot='header'>Досье</div>
<div slot='content'>
<inputText v-model='name.first'>
<span slot='label'>Имя</span>
<div slot='error'>
<span v-if='!$v.name.first.required&&err'>Введите имя</span>
<span v-if='!$v.name.first.alpha'>Только буквы</span></div>
</inputText>

<br>

<inputText v-model='name.last'>
<span slot='label'>Фамилия</span>
<div slot='error'>
<span v-if='!$v.name.last.required&&err'>Введите фамилию</span>
<span v-if='!$v.name.last.alpha'>Только буквы</span>
</div>
</inputText>

<br>

<inputText v-model='courseStr' @input='checkCourse'>
<span slot='label'>Курс</span>
<div slot='error'>
<span v-if='!$v.courseStr.required&&err'>Введите курс</span>
<span v-if='(errCourse)&&($v.courseStr.required)'>Некоррекные данные</span>
</div>
</inputText>

<br>

<inputText v-model='vk'>
<span slot='label'>Vk</span>
<div slot='error'>
<span v-if='!$v.vk.required&&err'>Введите vk</span>
</div>
</inputText>

<br>

<inputFile @change='loadPhoto'>
<span slot='label'>Фото</span>
<div slot='error'>
<span v-if='!$v.photo.required&&err'>Загрузите фото</span>
</div>
</inputFile>

<br>
</div>
<div slot='footer'>
<div class='arrows'>
<div class='left'>
<img src='../pictures/arrow2.png' width='37px' height='47px' @click='lastStage'>
</div>
<div class='right'>
<img src='../pictures/arrow.png' width='37px' height='47px' @click='register'>
</div>
</div>
</div>
</layout>
</form>
</div>
</template>

<script>
import { validationMixin } from 'vuelidate'
import { required,alpha,email,between } from 'vuelidate/lib/validators'
import { required,alpha,email,between,sameAs } from 'vuelidate/lib/validators'
import inputText from './input.vue'

import inputFile from './inputFile.vue'
import layout from './Layout.vue'
export default {
data () {
return {
Expand All @@ -72,11 +125,16 @@ export default {
vk:'',
photo:'',
deathCode:'',
errCourse:false
deathCodeRep:'',
errCourse:false,
stage1:true,
err:false
}
},
components: {
'inputText':inputText
'inputText':inputText,
'inputFile':inputFile,
'layout':layout
},

mixins: [validationMixin],
Expand Down Expand Up @@ -109,15 +167,31 @@ export default {
},
courseStr:{
required
},
deathCodeRep:{
required,
sameAsCode:sameAs('deathCode')
}

},

methods: {
loadPhoto () {
var imagefile = document.getElementById('file')
this.photo=imagefile.files[0]
loadPhoto (value) {
this.photo=value
},
nextStage () {
if(!this.$v.email.$invalid&&!this.$v.deathCode.$invalid&&!this.$v.deathCodeRep.$invalid)
{
this.stage1=false
this.err=false
}
else this.err=true

},
lastStage () {
this.stage1=true

},
checkCourse () {
var value
if(this.courseStr.match(/[0-4]/i)||(this.courseStr.match(/преп/i))||(this.courseStr.match(/асп/i)))
Expand Down Expand Up @@ -164,7 +238,33 @@ export default {
}
this.$store.dispatch('register',postBody)
}
else this.err=true
}
}
}
</script>
<style lang="scss" >
@import '../utils/var';
body {
background-color:$color--bg-main;
}
.arrows {
position: relative;
width:320px;
margin-left:auto;
margin-right: auto;
}
.left {
position:absolute;
left:0px;
}
.right {
position:absolute;
right:0px;
}
@media screen and (max-width: 320px) {
.arrows {
width:270px;
}
}
</style>
Loading