Skip to content

Commit ac34ca1

Browse files
fullfsfullfs
authored
Merge pull request #3 from ProtocolONE/AUTH-18-form-preparations
Auth 18 form preparations
2 parents 26094c2 + ffa641d commit ac34ca1

16 files changed

+241
-67
lines changed

‎package-lock.json

+50-9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+3
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,11 @@
1111
"test:unit": "vue-cli-service test:unit"
1212
},
1313
"dependencies": {
14+
"element-ui": "^2.4.5",
1415
"vue": "^2.5.17",
1516
"vue-i18n": "^8.0.0",
17+
"vue-material": "^1.0.0-beta-10.2",
18+
"vuelidate": "^0.7.4",
1619
"vuex": "^3.0.1"
1720
},
1821
"devDependencies": {

‎public/index.html

+14-4
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,24 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width,initial-scale=1.0">
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
77
<title>auth-web-sdk-embedded</title>
8+
<style>
9+
body {
10+
font-family: Helvetica, Arial, sans-serif;
11+
color: #333333;
12+
background: #f9f9f9;
13+
}
14+
</style>
815
</head>
916
<body>
1017
<noscript>
11-
<strong>We're sorry but auth-web-sdk-embedded doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
18+
<strong
19+
>We're sorry but auth-web-sdk-embedded doesn't work properly without JavaScript enabled.
20+
Please enable it to continue.</strong
21+
>
1222
</noscript>
1323
<div id="app"></div>
1424
<!-- built files will be auto injected -->

‎src/App.vue

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<template>
2+
<div>
3+
<center>
4+
<img alt="Vue logo" src="./assets/logo.png">
5+
</center>
6+
<div class="container">
7+
<LocaleChanger/>
8+
<h1>{{ $t('title') }}</h1>
9+
<AuthForm/>
10+
</div>
11+
</div>
12+
</template>
13+
14+
<script>
15+
import AuthForm from './components/AuthForm.vue';
16+
import LocaleChanger from './components/LocaleChanger.vue';
17+
18+
export default {
19+
name: 'Root',
20+
components: {
21+
AuthForm,
22+
LocaleChanger,
23+
},
24+
};
25+
</script>
26+
27+
<style lang="scss" scoped>
28+
@import 'assets/styles/gui.scss';
29+
30+
.container {
31+
font-family: $ui-font-family-common;
32+
color: $ui-color-grey13;
33+
box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
34+
background: $ui-color-white;
35+
padding: 20px;
36+
width: 500px;
37+
margin: 15px auto 0;
38+
}
39+
</style>
40+
41+
<i18n>
42+
{
43+
"ru": {
44+
"title": "Авторизация в ProtocolONE"
45+
},
46+
"en": {
47+
"title": "ProtocolONE Authorization"
48+
}
49+
}
50+
</i18n>

‎src/Root.vue

-23
This file was deleted.

‎src/assets/styles/base.scss

-5
This file was deleted.

‎src/assets/styles/gui.scss

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
$ui-color-white: hsl(0, 0%, 100%);
2+
$ui-color-grey13: hsl(0, 0%, 13%);
3+
$ui-color-grey47: hsl(0, 0%, 47%);
4+
$ui-color-grey72: hsl(0, 0%, 72%);
5+
$ui-color-grey87: hsl(0, 0%, 87%);
6+
$ui-color-grey96: hsl(0, 0%, 96%);
7+
$ui-color-black: hsl(0, 0%, 0%);
8+
9+
$ui-font-family-common: Tahoma, Arial, Helvetica, sans-serif;

‎src/components/AuthForm.vue

+72-15
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,89 @@
11
<template>
22
<div class="auth-form">
3-
<LocaleChanger/>
4-
<h1>ProtocolONE Auth Form</h1>
5-
<p>Авторизируйтесь, граждане!</p>
6-
<HelloI18n/>
3+
<form novalidate @submit.prevent="validateUser">
4+
<md-field :class="getValidationClass('username')">
5+
<label>{{ $t('fieldUsernameLabel') }}</label>
6+
<md-input v-model="username"></md-input>
7+
<span class="md-error" v-if="!$v.username.required">{{ $t('errorMessageRequired') }}</span>
8+
</md-field>
9+
10+
<md-field :class="getValidationClass('password')">
11+
<label>{{ $t('fieldPasswordLabel') }}</label>
12+
<md-input type="password" v-model="password"></md-input>
13+
<span class="md-error" v-if="!$v.password.required">{{ $t('errorMessageRequired') }}</span>
14+
</md-field>
15+
16+
<md-card-actions>
17+
<md-button type="submit" class="md-raised md-primary">
18+
{{ $t('submitButtonText') }}
19+
</md-button>
20+
</md-card-actions>
21+
</form>
722
</div>
823
</template>
924

1025
<script>
11-
import HelloI18n from './HelloI18n.vue';
12-
import LocaleChanger from './LocaleChanger.vue';
26+
import { required } from 'vuelidate/lib/validators';
1327
1428
export default {
1529
name: 'AuthForm',
1630
17-
components: {
18-
HelloI18n,
19-
LocaleChanger,
31+
data() {
32+
return {
33+
username: '',
34+
password: '',
35+
};
36+
},
37+
38+
methods: {
39+
getValidationClass(fieldName) {
40+
const field = this.$v[fieldName];
41+
42+
if (field) {
43+
return {
44+
'md-invalid': field.$invalid && field.$dirty,
45+
};
46+
}
47+
48+
return '';
49+
},
50+
51+
validateUser() {
52+
this.$v.$touch();
53+
54+
if (!this.$v.$invalid) {
55+
console.log('success');
56+
}
57+
},
58+
},
59+
60+
validations: {
61+
username: {
62+
required,
63+
},
64+
65+
password: {
66+
required,
67+
},
2068
},
2169
};
2270
</script>
23-
2471
<style scoped lang="scss">
2572
.auth-form {
26-
box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
27-
background: #fff;
28-
padding: 20px;
29-
width: 500px;
30-
margin: 30px auto 0;
3173
}
3274
</style>
75+
76+
<i18n>
77+
{
78+
"ru": {
79+
"fieldUsernameLabel": "Имя пользователя",
80+
"fieldPasswordLabel": "Пароль",
81+
"submitButtonText": "Войти"
82+
},
83+
"en": {
84+
"fieldUsernameLabel": "Username",
85+
"fieldPasswordLabel": "Password",
86+
"submitButtonText": "Sign in"
87+
}
88+
}
89+
</i18n>

0 commit comments

Comments
 (0)