supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Fix lint and format with prettier.

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
client/components/App.vue
View File

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

22
client/components/Channel.vue
View File

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

4
client/components/ChannelWrapper.vue
View File

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

61
client/components/NetworkForm.vue
View File

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

6
client/components/RevealPassword.vue
View File

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

15
client/components/Session.vue
View File

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

30
client/components/Sidebar.vue
View File

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

6
client/components/SidebarToggle.vue
View File

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

24
client/components/Windows/Changelog.vue
View File

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

188
client/components/Windows/Help.vue
View File

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

3
client/components/Windows/NetworkEdit.vue
View File

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

250
client/components/Windows/Settings.vue
View File

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

33
client/components/Windows/SignIn.vue
View File

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

4
client/js/options.js
View File

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

9
client/js/slideout.js
View File

@ -36,7 +36,7 @@ class SlideoutMenu {
}; };
this.onTouchMove = (e) => { 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; let distX = touch.screenX - this.touchStartPos.screenX;
const distY = touch.screenY - this.touchStartPos.screenY; const distY = touch.screenY - this.touchStartPos.screenY;
@ -80,7 +80,10 @@ class SlideoutMenu {
const diff = this.touchCurPos.screenX - this.touchStartPos.screenX; const diff = this.touchCurPos.screenX - this.touchStartPos.screenX;
const absDiff = Math.abs(diff); 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); this.toggle(diff > 0);
} }
@ -109,4 +112,4 @@ class SlideoutMenu {
} }
} }
module.exports = (new SlideoutMenu); module.exports = new SlideoutMenu();

2
client/js/webpush.js
View File

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