Mercurial > gemma
diff client/src/components/importschedule/importtypes/Waterwaygauges.vue @ 1996:fda5c78fb7d3 importschedulerefac
moved components
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 24 Jan 2019 13:43:36 +0100 |
parents | client/src/components/importschedule/Waterwaygauges.vue@29f02d0043a9 |
children | 5af57aa2b8fc |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/components/importschedule/importtypes/Waterwaygauges.vue Thu Jan 24 13:43:36 2019 +0100 @@ -0,0 +1,105 @@ +<template> + <div> + <div class="d-flex flex-row"> + <div class="flex-column mt-3 mr-3 w-100"> + <div class="flex-row text-left"> + <small class="text-muted"> <translate>URL</translate> </small> + </div> + <div class="w-100"> + <input + @keyup="urlChanged" + class="form-control" + type="url" + :value="url" + /> + </div> + </div> + </div> + <div v-if="!url" class="d-flex flex-row"> + <small + ><translate class="text-danger">Please enter a URL</translate></small + > + </div> + <div class="d-flex flex-row"> + <div class="flex-column mt-3 mr-3 w-50"> + <div class="flex-row text-left"> + <small class="text-muted"> <translate>Username</translate> </small> + </div> + <div class="w-100"> + <input + @keyup="usernameChanged" + class="form-control" + type="text" + :value="username" + /> + </div> + <div v-if="!username" class="d-flex flex-row"> + <small + ><translate class="text-danger" + >Please enter a Username</translate + ></small + > + </div> + </div> + <div class="flex-column mt-3 w-50"> + <div class="flex-row text-left"> + <small class="text-muted"> <translate>Password</translate> </small> + </div> + <div class="w-100 d-flex flex-row"> + <input + @keyup="passwordChanged" + class="form-control" + :type="showPassword" + :value="password" + /> + <span + class="input-group-text ml-2" + @click="passwordVisible = !passwordVisible" + > + <font-awesome-icon + :icon="passwordVisible ? 'eye-slash' : 'eye'" + ></font-awesome-icon> + </span> + </div> + <div v-if="!password" class="d-flex flex-row"> + <small + ><translate class="text-danger" + >Please enter a Password</translate + ></small + > + </div> + </div> + </div> + </div> +</template> + +<script> +export default { + name: "waterwaygauges", + props: ["username", "password", "url"], + data() { + return { + passwordVisible: false + }; + }, + computed: { + showPassword() { + if (this.passwordVisible) return "text"; + return "password"; + } + }, + methods: { + urlChanged(e) { + this.$emit("urlChanged", e.target.value); + }, + usernameChanged(e) { + this.$emit("usernameChanged", e.target.value); + }, + passwordChanged(e) { + this.$emit("passwordChanged", e.target.value); + } + } +}; +</script> + +<style></style>