mirror of
https://github.com/thelounge/thelounge.git
synced 2024-05-15 12:46:38 +02:00
Merge c715ba0f7b into da2572fe25
This commit is contained in:
Reto
GitHub
commit
308c9381ad
|
|
@ -58,19 +58,11 @@
|
|||
<div class="connect-row">
|
||||
<label for="connect:password">Password</label>
|
||||
<RevealPassword
|
||||
v-slot:default="slotProps"
|
||||
class="input-wrap password-container"
|
||||
>
|
||||
<input
|
||||
id="connect:password"
|
||||
v-model="defaults.password"
|
||||
class="input"
|
||||
:type="slotProps.isVisible ? 'text' : 'password'"
|
||||
placeholder="Server password (optional)"
|
||||
name="password"
|
||||
maxlength="300"
|
||||
/>
|
||||
</RevealPassword>
|
||||
id="connect:password"
|
||||
v-model:password="defaults.password"
|
||||
name="password"
|
||||
placeholder="Server password (optional)"
|
||||
/>
|
||||
</div>
|
||||
<div class="connect-row">
|
||||
<label></label>
|
||||
|
|
@ -158,20 +150,12 @@
|
|||
<div class="connect-row">
|
||||
<label for="connect:proxyPassword">Proxy password</label>
|
||||
<RevealPassword
|
||||
v-slot:default="slotProps"
|
||||
class="input-wrap password-container"
|
||||
>
|
||||
<input
|
||||
id="connect:proxyPassword"
|
||||
ref="proxyPassword"
|
||||
v-model="defaults.proxyPassword"
|
||||
class="input"
|
||||
:type="slotProps.isVisible ? 'text' : 'password'"
|
||||
placeholder="Proxy password"
|
||||
name="proxyPassword"
|
||||
maxlength="300"
|
||||
/>
|
||||
</RevealPassword>
|
||||
id="connect:proxyPassword"
|
||||
ref="proxyPassword"
|
||||
v-model:password="defaults.proxyPassword"
|
||||
name="proxyPassword"
|
||||
placeholder="Proxy password"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
|
@ -190,19 +174,11 @@
|
|||
<div class="connect-row">
|
||||
<label for="connect:password">Password</label>
|
||||
<RevealPassword
|
||||
v-slot:default="slotProps"
|
||||
class="input-wrap password-container"
|
||||
>
|
||||
<input
|
||||
id="connect:password"
|
||||
v-model="defaults.password"
|
||||
class="input"
|
||||
:type="slotProps.isVisible ? 'text' : 'password'"
|
||||
placeholder="Server password (optional)"
|
||||
name="password"
|
||||
maxlength="300"
|
||||
/>
|
||||
</RevealPassword>
|
||||
id="connect:password"
|
||||
v-model:password="defaults.password"
|
||||
placeholder="Server password (optional)"
|
||||
name="password"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -304,20 +280,12 @@ the server tab on new connection"
|
|||
<div v-if="displayPasswordField" class="connect-row">
|
||||
<label for="connect:password">Password</label>
|
||||
<RevealPassword
|
||||
v-slot:default="slotProps"
|
||||
class="input-wrap password-container"
|
||||
>
|
||||
<input
|
||||
id="connect:password"
|
||||
ref="publicPassword"
|
||||
v-model="defaults.password"
|
||||
class="input"
|
||||
:type="slotProps.isVisible ? 'text' : 'password'"
|
||||
placeholder="Server password (optional)"
|
||||
name="password"
|
||||
maxlength="300"
|
||||
/>
|
||||
</RevealPassword>
|
||||
id="connect:password"
|
||||
ref="publicPassword"
|
||||
v-model:password="defaults.password"
|
||||
placeholder="Server password (optional)"
|
||||
name="password"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
|
@ -374,19 +342,12 @@ the server tab on new connection"
|
|||
<div class="connect-row">
|
||||
<label for="connect:password">Password</label>
|
||||
<RevealPassword
|
||||
v-slot:default="slotProps"
|
||||
class="input-wrap password-container"
|
||||
>
|
||||
<input
|
||||
id="connect:saslPassword"
|
||||
v-model="defaults.saslPassword"
|
||||
class="input"
|
||||
:type="slotProps.isVisible ? 'text' : 'password'"
|
||||
name="saslPassword"
|
||||
maxlength="300"
|
||||
required
|
||||
/>
|
||||
</RevealPassword>
|
||||
id="connect:saslPassword"
|
||||
v-model:password="defaults.saslPassword"
|
||||
class="input"
|
||||
name="saslPassword"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else-if="defaults.sasl === 'external'" class="connect-sasl-external">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<slot :is-visible="isVisible" />
|
||||
<div class="password-container">
|
||||
<span
|
||||
ref="revealButton"
|
||||
type="button"
|
||||
|
|
@ -13,14 +12,37 @@
|
|||
>
|
||||
<span :aria-label="isVisible ? 'Hide password' : 'Show password'" />
|
||||
</span>
|
||||
<input
|
||||
:value="password"
|
||||
:type="isVisible ? 'text' : 'password'"
|
||||
v-bind="$attrs"
|
||||
class="input"
|
||||
autocapitalize="none"
|
||||
autocorrect="off"
|
||||
maxlength="300"
|
||||
@input="$emit('update:password', ($event.target as HTMLInputElement).value || '')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.password-container {
|
||||
width: 100%; /* we pretty much always want to expand to the full space here, so let's default to that*/
|
||||
}
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent, ref} from "vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: "RevealPassword",
|
||||
inheritAttrs: false, // we pass those all to the input field
|
||||
props: {
|
||||
password: String,
|
||||
},
|
||||
emits: {
|
||||
"update:password": String, // this makes v-model:password magically update the reactive container if the input changes
|
||||
},
|
||||
setup() {
|
||||
const isVisible = ref(false);
|
||||
|
||||
|
|
|
|||
|
|
@ -10,47 +10,35 @@
|
|||
aria-labelledby="label-change-password"
|
||||
>
|
||||
<h2 id="label-change-password">Change password</h2>
|
||||
<div class="password-container">
|
||||
<div>
|
||||
<label for="current-password" class="sr-only"> Enter current password </label>
|
||||
<RevealPassword v-slot:default="slotProps">
|
||||
<input
|
||||
id="current-password"
|
||||
v-model="old_password"
|
||||
autocomplete="current-password"
|
||||
:type="slotProps.isVisible ? 'text' : 'password'"
|
||||
name="old_password"
|
||||
class="input"
|
||||
placeholder="Enter current password"
|
||||
/>
|
||||
</RevealPassword>
|
||||
<RevealPassword
|
||||
id="current-password"
|
||||
v-model:password="old_password"
|
||||
autocomplete="current-password"
|
||||
name="old_password"
|
||||
placeholder="Enter current password"
|
||||
/>
|
||||
</div>
|
||||
<div class="password-container">
|
||||
<div>
|
||||
<label for="new-password" class="sr-only"> Enter desired new password </label>
|
||||
<RevealPassword v-slot:default="slotProps">
|
||||
<input
|
||||
id="new-password"
|
||||
v-model="new_password"
|
||||
:type="slotProps.isVisible ? 'text' : 'password'"
|
||||
name="new_password"
|
||||
autocomplete="new-password"
|
||||
class="input"
|
||||
placeholder="Enter desired new password"
|
||||
/>
|
||||
</RevealPassword>
|
||||
<RevealPassword
|
||||
id="new-password"
|
||||
v-model:password="new_password"
|
||||
name="new_password"
|
||||
autocomplete="new-password"
|
||||
placeholder="Enter desired new password"
|
||||
/>
|
||||
</div>
|
||||
<div class="password-container">
|
||||
<div>
|
||||
<label for="new-password-verify" class="sr-only"> Repeat new password </label>
|
||||
<RevealPassword v-slot:default="slotProps">
|
||||
<input
|
||||
id="new-password-verify"
|
||||
v-model="verify_password"
|
||||
:type="slotProps.isVisible ? 'text' : 'password'"
|
||||
name="verify_password"
|
||||
autocomplete="new-password"
|
||||
class="input"
|
||||
placeholder="Repeat new password"
|
||||
/>
|
||||
</RevealPassword>
|
||||
<RevealPassword
|
||||
id="new-password-verify"
|
||||
v-model:password="verify_password"
|
||||
name="verify_password"
|
||||
autocomplete="new-password"
|
||||
placeholder="Repeat new password"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="passwordChangeStatus && passwordChangeStatus.success"
|
||||
|
|
|
|||
|
|
@ -30,21 +30,14 @@
|
|||
autofocus
|
||||
/>
|
||||
|
||||
<div class="password-container">
|
||||
<label for="signin-password">Password</label>
|
||||
<RevealPassword v-slot:default="slotProps">
|
||||
<input
|
||||
id="signin-password"
|
||||
v-model="password"
|
||||
:type="slotProps.isVisible ? 'text' : 'password'"
|
||||
class="input"
|
||||
autocapitalize="none"
|
||||
autocorrect="off"
|
||||
autocomplete="current-password"
|
||||
required
|
||||
/>
|
||||
</RevealPassword>
|
||||
</div>
|
||||
<label for="signin-password">Password</label>
|
||||
<RevealPassword
|
||||
id="signin-password"
|
||||
v-model:password="password"
|
||||
name="password"
|
||||
autocomplete="current-password"
|
||||
required
|
||||
/>
|
||||
|
||||
<div v-if="errorShown" class="error">Authentication failed.</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -2015,10 +2015,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
#sign-in .password-container .reveal-password {
|
||||
top: 31px;
|
||||
}
|
||||
|
||||
.password-container .reveal-password {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
|
|
|
|||
Loading…
Reference in a new issue