Fix lint and format with prettier.

This commit is contained in:
Richard Lewis 2019-08-03 22:03:45 +03:00 committed by Pavel Djundik
parent e0ec340de8
commit b5f2e7f0cc
16 changed files with 302 additions and 439 deletions

View File

@ -1,24 +1,14 @@
<template>
<!-- TODO: move all class toggling to vue, since vue clears existing classes when changing the notified class -->
<div
id="viewport"
:class="viewportClasses"
role="tablist"
>
<Sidebar
:networks="networks"
:active-channel="activeChannel"
/>
<div id="viewport" :class="viewportClasses" role="tablist">
<Sidebar :networks="networks" :active-channel="activeChannel" />
<article id="windows">
<Chat
v-if="activeChannel"
:network="activeChannel.network"
:channel="activeChannel.channel"
/>
<component
:is="$store.state.activeWindow"
ref="window"
/>
<component :is="$store.state.activeWindow" ref="window" />
</article>
</div>
</template>
@ -57,7 +47,7 @@ export default {
computed: {
viewportClasses() {
return {
"notified": this.$store.state.isNotified,
notified: this.$store.state.isNotified,
"menu-open": this.$store.state.sidebarOpen,
"userlist-open": this.$store.state.userlistOpen,
};

View File

@ -17,27 +17,13 @@
>
<span class="parted-channel-icon" />
</span>
<span
class="close-tooltip tooltipped tooltipped-w"
aria-label="Leave"
>
<button
class="close"
aria-label="Leave"
@click="close"
/>
<span class="close-tooltip tooltipped tooltipped-w" aria-label="Leave">
<button class="close" aria-label="Leave" @click="close" />
</span>
</template>
<template v-else>
<span
class="close-tooltip tooltipped tooltipped-w"
aria-label="Close"
>
<button
class="close"
aria-label="Close"
@click="close"
/>
<span class="close-tooltip tooltipped tooltipped-w" aria-label="Close">
<button class="close" aria-label="Close" @click="close" />
</span>
</template>
</ChannelWrapper>

View File

@ -1,13 +1,13 @@
<template>
<!-- TODO: move closed style to it's own class -->
<div
ref="element"
v-if="
!network.isCollapsed ||
channel.highlight ||
channel.type === 'lobby' ||
(activeChannel && channel === activeChannel.channel)
"
ref="element"
:class="[
'chan',
channel.type,
@ -50,8 +50,8 @@ export default {
if (this.channel.type === "lobby") {
cmd = "/quit";
// eslint-disable-next-line no-alert
if (!confirm(`Are you sure you want to remove ${this.channel.name}?`)) {
// eslint-disable-line no-alert
return false;
}
}

View File

@ -1,32 +1,20 @@
<template>
<div
id="connect"
class="window"
role="tabpanel"
aria-label="Connect"
>
<div id="connect" class="window" role="tabpanel" aria-label="Connect">
<div class="header">
<SidebarToggle />
</div>
<form
class="container"
method="post"
action=""
@submit.prevent="onSubmit"
>
<form class="container" method="post" action="" @submit.prevent="onSubmit">
<div class="row">
<div class="col-sm-12">
<h1 class="title">
<template v-if="defaults.uuid">
<input
type="hidden"
name="uuid"
:value="defaults.uuid"
>
<input type="hidden" name="uuid" :value="defaults.uuid" />
Edit {{ defaults.name }}
</template>
<template v-else>
<template v-if="config.public">The Lounge - </template>
<template v-if="config.public"
>The Lounge -
</template>
Connect
<template v-if="!config.displayNetwork">
<template v-if="config.lockNetwork">
@ -51,7 +39,7 @@
name="name"
:value="defaults.name"
maxlength="100"
>
/>
</div>
<div class="col-sm-3">
<label for="connect:host">Server</label>
@ -66,7 +54,7 @@
maxlength="255"
required
:disabled="config.lockNetwork ? true : false"
>
/>
</div>
<div class="col-sm-3 col-xs-4">
<div class="port">
@ -79,7 +67,7 @@
:value="defaults.port"
aria-label="Server port"
:disabled="config.lockNetwork ? true : false"
>
/>
</div>
</div>
<div class="clearfix" />
@ -90,7 +78,7 @@
name="tls"
:checked="defaults.tls ? true : false"
:disabled="config.lockNetwork ? true : false"
>
/>
Use secure connection (TLS)
</label>
</div>
@ -101,7 +89,7 @@
name="rejectUnauthorized"
:checked="defaults.rejectUnauthorized ? true : false"
:disabled="config.lockNetwork ? true : false"
>
/>
Only allow trusted certificates
</label>
</div>
@ -122,7 +110,7 @@
:value="defaults.nick"
maxlength="100"
required
>
/>
</div>
<template v-if="!config.useHexIp">
<div class="col-sm-3">
@ -135,7 +123,7 @@
name="username"
:value="defaults.username"
maxlength="512"
>
/>
</div>
</template>
<div class="col-sm-3">
@ -150,7 +138,7 @@
:type="slotProps.isVisible ? 'text' : 'password'"
name="password"
maxlength="512"
>
/>
</RevealPassword>
</div>
<div class="col-sm-3">
@ -163,7 +151,7 @@
name="realname"
:value="defaults.realname"
maxlength="512"
>
/>
</div>
<template v-if="defaults.uuid">
<div class="col-sm-3">
@ -179,11 +167,9 @@
/>
</div>
<div class="col-sm-9 col-sm-offset-3">
<button
type="submit"
class="btn"
:disabled="disabled ? true : false"
>Save</button>
<button type="submit" class="btn" :disabled="disabled ? true : false">
Save
</button>
</div>
</template>
<template v-else>
@ -196,19 +182,16 @@
class="input"
name="join"
:value="defaults.join"
>
/>
</div>
<div class="col-sm-9 col-sm-offset-3">
<button
type="submit"
class="btn"
:disabled="disabled ? true : false"
>Connect</button>
<button type="submit" class="btn" :disabled="disabled ? true : false">
Connect
</button>
</div>
</template>
</div>
</form>
</div>
</template>

View File

@ -6,14 +6,12 @@
type="button"
:class="[
'reveal-password tooltipped tooltipped-n tooltipped-no-delay',
{ 'reveal-password-visible': isVisible },
{'reveal-password-visible': isVisible},
]"
:aria-label="isVisible ? 'Hide password' : 'Show password'"
@click="onClick"
>
<span
:aria-label="isVisible ? 'Hide password' : 'Show password'"
/>
<span :aria-label="isVisible ? 'Hide password' : 'Show password'" />
</span>
</div>
</template>

View File

@ -1,9 +1,6 @@
<template>
<p>
<button
class="btn pull-right remove-session"
@click.prevent="signOut"
>
<button class="btn pull-right remove-session" @click.prevent="signOut">
<template v-if="session.current">
Sign out
</template>
@ -14,14 +11,12 @@
<strong>{{ session.agent }}</strong>
<a
:href="'https://ipinfo.io/'+session.ip"
target="_blank"
rel="noopener"
>{{ session.ip }}</a>
<a :href="'https://ipinfo.io/' + session.ip" target="_blank" rel="noopener">{{
session.ip
}}</a>
<template v-if="!session.current">
<br>
<br />
<template v-if="session.active">
<em>Currently active</em>
</template>

View File

@ -7,73 +7,63 @@
:src="`img/logo-${isPublic() ? 'horizontal-' : ''}transparent-bg.svg`"
class="logo"
alt="The Lounge"
>
/>
<img
:src="`img/logo-${isPublic() ? 'horizontal-' : ''}transparent-bg-inverted.svg`"
:src="
`img/logo-${isPublic() ? 'horizontal-' : ''}transparent-bg-inverted.svg`
"
class="logo-inverted"
alt="The Lounge"
>
/>
</div>
<NetworkList
:networks="networks"
:active-channel="activeChannel"
/>
<NetworkList :networks="networks" :active-channel="activeChannel" />
</div>
<footer id="footer">
<span
class="tooltipped tooltipped-n tooltipped-no-touch"
aria-label="Sign in"
><button
class="icon sign-in"
data-target="#sign-in"
data-component="SignIn"
aria-label="Sign in"
role="tab"
aria-controls="sign-in"
aria-selected="false"
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Sign in"
><button
class="icon sign-in"
data-target="#sign-in"
data-component="SignIn"
aria-label="Sign in"
role="tab"
aria-controls="sign-in"
aria-selected="false"
/></span>
<span
class="tooltipped tooltipped-n tooltipped-no-touch"
aria-label="Connect to network"
><button
class="icon connect"
data-target="#connect"
data-component="Connect"
aria-label="Connect to network"
role="tab"
aria-controls="connect"
aria-selected="false"
><button
class="icon connect"
data-target="#connect"
data-component="Connect"
aria-label="Connect to network"
role="tab"
aria-controls="connect"
aria-selected="false"
/></span>
<span
class="tooltipped tooltipped-n tooltipped-no-touch"
aria-label="Settings"
><button
class="icon settings"
data-target="#settings"
data-component="Settings"
aria-label="Settings"
role="tab"
aria-controls="settings"
aria-selected="false"
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Settings"
><button
class="icon settings"
data-target="#settings"
data-component="Settings"
aria-label="Settings"
role="tab"
aria-controls="settings"
aria-selected="false"
/></span>
<span
class="tooltipped tooltipped-n tooltipped-no-touch"
aria-label="Help"
><button
class="icon help"
data-target="#help"
data-component="Help"
aria-label="Help"
role="tab"
aria-controls="help"
aria-selected="false"
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Help"
><button
class="icon help"
data-target="#help"
data-component="Help"
aria-label="Help"
role="tab"
aria-controls="help"
aria-selected="false"
/></span>
</footer>
</aside>
<div
id="sidebar-overlay"
@click="$root.setSidebar(false)"
/>
<div id="sidebar-overlay" @click="$root.setSidebar(false)" />
</div>
</template>

View File

@ -1,9 +1,5 @@
<template>
<button
class="lt"
aria-label="Toggle channel list"
@click="$root.toggleSidebar"
/>
<button class="lt" aria-label="Toggle channel list" @click="$root.toggleSidebar" />
</template>
<script>

View File

@ -1,18 +1,10 @@
<template>
<div
id="changelog"
class="window"
aria-label="Changelog"
>
<div id="changelog" class="window" aria-label="Changelog">
<div class="header">
<SidebarToggle />
</div>
<div class="container">
<a
id="back-to-help"
href="#"
data-target="Help"
>« Help</a>
<a id="back-to-help" href="#" data-target="Help">« Help</a>
<template v-if="version">
<h1 class="title">Release notes for {{ version }}</h1>
@ -25,16 +17,18 @@
<p>Unable to retrieve releases from GitHub.</p>
<p>
<a
:href="`https://github.com/thelounge/thelounge/releases/tag/v${version}`"
:href="
`https://github.com/thelounge/thelounge/releases/tag/v${version}`
"
target="_blank"
rel="noopener"
>View release notes for this version on GitHub</a>
>View release notes for this version on GitHub</a
>
</p>
</template>
</template>
<p v-else>Loading changelog</p>
</div>
</div>
</template>
@ -46,8 +40,6 @@ export default {
components: {
SidebarToggle,
},
mounted() {
},
mounted() {},
};
</script>

View File

@ -1,10 +1,5 @@
<template>
<div
id="help"
class="window"
role="tabpanel"
aria-label="Help"
>
<div id="help" class="window" role="tabpanel" aria-label="Help">
<div class="header">
<SidebarToggle />
</div>
@ -13,12 +8,12 @@
<h2>
<small class="pull-right">
v{{ $root.serverConfiguration.version }}
(<a
v{{ $root.serverConfiguration.version }} (<a
id="view-changelog"
href="#"
data-target="Changelog"
>release notes</a>)
>release notes</a
>)
</small>
About The Lounge
</h2>
@ -28,32 +23,43 @@
<template v-if="$root.serverConfiguration.gitCommit">
<p>
The Lounge is running from source
(<a
:href="`https://github.com/thelounge/thelounge/tree/${$root.serverConfiguration.gitCommit}`"
The Lounge is running from source (<a
:href="
`https://github.com/thelounge/thelounge/tree/${$root.serverConfiguration.gitCommit}`
"
target="_blank"
rel="noopener"
>commit <code>{{ $root.serverConfiguration.gitCommit }}</code></a>).
>commit <code>{{ $root.serverConfiguration.gitCommit }}</code></a
>).
</p>
<ul>
<li>
Compare
<a
:href="`https://github.com/thelounge/thelounge/compare/${$root.serverConfiguration.gitCommit}...master`"
:href="
`https://github.com/thelounge/thelounge/compare/${$root.serverConfiguration.gitCommit}...master`
"
target="_blank"
rel="noopener"
>between <code>{{ $root.serverConfiguration.gitCommit }}</code> and <code>master</code></a>
>between <code>{{ $root.serverConfiguration.gitCommit }}</code> and
<code>master</code></a
>
to see what you are missing
</li>
<li>
Compare
<a
:href="`https://github.com/thelounge/thelounge/compare/${$root.serverConfiguration.version}...${$root.serverConfiguration.gitCommit}`"
:href="
`https://github.com/thelounge/thelounge/compare/${$root.serverConfiguration.version}...${$root.serverConfiguration.gitCommit}`
"
target="_blank"
rel="noopener"
>between <code>{{ $root.serverConfiguration.version }}</code> and <code>{{ $root.serverConfiguration.gitCommit }}</code></a>
to see your local changes</li>
>between <code>{{ $root.serverConfiguration.version }}</code> and
<code>{{ $root.serverConfiguration.gitCommit }}</code></a
>
to see your local changes
</li>
</ul>
</template>
@ -63,7 +69,8 @@
target="_blank"
rel="noopener"
class="website-link"
>Website</a>
>Website</a
>
</p>
<p>
<a
@ -71,7 +78,8 @@
target="_blank"
rel="noopener"
class="documentation-link"
>Documentation</a>
>Documentation</a
>
</p>
<p>
<a
@ -79,7 +87,8 @@
target="_blank"
rel="noopener"
class="report-issue-link"
>Report an issue</a>
>Report an issue</a
>
</p>
</div>
@ -142,15 +151,15 @@
</div>
<div class="description">
<p>
Mark any text typed after this shortcut to be colored. After
hitting this shortcut, enter an integer in the range
<code>015</code> to select the desired color, or use the
autocompletion menu to choose a color name (see below).
Mark any text typed after this shortcut to be colored. After hitting this
shortcut, enter an integer in the range
<code>015</code> to select the desired color, or use the autocompletion
menu to choose a color name (see below).
</p>
<p>
Background color can be specified by putting a comma and
another integer in the range <code>015</code> after the
foreground color number (autocompletion works too).
Background color can be specified by putting a comma and another integer in
the range <code>015</code> after the foreground color number
(autocompletion works too).
</p>
<p>
A color reference can be found
@ -158,7 +167,8 @@
href="https://modern.ircdocs.horse/formatting.html#colors"
target="_blank"
rel="noopener"
>here</a>.
>here</a
>.
</p>
</div>
</div>
@ -169,7 +179,10 @@
<span class="key-apple"><kbd></kbd> <kbd>B</kbd></span>
</div>
<div class="description">
<p>Mark all text typed after this shortcut as <span class="irc-bold">bold</span>.</p>
<p>
Mark all text typed after this shortcut as
<span class="irc-bold">bold</span>.
</p>
</div>
</div>
@ -179,7 +192,10 @@
<span class="key-apple"><kbd></kbd> <kbd>U</kbd></span>
</div>
<div class="description">
<p>Mark all text typed after this shortcut as <span class="irc-underline">underlined</span>.</p>
<p>
Mark all text typed after this shortcut as
<span class="irc-underline">underlined</span>.
</p>
</div>
</div>
@ -189,7 +205,10 @@
<span class="key-apple"><kbd></kbd> <kbd>I</kbd></span>
</div>
<div class="description">
<p>Mark all text typed after this shortcut as <span class="irc-italic">italics</span>.</p>
<p>
Mark all text typed after this shortcut as
<span class="irc-italic">italics</span>.
</p>
</div>
</div>
@ -199,7 +218,10 @@
<span class="key-apple"><kbd></kbd> <kbd>S</kbd></span>
</div>
<div class="description">
<p>Mark all text typed after this shortcut as <span class="irc-strikethrough">struck through</span>.</p>
<p>
Mark all text typed after this shortcut as
<span class="irc-strikethrough">struck through</span>.
</p>
</div>
</div>
@ -209,7 +231,10 @@
<span class="key-apple"><kbd></kbd> <kbd>M</kbd></span>
</div>
<div class="description">
<p>Mark all text typed after this shortcut as <span class="irc-monospace">monospaced</span>.</p>
<p>
Mark all text typed after this shortcut as
<span class="irc-monospace">monospaced</span>.
</p>
</div>
</div>
@ -220,8 +245,8 @@
</div>
<div class="description">
<p>
Mark all text typed after this shortcut to be reset to its
original formatting.
Mark all text typed after this shortcut to be reset to its original
formatting.
</p>
</div>
</div>
@ -229,9 +254,10 @@
<h2>Autocompletion</h2>
<p>
To auto-complete nicknames, channels, commands, and emoji, type one of the characters below to open
a suggestion list. Use the <kbd></kbd> and <kbd></kbd> keys to highlight an item, and insert it by
pressing <kbd>Tab</kbd> or <kbd>Enter</kbd> (or by clicking the desired item).
To auto-complete nicknames, channels, commands, and emoji, type one of the
characters below to open a suggestion list. Use the <kbd></kbd> and
<kbd></kbd> keys to highlight an item, and insert it by pressing <kbd>Tab</kbd> or
<kbd>Enter</kbd> (or by clicking the desired item).
</p>
<p>
Autocompletion can be disabled in settings.
@ -269,7 +295,10 @@
<code>:</code>
</div>
<div class="description">
<p>Emoji (note: requires two search characters, to avoid conflicting with common emoticons like <code>:)</code>)</p>
<p>
Emoji (note: requires two search characters, to avoid conflicting with
common emoticons like <code>:)</code>)
</p>
</div>
</div>
@ -298,8 +327,10 @@
<code>/ban nick</code>
</div>
<div class="description">
<p>Ban (<code>+b</code>) a user from the current channel.
This can be a nickname or a hostmask.</p>
<p>
Ban (<code>+b</code>) a user from the current channel. This can be a
nickname or a hostmask.
</p>
</div>
</div>
@ -330,9 +361,8 @@
</div>
<div class="description">
<p>
Connect to a new IRC network. If <code>port</code> starts with
a <code>+</code> sign, the connection will be made secure
using TLS.
Connect to a new IRC network. If <code>port</code> starts with a
<code>+</code> sign, the connection will be made secure using TLS.
</p>
<p>Alias: <code>/server</code></p>
</div>
@ -350,7 +380,8 @@
href="https://en.wikipedia.org/wiki/Client-to-client_protocol"
target="_blank"
rel="noopener"
>the dedicated Wikipedia article</a>.
>the dedicated Wikipedia article</a
>.
</p>
</div>
</div>
@ -361,8 +392,8 @@
</div>
<div class="description">
<p>
Remove op (<code>-o</code>) from one or several users in the
current channel.
Remove op (<code>-o</code>) from one or several users in the current
channel.
</p>
</div>
</div>
@ -373,8 +404,8 @@
</div>
<div class="description">
<p>
Remove voice (<code>-v</code>) from one or several users in
the current channel.
Remove voice (<code>-v</code>) from one or several users in the current
channel.
</p>
</div>
</div>
@ -385,8 +416,7 @@
</div>
<div class="description">
<p>
Disconnect from the current network with an
optionally-provided message.
Disconnect from the current network with an optionally-provided message.
</p>
</div>
</div>
@ -410,8 +440,8 @@
<div class="description">
<p>
Invite a user to the specified channel. If
<code>channel</code> is omitted, user will be invited to the
current channel.
<code>channel</code> is omitted, user will be invited to the current
channel.
</p>
</div>
</div>
@ -422,8 +452,9 @@
</div>
<div class="description">
<p>
Block any messages from the specified user on the current network.
This can be a nickname or a hostmask.</p>
Block any messages from the specified user on the current network. This can
be a nickname or a hostmask.
</p>
</div>
</div>
@ -469,9 +500,8 @@
</div>
<div class="description">
<p>
Send an action message to the current channel. The Lounge will
display it inline, as if the message was posted in the third
person.
Send an action message to the current channel. The Lounge will display it
inline, as if the message was posted in the third person.
</p>
</div>
</div>
@ -482,10 +512,9 @@
</div>
<div class="description">
<p>
Set the given flags to the current channel if the active
window is a channel, another user if the active window is a
private message window, or yourself if the current window is a
server window.
Set the given flags to the current channel if the active window is a
channel, another user if the active window is a private message window, or
yourself if the current window is a server window.
</p>
</div>
</div>
@ -523,8 +552,7 @@
</div>
<div class="description">
<p>
Give op (<code>+o</code>) to one or several users in the
current channel.
Give op (<code>+o</code>) to one or several users in the current channel.
</p>
</div>
</div>
@ -535,8 +563,8 @@
</div>
<div class="description">
<p>
Close the specified channel or private message window, or the
current channel if <code>channel</code> is omitted.
Close the specified channel or private message window, or the current
channel if <code>channel</code> is omitted.
</p>
<p>Aliases: <code>/close</code>, <code>/leave</code></p>
</div>
@ -548,8 +576,8 @@
</div>
<div class="description">
<p>
Leave and immediately rejoin the current channel. Useful to
quickly get op from ChanServ in an empty channel, for example.
Leave and immediately rejoin the current channel. Useful to quickly get op
from ChanServ in an empty channel, for example.
</p>
<p>Alias: <code>/cycle</code></p>
</div>
@ -600,9 +628,8 @@
</div>
<div class="description">
<p>
Get the topic in the current channel.
If <code>newtopic</code> is specified, sets the
topic in the current channel.
Get the topic in the current channel. If <code>newtopic</code> is specified,
sets the topic in the current channel.
</p>
</div>
</div>
@ -612,8 +639,10 @@
<code>/unban nick</code>
</div>
<div class="description">
<p>Unban (<code>-b</code>) a user from the current channel.
This can be a nickname or a hostmask.</p>
<p>
Unban (<code>-b</code>) a user from the current channel. This can be a
nickname or a hostmask.
</p>
</div>
</div>
@ -623,8 +652,9 @@
</div>
<div class="description">
<p>
Unblock messages from the specified user on the current network.
This can be a nickname or a hostmask.</p>
Unblock messages from the specified user on the current network. This can be
a nickname or a hostmask.
</p>
</div>
</div>
@ -634,8 +664,7 @@
</div>
<div class="description">
<p>
Give voice (<code>+v</code>) to one or several users in the
current channel.
Give voice (<code>+v</code>) to one or several users in the current channel.
</p>
</div>
</div>
@ -646,8 +675,7 @@
</div>
<div class="description">
<p>
Retrieve information about the given user on the current
network.
Retrieve information about the given user on the current network.
</p>
</div>
</div>

View File

@ -33,8 +33,7 @@ export default {
const network = this.$root.networks.find((n) => n.uuid === data.uuid);
network.name = network.channels[0].name = data.name;
sidebar.find(`.network[data-uuid="${data.uuid}"] .chan.lobby .name`)
.click();
sidebar.find(`.network[data-uuid="${data.uuid}"] .chan.lobby .name`).click();
},
},
};

View File

@ -1,19 +1,9 @@
<template>
<div
id="settings"
class="window"
role="tabpanel"
aria-label="Settings"
>
<div id="settings" class="window" role="tabpanel" aria-label="Settings">
<div class="header">
<SidebarToggle />
</div>
<form
ref="settingsForm"
class="container"
@change="onChange"
@submit.prevent
>
<form ref="settingsForm" class="container" @change="onChange" @submit.prevent>
<h1 class="title">Settings</h1>
<div class="row">
@ -23,31 +13,26 @@
v-model="$root.serverConfiguration.advanced"
type="checkbox"
name="advanced"
>
/>
Advanced settings
</label>
</div>
</div>
<div class="row">
<div
v-if="canRegisterProtocol"
id="native-app"
class="col-sm-12"
>
<div v-if="canRegisterProtocol" id="native-app" class="col-sm-12">
<h2>Native app</h2>
<button
id="webapp-install-button"
type="button"
class="btn"
hidden
>Add The Lounge to Home screen</button>
<button id="webapp-install-button" type="button" class="btn" hidden>
Add The Lounge to Home screen
</button>
<button
id="make-default-client"
type="button"
class="btn"
@click.prevent="registerProtocol"
>Open irc:// URLs with The Lounge</button>
>
Open irc:// URLs with The Lounge
</button>
</div>
<div
@ -71,30 +56,21 @@
v-model="$root.settings.syncSettings"
type="checkbox"
name="syncSettings"
>
Synchronize settings with other clients.
/>
Synchronize settings with other clients
</label>
<p
v-if="!$root.settings.syncSettings"
class="sync-warning-override"
>
<strong>Warning</strong> Checking this box will override the settings of this client with those stored on the server.
<p v-if="!$root.settings.syncSettings" class="sync-warning-override">
<strong>Warning</strong> Checking this box will override the settings of
this client with those stored on the server.
</p>
<p
v-if="!$root.settings.syncSettings"
class="sync-warning-base"
>
<strong>Warning</strong> No settings have been synced before. Enabling this will sync all settings of this client as the base for other clients.
<p v-if="!$root.settings.syncSettings" class="sync-warning-base">
<strong>Warning</strong> No settings have been synced before. Enabling this
will sync all settings of this client as the base for other clients.
</p>
<div
v-if="$root.settings.syncSettings"
class="opt force-sync-button"
>
<button
type="button"
class="btn"
@click="onForceSyncClick"
>Force sync settings</button>
<div v-if="$root.settings.syncSettings" class="opt force-sync-button">
<button type="button" class="btn" @click="onForceSyncClick">
Force sync settings
</button>
<p>This will override any settings already synced to the server.</p>
</div>
</div>
@ -104,11 +80,7 @@
</div>
<div class="col-sm-6">
<label class="opt">
<input
v-model="$root.settings.motd"
type="checkbox"
name="motd"
>
<input v-model="$root.settings.motd" type="checkbox" name="motd" />
Show <abbr title="Message Of The Day">MOTD</abbr>
</label>
</div>
@ -118,7 +90,7 @@
v-model="$root.settings.showSeconds"
type="checkbox"
name="showSeconds"
>
/>
Show seconds in timestamp
</label>
</div>
@ -143,7 +115,7 @@
type="radio"
name="statusMessages"
value="shown"
>
/>
Show all status messages individually
</label>
<label class="opt">
@ -152,7 +124,7 @@
type="radio"
name="statusMessages"
value="condensed"
>
/>
Condense status messages together
</label>
<label class="opt">
@ -161,7 +133,7 @@
type="radio"
name="statusMessages"
value="hidden"
>
/>
Hide all status messages
</label>
</div>
@ -174,7 +146,7 @@
v-model="$root.settings.coloredNicks"
type="checkbox"
name="coloredNicks"
>
/>
Enable colored nicknames
</label>
<label class="opt">
@ -182,19 +154,15 @@
v-model="$root.settings.autocomplete"
type="checkbox"
name="autocomplete"
>
/>
Enable autocomplete
</label>
</div>
<div
v-if="$root.serverConfiguration.advanced"
class="col-sm-12"
>
<div v-if="$root.serverConfiguration.advanced" class="col-sm-12">
<label class="opt">
<label
for="nickPostfix"
class="sr-only"
>Nick autocomplete postfix (e.g. <code>, </code>)</label>
<label for="nickPostfix" class="sr-only"
>Nick autocomplete postfix (e.g. <code>, </code>)</label
>
<input
id="nickPostfix"
v-model="$root.settings.nickPostfix"
@ -202,7 +170,7 @@
name="nickPostfix"
class="input"
placeholder="Nick autocomplete postfix (e.g. ', ')"
>
/>
</label>
</div>
@ -210,10 +178,7 @@
<h2>Theme</h2>
</div>
<div class="col-sm-12">
<label
for="theme-select"
class="sr-only"
>Theme</label>
<label for="theme-select" class="sr-only">Theme</label>
<select
id="theme-select"
v-model="$root.settings.theme"
@ -236,20 +201,13 @@
</div>
<div class="col-sm-6">
<label class="opt">
<input
type="checkbox"
name="media"
>
<input type="checkbox" name="media" />
Auto-expand media
</label>
</div>
<div class="col-sm-6">
<label class="opt">
<input
v-model="$root.settings.links"
type="checkbox"
name="links"
>
<input v-model="$root.settings.links" type="checkbox" name="links" />
Auto-expand websites
</label>
</div>
@ -267,18 +225,14 @@
:disabled="$root.pushNotificationState !== 'supported'"
data-text-alternate="Unsubscribe from push notifications"
@click="onPushButtonClick"
>Subscribe to push notifications</button>
<div
v-if="$root.pushNotificationState === 'nohttps'"
class="error"
>
<strong>Warning</strong>:
Push notifications are only supported over HTTPS connections.
Subscribe to push notifications
</button>
<div v-if="$root.pushNotificationState === 'nohttps'" class="error">
<strong>Warning</strong>: Push notifications are only supported over
HTTPS connections.
</div>
<div
v-if="$root.pushNotificationState === 'unsupported'"
class="error"
>
<div v-if="$root.pushNotificationState === 'unsupported'" class="error">
<strong>Warning</strong>:
<span>Push notifications are not supported by your browser.</span>
</div>
@ -295,22 +249,18 @@
id="desktopNotifications"
type="checkbox"
name="desktopNotifications"
>
Enable browser notifications<br>
<div
v-if="$root.desktopNotificationState === 'unsupported'"
class="error"
>
<strong>Warning</strong>:
Notifications are not supported by your browser.
/>
Enable browser notifications<br />
<div v-if="$root.desktopNotificationState === 'unsupported'" class="error">
<strong>Warning</strong>: Notifications are not supported by your
browser.
</div>
<div
v-if="$root.desktopNotificationState === 'blocked'"
id="warnBlockedDesktopNotifications"
class="error"
>
<strong>Warning</strong>:
Notifications are blocked by your browser.
<strong>Warning</strong>: Notifications are blocked by your browser.
</div>
</label>
</div>
@ -320,42 +270,32 @@
v-model="$root.settings.notification"
type="checkbox"
name="notification"
>
/>
Enable notification sound
</label>
</div>
<div class="col-sm-12">
<div class="opt">
<button
id="play"
@click.prevent="playNotification"
>Play sound</button>
<button id="play" @click.prevent="playNotification">Play sound</button>
</div>
</div>
<div
v-if="$root.serverConfiguration.advanced"
class="col-sm-12"
>
<div v-if="$root.serverConfiguration.advanced" class="col-sm-12">
<label class="opt">
<input
v-model="$root.settings.notifyAllMessages"
type="checkbox"
name="notifyAllMessages"
>
/>
Enable notification for all messages
</label>
</div>
<div
v-if="$root.serverConfiguration.advanced"
class="col-sm-12"
>
<div v-if="$root.serverConfiguration.advanced" class="col-sm-12">
<label class="opt">
<label
for="highlights"
class="sr-only"
>Custom highlights (comma-separated keywords)</label>
<label for="highlights" class="sr-only"
>Custom highlights (comma-separated keywords)</label
>
<input
id="highlights"
v-model="$root.settings.highlights"
@ -363,22 +303,23 @@
name="highlights"
class="input"
placeholder="Custom highlights (comma-separated keywords)"
>
/>
</label>
</div>
<div
v-if="!$root.serverConfiguration.public && !$root.serverConfiguration.ldapEnabled"
v-if="
!$root.serverConfiguration.public && !$root.serverConfiguration.ldapEnabled
"
id="change-password"
>
<div class="col-sm-12">
<h2>Change password</h2>
</div>
<div class="col-sm-12 password-container">
<label
for="old_password_input"
class="sr-only"
>Enter current password</label>
<label for="old_password_input" class="sr-only"
>Enter current password</label
>
<RevealPassword v-slot:default="slotProps">
<input
id="old_password_input"
@ -386,14 +327,13 @@
name="old_password"
class="input"
placeholder="Enter current password"
>
/>
</RevealPassword>
</div>
<div class="col-sm-12 password-container">
<label
for="new_password_input"
class="sr-only"
>Enter desired new password</label>
<label for="new_password_input" class="sr-only"
>Enter desired new password</label
>
<RevealPassword v-slot:default="slotProps">
<input
id="new_password_input"
@ -401,14 +341,13 @@
name="new_password"
class="input"
placeholder="Enter desired new password"
>
/>
</RevealPassword>
</div>
<div class="col-sm-12 password-container">
<label
for="verify_password_input"
class="sr-only"
>Repeat new password</label>
<label for="verify_password_input" class="sr-only"
>Repeat new password</label
>
<RevealPassword v-slot:default="slotProps">
<input
id="verify_password_input"
@ -416,7 +355,7 @@
name="verify_password"
class="input"
placeholder="Repeat new password"
>
/>
</RevealPassword>
</div>
<div
@ -432,28 +371,19 @@
{{ passwordErrors[passwordChangeStatus.error] }}
</div>
<div class="col-sm-12">
<button
type="submit"
class="btn"
@click.prevent="changePassword"
>Change password</button>
<button type="submit" class="btn" @click.prevent="changePassword">
Change password
</button>
</div>
</div>
<div
v-if="$root.serverConfiguration.advanced"
class="col-sm-12"
>
<div v-if="$root.serverConfiguration.advanced" class="col-sm-12">
<h2>Custom Stylesheet</h2>
</div>
<div
v-if="$root.serverConfiguration.advanced"
class="col-sm-12"
>
<label
for="user-specified-css-input"
class="sr-only"
>Custom stylesheet. You can override any style with CSS here.</label>
<div v-if="$root.serverConfiguration.advanced" class="col-sm-12">
<label for="user-specified-css-input" class="sr-only"
>Custom stylesheet. You can override any style with CSS here.</label
>
<textarea
id="user-specified-css-input"
v-model="$root.settings.userStyles"
@ -464,17 +394,11 @@
</div>
</div>
<div
v-if="!$root.serverConfiguration.public"
class="session-list"
>
<div v-if="!$root.serverConfiguration.public" class="session-list">
<h2>Sessions</h2>
<h3>Current session</h3>
<div
v-if="$store.getters.currentSession"
id="session-current"
>
<div v-if="$store.getters.currentSession" id="session-current">
<Session :session="$store.getters.currentSession" />
</div>
@ -494,7 +418,6 @@
</div>
</div>
</form>
</div>
</template>
@ -520,7 +443,8 @@ export default {
passwordErrors: {
missing_fields: "Please enter a new password",
password_mismatch: "Both new password fields must match",
password_incorrect: "The current password field does not match your account password",
password_incorrect:
"The current password field does not match your account password",
update_failed: "Failed to update your password",
},
};
@ -541,11 +465,7 @@ export default {
},
methods: {
onChange(event) {
const ignore = [
"old_password",
"new_password",
"verify_password",
];
const ignore = ["old_password", "new_password", "verify_password"];
const name = event.target.name;

View File

@ -1,30 +1,20 @@
<template>
<div
id="sign-in"
class="window"
role="tabpanel"
aria-label="Sign-in"
>
<form
class="container"
method="post"
action=""
@submit="onSubmit"
>
<div id="sign-in" class="window" role="tabpanel" aria-label="Sign-in">
<form class="container" method="post" action="" @submit="onSubmit">
<img
src="img/logo-vertical-transparent-bg.svg"
class="logo"
alt="The Lounge"
width="256"
height="170"
>
/>
<img
src="img/logo-vertical-transparent-bg-inverted.svg"
class="logo-inverted"
alt="The Lounge"
width="256"
height="170"
>
/>
<label for="signin-username">Username</label>
<input
@ -39,7 +29,7 @@
:value="getStoredUser()"
required
autofocus
>
/>
<div class="password-container">
<label for="signin-password">Password</label>
@ -54,20 +44,13 @@
autocorrect="off"
autocomplete="current-password"
required
>
/>
</RevealPassword>
</div>
<div
v-if="errorShown"
class="error"
>Authentication failed.</div>
<div v-if="errorShown" class="error">Authentication failed.</div>
<button
:disabled="inFlight"
type="submit"
class="btn"
>Sign in</button>
<button :disabled="inFlight" type="submit" class="btn">Sign in</button>
</form>
</div>
</template>

View File

@ -107,7 +107,7 @@ function applySetting(name, value) {
} else if (name === "desktopNotifications") {
updateDesktopNotificationStatus();
if (("Notification" in window) && value && Notification.permission !== "granted") {
if ("Notification" in window && value && Notification.permission !== "granted") {
Notification.requestPermission(updateDesktopNotificationStatus);
}
}
@ -170,7 +170,7 @@ function initialize() {
// If browser does not support notifications
// display proper message in settings.
if (("Notification" in window)) {
if ("Notification" in window) {
updateDesktopNotificationStatus();
} else {
vueApp.desktopNotificationState = "unsupported";

View File

@ -36,7 +36,7 @@ class SlideoutMenu {
};
this.onTouchMove = (e) => {
const touch = this.touchCurPos = e.touches.item(0);
const touch = (this.touchCurPos = e.touches.item(0));
let distX = touch.screenX - this.touchStartPos.screenX;
const distY = touch.screenY - this.touchStartPos.screenY;
@ -80,7 +80,10 @@ class SlideoutMenu {
const diff = this.touchCurPos.screenX - this.touchStartPos.screenX;
const absDiff = Math.abs(diff);
if (absDiff > this.menuWidth / 2 || Date.now() - this.touchStartTime < 180 && absDiff > 50) {
if (
absDiff > this.menuWidth / 2 ||
(Date.now() - this.touchStartTime < 180 && absDiff > 50)
) {
this.toggle(diff > 0);
}
@ -109,4 +112,4 @@ class SlideoutMenu {
}
}
module.exports = (new SlideoutMenu);
module.exports = new SlideoutMenu();

View File

@ -125,7 +125,7 @@ module.exports.onPushButton = () => {
}
})
)
.catch((err) => {
.catch(() => {
vueApp.pushNotificationState = "unsupported";
});