trusted-setup-server/components/Form.vue

70 lines
2.0 KiB
Vue
Raw Normal View History

<template>
<div class="form">
<div v-if="isLoggedIn" class="fields">
2020-02-08 15:41:27 +01:00
<button @click="logOut" class="button is-icon logout">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path
fill="#94febf"
d="M14.08,15.59L16.67,13H7V11H16.67L14.08,8.41L15.5,7L20.5,12L15.5,17L14.08,15.59M19,3A2,2 0 0,1 21,5V9.67L19,7.67V5H5V19H19V16.33L21,14.33V19A2,2 0 0,1 19,21H5C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H19Z"
/>
</svg>
</button>
<b-field
:type="{ 'is-danger': hasErrorName.invalid }"
:message="{ [hasErrorName.msg]: hasErrorName.invalid }"
label="Name"
>
<b-input v-model="userName" @blur="restrictSymbols('userName')" maxlength="35"></b-input>
</b-field>
2020-04-29 21:26:36 +02:00
<b-field label="Project">
<b-input
v-model="userCompany"
@blur="restrictSymbols('userCompany')"
maxlength="35"
></b-input>
</b-field>
</div>
<div v-else class="buttons">
2020-02-07 16:21:34 +01:00
<b-button @click="logInVia('twitter')" type="is-primary" outlined expanded>
Sign in with Twitter
</b-button>
2020-02-07 16:21:34 +01:00
<b-button @click="logInVia('github')" type="is-primary" outlined expanded>
Sign in with Github
</b-button>
</div>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
computed: {
...mapGetters('user', ['isLoggedIn', 'hasErrorName']),
userName: {
get() {
return this.$store.state.user.name
},
set(value) {
this.$store.commit('user/SET_NAME', value)
}
},
userCompany: {
get() {
return this.$store.state.user.company
},
set(value) {
this.$store.commit('user/SET_COMPANY', value)
}
}
},
methods: {
...mapActions('user', ['makeTweet', 'logInVia', 'logOut']),
restrictSymbols(name) {
const regExpression = new RegExp('[^0-9a-zA-Z\\x20]', 'g')
this[name] = this[name].replace(regExpression, '')
}
}
}
</script>