Use v-model in network form, auto size commands

This commit is contained in:
Pavel Djundik 2020-04-06 11:42:10 +03:00
parent 6ee71779d1
commit fce71f4a7c
3 changed files with 76 additions and 31 deletions

View file

@ -6,7 +6,7 @@
<form class="container" method="post" action="" @submit.prevent="onSubmit"> <form class="container" method="post" action="" @submit.prevent="onSubmit">
<h1 class="title"> <h1 class="title">
<template v-if="defaults.uuid"> <template v-if="defaults.uuid">
<input type="hidden" name="uuid" :value="defaults.uuid" /> <input v-model="defaults.uuid" type="hidden" name="uuid" />
Edit {{ defaults.name }} Edit {{ defaults.name }}
</template> </template>
<template v-else> <template v-else>
@ -20,9 +20,9 @@
<label for="connect:name">Name</label> <label for="connect:name">Name</label>
<input <input
id="connect:name" id="connect:name"
v-model="defaults.name"
class="input" class="input"
name="name" name="name"
:value="defaults.name"
maxlength="100" maxlength="100"
/> />
</div> </div>
@ -31,9 +31,9 @@
<div class="input-wrap"> <div class="input-wrap">
<input <input
id="connect:host" id="connect:host"
v-model="defaults.host"
class="input" class="input"
name="host" name="host"
:value="defaults.host"
aria-label="Server address" aria-label="Server address"
maxlength="255" maxlength="255"
required required
@ -41,13 +41,12 @@
<span id="connect:portseparator">:</span> <span id="connect:portseparator">:</span>
<input <input
id="connect:port" id="connect:port"
ref="serverPort" v-model="defaults.port"
class="input" class="input"
type="number" type="number"
min="1" min="1"
max="65535" max="65535"
name="port" name="port"
:value="defaults.port"
aria-label="Server port" aria-label="Server port"
/> />
</div> </div>
@ -74,11 +73,10 @@
<div class="input-wrap"> <div class="input-wrap">
<label class="tls"> <label class="tls">
<input <input
v-model="defaults.tls"
type="checkbox" type="checkbox"
name="tls" name="tls"
:checked="defaults.tls ? true : false" :disabled="defaults.hasSTSPolicy"
:disabled="defaults.hasSTSPolicy ? true : false"
@change="onSecureChanged"
/> />
Use secure connection (TLS) Use secure connection (TLS)
<span <span
@ -90,9 +88,9 @@
</label> </label>
<label class="tls"> <label class="tls">
<input <input
v-model="defaults.rejectUnauthorized"
type="checkbox" type="checkbox"
name="rejectUnauthorized" name="rejectUnauthorized"
:checked="defaults.rejectUnauthorized ? true : false"
/> />
Only allow trusted certificates Only allow trusted certificates
</label> </label>
@ -105,10 +103,10 @@
<label for="connect:nick">Nick</label> <label for="connect:nick">Nick</label>
<input <input
id="connect:nick" id="connect:nick"
v-model="defaults.nick"
class="input nick" class="input nick"
name="nick" name="nick"
pattern="[^\s:!@]+" pattern="[^\s:!@]+"
:value="defaults.nick"
maxlength="100" maxlength="100"
required required
@input="onNickChanged" @input="onNickChanged"
@ -120,9 +118,9 @@
<input <input
id="connect:username" id="connect:username"
ref="usernameInput" ref="usernameInput"
v-model="defaults.username"
class="input username" class="input username"
name="username" name="username"
:value="defaults.username"
maxlength="100" maxlength="100"
/> />
</div> </div>
@ -131,28 +129,44 @@
<label for="connect:realname">Real name</label> <label for="connect:realname">Real name</label>
<input <input
id="connect:realname" id="connect:realname"
v-model="defaults.realname"
class="input" class="input"
name="realname" name="realname"
:value="defaults.realname"
maxlength="300" maxlength="300"
/> />
</div> </div>
<template v-if="defaults.uuid"> <template v-if="defaults.uuid && !$store.state.serverConfiguration.public">
<div class="connect-row"> <div class="connect-row">
<label for="connect:commands">Commands</label> <label for="connect:commands">
Commands
<span
class="tooltipped tooltipped-ne tooltipped-no-delay"
aria-label="One /command per line.
Each command will be executed in
the server tab on new connection"
>
<button class="extra-help" />
</span>
</label>
<textarea <textarea
id="connect:commands" id="connect:commands"
ref="commandsInput"
:value="defaults.commands ? defaults.commands.join('\n') : ''"
class="input" class="input"
name="commands" name="commands"
placeholder="One /command per line, each command will be executed in the server tab on new connection" @input="resizeCommandsInput"
:value="defaults.commands ? defaults.commands.join('\n') : ''"
/> />
</div> </div>
</template> </template>
<template v-else> <template v-else-if="!defaults.uuid">
<div class="connect-row"> <div class="connect-row">
<label for="connect:channels">Channels</label> <label for="connect:channels">Channels</label>
<input id="connect:channels" class="input" name="join" :value="defaults.join" /> <input
id="connect:channels"
v-model="defaults.join"
class="input"
name="join"
/>
</div> </div>
</template> </template>
@ -175,6 +189,7 @@
> >
<input <input
id="connect:password" id="connect:password"
ref="publicPassword"
v-model="defaults.password" v-model="defaults.password"
class="input" class="input"
:type="slotProps.isVisible ? 'text' : 'password'" :type="slotProps.isVisible ? 'text' : 'password'"
@ -229,7 +244,7 @@
<label for="connect:username">Account</label> <label for="connect:username">Account</label>
<input <input
id="connect:saslAccount" id="connect:saslAccount"
:value="defaults.saslAccount" v-model="defaults.saslAccount"
class="input" class="input"
name="saslAccount" name="saslAccount"
maxlength="100" maxlength="100"
@ -244,7 +259,7 @@
> >
<input <input
id="connect:saslPassword" id="connect:saslPassword"
:value="defaults.saslPassword" v-model="defaults.saslPassword"
class="input" class="input"
:type="slotProps.isVisible ? 'text' : 'password'" :type="slotProps.isVisible ? 'text' : 'password'"
name="saslPassword" name="saslPassword"
@ -326,6 +341,26 @@ export default {
displayPasswordField: false, displayPasswordField: false,
}; };
}, },
watch: {
displayPasswordField(value) {
if (value) {
this.$nextTick(() => this.$refs.publicPassword.focus());
}
},
"defaults.commands"() {
this.$nextTick(this.resizeCommandsInput);
},
"defaults.tls"(isSecureChecked) {
const ports = [6667, 6697];
const newPort = isSecureChecked ? 0 : 1;
// If you disable TLS and current port is 6697,
// set it to 6667, and vice versa
if (this.defaults.port === ports[newPort]) {
this.defaults.port = ports[1 - newPort];
}
},
},
methods: { methods: {
setSaslAuth(type) { setSaslAuth(type) {
this.defaults.sasl = type; this.defaults.sasl = type;
@ -345,16 +380,6 @@ export default {
this.previousUsername = event.target.value; this.previousUsername = event.target.value;
}, },
onSecureChanged(event) {
const ports = ["6667", "6697"];
const newPort = event.target.checked ? 0 : 1;
// If you disable TLS and current port is 6697,
// set it to 6667, and vice versa
if (this.$refs.serverPort.value === ports[newPort]) {
this.$refs.serverPort.value = ports[1 - newPort];
}
},
onSubmit(event) { onSubmit(event) {
const formData = new FormData(event.target); const formData = new FormData(event.target);
const data = {}; const data = {};
@ -365,6 +390,18 @@ export default {
this.handleSubmit(data); this.handleSubmit(data);
}, },
resizeCommandsInput() {
if (!this.$refs.commandsInput) {
return;
}
// Reset height first so it can down size
this.$refs.commandsInput.style.height = "";
// 2 pixels to account for the border
this.$refs.commandsInput.style.height =
Math.ceil(this.$refs.commandsInput.scrollHeight + 2) + "px";
},
}, },
}; };
</script> </script>

View file

@ -481,6 +481,12 @@ This may break orientation if your browser does not support that."
</div> </div>
</template> </template>
<style>
textarea#user-specified-css-input {
height: 100px;
}
</style>
<script> <script>
import socket from "../../js/socket"; import socket from "../../js/socket";
import webpush from "../../js/webpush"; import webpush from "../../js/webpush";

View file

@ -288,6 +288,7 @@ p {
.channel-list-item::before, .channel-list-item::before,
#footer .icon, #footer .icon,
#chat .count::before, #chat .count::before,
#connect .extra-help,
#settings .extra-help, #settings .extra-help,
#settings #play::before, #settings #play::before,
#form #upload::before, #form #upload::before,
@ -507,6 +508,7 @@ p {
line-height: 45px; line-height: 45px;
} }
#connect .extra-help::before,
#settings .extra-help::before { #settings .extra-help::before {
content: "\f059"; /* http://fontawesome.io/icon/question-circle/ */ content: "\f059"; /* http://fontawesome.io/icon/question-circle/ */
} }
@ -938,7 +940,6 @@ background on hover (unless active) */
textarea.input { textarea.input {
resize: vertical; resize: vertical;
height: 100px;
min-height: 35px; min-height: 35px;
padding: 6px 10px; padding: 6px 10px;
line-height: 1.5; line-height: 1.5;
@ -1874,6 +1875,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
margin-right: 6px; margin-right: 6px;
} }
#connect .extra-help,
#settings .extra-help { #settings .extra-help {
cursor: help; cursor: help;
} }