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

External route create user #33

Merged
merged 4 commits into from
Feb 11, 2021
Merged

External route create user #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
588b7c9
registration page and basic authentication
raw-vitor Feb 8, 2021
b7a06e5
user creation and simple validation
raw-vitor Feb 9, 2021
bf6f16d
register page and basic authentication
raw-vitor Feb 10, 2021
71da208
registration page and basic authentication
raw-vitor Feb 10, 2021
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
Binary file added img/bg.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
313 changes: 261 additions & 52 deletions src/views/CreateUser.vue
100644 → 100755
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,56 +1,83 @@
<!--
- @copyright Copyright (c) 2021 Lyseon Tech <contato@lt.coop.br>
-
- @author Lyseon Tech <contato@lt.coop.br>
- @author Vinicios Gomes <viniciusgomesvaian@gmail.com>
-
- @license GNU AGPL version 3 or any later version
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <http://www.gnu.org/licenses/>.
-
-->
<template>
<Content app-name="libresign">
<Content app-name="libresign" class="jumbotron">
<div id="container">
<form>
<Avatar id="avatar" :user="username.length ? username : 'User'" :size="sizeAvatar" />
<input v-model="username"
type="text"
required
placeholder="Nome">
<input type="password" required placeholder="Senha">

<div v-tooltip.right="{
content: 'Senha para confirmar assinatura no documento!',
show: true,
trigger: 'hover focus'

}">
<input type="password" required placeholder="Senha PFX">
</div>
<button @click="teste">
Cadastrar
</button>
</form>
<div class="bg">
<form>
<Avatar id="avatar" :user="username.length ? username : 'User'" :size="sizeAvatar" />
<div class="group">
<input
v-model="username"
v-tooltip.right="{
content: 'Insira seu nome ',
show: tooltip.name,
trigger: 'false',
}"
type="text"
:required="validator.name"
placeholder="Nome"
@focus="tooltip.nameFocus = true; tooltip.name = false"
@blur="tooltip.nameFocus = false; validationName()">
<div v-show="validator.name"
class="icon-error-white" />
</div>
<div class="group">
<input
v-model="pass"
v-tooltip.right="{
content: 'A senha deve ter no mínimo 8 caracteres',
show: tooltip.pass,
trigger: 'false'
}"
type="password"
:required="validator.pass"
placeholder="Senha"
@focus="tooltip.passFocus = true; tooltip.pass = false"
@blur="tooltip.passFocus = false; validationPass()">
<div v-show="validator.pass"
class="icon-error-white" />
</div>
<div class="group">
<input
v-model="passConfirm"
v-tooltip.right="{
content: 'Senhas não coincidem',
show: tooltip.passConfirm,
trigger: 'false'
}"
type="password"
:required="validator.passConfirm"
placeholder="Confirmar senha"
@focus="tooltip.passConfirmFocus = true; tooltip.passConfirm = false"
@blur="tooltip.passConfirmFocus = false; validationPasswords()">
<div v-show="validator.passConfirm"
class="icon-error-white" />
</div>

<div
v-tooltip.right="{
content: 'Senha para confirmar assinatura no documento!',
show: false,
trigger: 'hover focus'
}"
class="group">
<input
v-model="pfx"
:required="validator.pfx"
placeholder="Senha PFX">
<div v-show="validator.pfx" class="icon-error-white" />
</div>
<button class="btn" :disabled="!validator.btn">
Cadastrar
</button>
</form>
</div>
</div>
</Content>
</template>

<script>
import Content from '@nextcloud/vue/dist/Components/Content'
import Avatar from '@nextcloud/vue/dist/Components/Avatar'
import { showSuccess } from '@nextcloud/dialogs'
export default {
name: 'CreateUser',
components: {
Expand All @@ -61,10 +88,48 @@ export default {
data() {
return {
username: '',
pass: '',
passConfirm: '',
pfx: '',
sizeAvatar: 100,
validator: {
name: false,
pass: false,
passConfirm: false,
pfx: false,
btn: false,
},
tooltip: {
name: false,
nameFocus: false,
pass: false,
passFocus: false,
passConfirm: false,
passConfirmFocus: false,

},
}
},

watch: {
username() {
this.validationName()
this.validationBtn()
},
pass() {
this.validationPass()
this.validationPasswords()
this.validationBtn()
},
passConfirm() {
this.validationPassConfirm()
this.validationPasswords()
this.validationBtn()
},
pfx() {
this.validationPfx()
this.validationBtn()
},
},
created() {
this.changeSizeAvatar()
},
Expand All @@ -73,8 +138,80 @@ export default {
changeSizeAvatar() {
screen.width >= 534 ? this.sizeAvatar = 150 : this.sizeAvatar = 100
},
teste() {
showSuccess('Teste')

validationName() {
if (this.username.length < 3) {
this.validator.name = true
if (this.tooltip.nameFocus === false) {
this.tooltip.name = true
} else {
this.tooltip.name = false
this.tooltip.name = false
}
} else {
this.validator.name = false
this.tooltip.name = false
}
},
validationPass() {
if (this.pass.length < 8) {
this.validator.pass = true
if (this.tooltip.passFocus === false) {
this.tooltip.pass = true
} else {
this.tooltip.pass = false
}
} else {
this.validator.pass = false
this.tooltip.pass = false
}
if (this.pass.length > 0 && this.passConfirm.length > 0 && this.pass !== this.passConfirm) {
this.validator.pass = true
this.validator.passConfirm = true
} else {
this.validator.pass = false
this.validator.passConfirm = false
}
},
validationPassConfirm() {
if (this.passConfirm.length < 8) {
this.validator.passConfirm = true
} else {
this.validator.passConfirm = false
this.validator.pass = false
}
},
validationPfx() {
if (this.pfx.length < 3) {
this.validator.pfx = true
} else {
this.validator.pfx = false
}
},
validationPasswords() {
if (this.pass !== this.passConfirm) {
this.validator.pass = true
this.validator.passConfirm = true
if (this.tooltip.passConfirmFocus === false && this.tooltip.passFocus === false) {
this.tooltip.passConfirm = true
} else {
this.tooltip.passConfirm = false
}
} else {
this.validator.pass = false
this.validator.passConfirm = false
}
},
validationBtn() {
if (this.validator.name === false && this.validator.passConfirm === false && this.validator.pfx === false) {
if (this.username.length > 2 && this.passConfirm.length > 2 && this.pfx.length > 2) {
this.validator.btn = true
} else {
this.validator.btn = false
}
} else {
this.validator.btn = false
}
},
},
}
Expand All @@ -89,31 +226,37 @@ export default {
width: 100%;
}

#avatar{
margin-bottom: 20px;
}

#password{
margin-right: 3px;
}

form{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 40%
width: 80%;
margin: 10px 0px 10px 0px;
}

form > div{
width: 100%;
}

input {
min-width: 317px;
width: 100%
}
@media screen and (max-width: 535px) {
form {width: 90%}
}

#tooltip{
position: relative;

span{
width: 160px;
background: #fefefe;
padding: 8px;
border-radius: 4px;
font-size: 14px;
Expand All @@ -127,4 +270,70 @@ input {
left: 50%;
}
}

.group{
display: flex;
}

.btn{
margin-top: 10px;
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.bg{
display: flex;
justify-content: center;
background-image: linear-gradient(40deg, #0082c9 0%, #1cafff 100%);
width: 400px;
border-radius: 5px;
box-shadow: rgba(0, 130, 201, 0.4) 5px 5px, rgba(0, 130, 201, 0.3) 10px 10px, rgba(0, 130, 201, 0.2) 15px 15px, rgba(0, 130, 201, 0.1) 20px 20px, rgba(0, 130, 201, 0.05) 25px 25px;

transition: all;
transition-duration: 1s;
}

.jumbotron{
background-image: url('../../img/bg.jpg');
background-size: cover;

transition: background-position-x;
transition-duration: 2s;
}

@media screen and (max-width: 750px) {
.jumbotron{
background-position-x: 50%
}
}

@media screen and (max-width: 535px) {
// form {width: 90%}
.bg{
transition: all;
transition-duration: 1s;
width: 99%;
}
input {
max-width: 90%
}
}

@media screen and (max-width: 380px) {
.bg{
transition: all;
transition-duration: 2s;
background-image: none;
background-color: #0082c9;
border-radius: 0;
width: 100%;
box-shadow: none;
}
.jumbotron{
background-image:none;
background-color:#0082c9;
}
input{
max-width: 317px;
}
}
</style>