Fix lint

client/components/App.vue

@@ -2,18 +2,22 @@
 	<div
 		id="viewport"
 		:class="{notified: $store.state.isNotified}"
-		role="tablist">
+		role="tablist"
+	>
 		<Sidebar
 			:networks="networks"
-			:active-channel="activeChannel" />
+			:active-channel="activeChannel"
+		/>
 		<article id="windows">
 			<Chat
 				v-if="activeChannel"
 				:network="activeChannel.network"
-				:channel="activeChannel.channel" />
+				:channel="activeChannel.channel"
+			/>
 			<component
 				:is="$store.state.activeWindow"
-				ref="window" />
+				ref="window"
+			/>
 		</article>
 	</div>
 </template>

client/components/NetworkForm.vue

@@ -3,11 +3,13 @@
 		id="connect"
 		class="window"
 		role="tabpanel"
-		aria-label="Connect">
+		aria-label="Connect"
+	>
 		<div class="header">
 			<button
 				class="lt"
-				aria-label="Toggle channel list" />
+				aria-label="Toggle channel list"
+			/>
 		</div>
 		<form
 			class="container"
@@ -23,7 +25,8 @@
 							<input
 								type="hidden"
 								name="uuid"
-								:value="defaults.uuid">
+								:value="defaults.uuid"
+							>
 							Edit {{ defaults.name }}
 						</template>
 						<template v-else>
@@ -51,7 +54,8 @@
 								class="input"
 								name="name"
 								:value="defaults.name"
-								maxlength="100">
+								maxlength="100"
+							>
 						</div>
 						<div class="col-sm-3">
 							<label for="connect:host">Server</label>
@@ -66,7 +70,7 @@
 								maxlength="255"
 								required
 								:disabled="config.lockNetwork ? true : false"
-								>
+							>
 						</div>
 						<div class="col-sm-3 col-xs-4">
 							<div class="port">
@@ -79,7 +83,7 @@
 									:value="defaults.port"
 									aria-label="Server port"
 									:disabled="config.lockNetwork ? true : false"
-									>
+								>
 							</div>
 						</div>
 						<div class="clearfix" />
@@ -90,7 +94,7 @@
 									name="tls"
 									:checked="defaults.tls ? true : false"
 									:disabled="config.lockNetwork ? true : false"
-									>
+								>
 								Use secure connection (TLS)
 							</label>
 						</div>
@@ -101,7 +105,7 @@
 									name="rejectUnauthorized"
 									:checked="defaults.rejectUnauthorized ? true : false"
 									:disabled="config.lockNetwork ? true : false"
-									>
+								>
 								Only allow trusted certificates
 							</label>
 						</div>
@@ -121,7 +125,8 @@
 						name="nick"
 						:value="defaults.nick"
 						maxlength="100"
-						required>
+						required
+					>
 				</div>
 				<template v-if="!config.useHexIp">
 					<div class="col-sm-3">
@@ -133,7 +138,8 @@
 							class="input username"
 							name="username"
 							:value="defaults.username"
-							maxlength="512">
+							maxlength="512"
+						>
 					</div>
 				</template>
 				<div class="col-sm-3">
@@ -147,7 +153,8 @@
 							class="input"
 							:type="slotProps.isVisible ? 'text' : 'password'"
 							name="password"
-							maxlength="512">
+							maxlength="512"
+						>
 					</RevealPassword>
 				</div>
 				<div class="col-sm-3">
@@ -159,7 +166,8 @@
 						class="input"
 						name="realname"
 						:value="defaults.realname"
-						maxlength="512">
+						maxlength="512"
+					>
 				</div>
 				<template v-if="defaults.uuid">
 					<div class="col-sm-3">
@@ -172,7 +180,7 @@
 							name="commands"
 							placeholder="One raw command per line, each command will be executed on new connection"
 							:value="defaults.commands ? defaults.commands.join('\n') : ''"
-							/>
+						/>
 					</div>
 					<div class="col-sm-9 col-sm-offset-3">
 						<button
@@ -191,7 +199,8 @@
 							id="connect:channels"
 							class="input"
 							name="join"
-							:value="defaults.join">
+							:value="defaults.join"
+						>
 					</div>
 					<div class="col-sm-9 col-sm-offset-3">
 						<button

client/components/RevealPassword.vue

@@ -9,9 +9,11 @@
 				{ 'reveal-password-visible': isVisible },
 			]"
 			:aria-label="isVisible ? 'Hide password' : 'Show password'"
-			@click="onClick">
+			@click="onClick"
+		>
 			<span
-				:aria-label="isVisible ? 'Hide password' : 'Show password'" />
+				:aria-label="isVisible ? 'Hide password' : 'Show password'"
+			/>
 		</span>
 	</div>
 </template>

client/components/Sidebar.vue

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

client/components/Windows/Changelog.vue

@@ -2,17 +2,20 @@
 	<div
 		id="changelog"
 		class="window"
-		aria-label="Changelog">
+		aria-label="Changelog"
+	>
 		<div class="header">
 			<button
 				class="lt"
-				aria-label="Toggle channel list" />
+				aria-label="Toggle channel list"
+			/>
 		</div>
 		<div class="container">
 			<a
 				id="back-to-help"
 				href="#"
-				data-target="Help">« Help</a>
+				data-target="Help"
+			>« Help</a>
 
 			<template v-if="version">
 				<h1 class="title">Release notes for {{ version }}</h1>
@@ -27,7 +30,8 @@
 						<a
 							:href="`https://github.com/thelounge/thelounge/releases/tag/v${version}`"
 							target="_blank"
-							rel="noopener">View release notes for this version on GitHub</a>
+							rel="noopener"
+						>View release notes for this version on GitHub</a>
 					</p>
 				</template>
 			</template>

client/components/Windows/Help.vue

@@ -3,11 +3,13 @@
 		id="help"
 		class="window"
 		role="tabpanel"
-		aria-label="Help">
+		aria-label="Help"
+	>
 		<div class="header">
 			<button
 				class="lt"
-				aria-label="Toggle channel list" />
+				aria-label="Toggle channel list"
+			/>
 		</div>
 		<div class="container">
 			<h1 class="title">Help</h1>
@@ -18,7 +20,8 @@
 					(<a
 						id="view-changelog"
 						href="#"
-						data-target="Changelog">release notes</a>)
+						data-target="Changelog"
+					>release notes</a>)
 				</small>
 				About The Lounge
 			</h2>
@@ -32,7 +35,8 @@
 						(<a
 							:href="`https://github.com/thelounge/thelounge/tree/${$root.serverConfiguration.gitCommit}`"
 							target="_blank"
-							rel="noopener">commit <code>{{ $root.serverConfiguration.gitCommit }}</code></a>).
+							rel="noopener"
+						>commit <code>{{ $root.serverConfiguration.gitCommit }}</code></a>).
 					</p>
 
 					<ul>
@@ -41,7 +45,8 @@
 							<a
 								: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>
+								rel="noopener"
+							>between <code>{{ $root.serverConfiguration.gitCommit }}</code> and <code>master</code></a>
 							to see what you are missing
 						</li>
 						<li>
@@ -49,7 +54,8 @@
 							<a
 								: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>
+								rel="noopener"
+							>between <code>{{ $root.serverConfiguration.version }}</code> and <code>{{ $root.serverConfiguration.gitCommit }}</code></a>
 							to see your local changes</li>
 					</ul>
 				</template>
@@ -59,21 +65,24 @@
 						href="https://thelounge.chat/"
 						target="_blank"
 						rel="noopener"
-						class="website-link">Website</a>
+						class="website-link"
+					>Website</a>
 				</p>
 				<p>
 					<a
 						href="https://thelounge.chat/docs/"
 						target="_blank"
 						rel="noopener"
-						class="documentation-link">Documentation</a>
+						class="documentation-link"
+					>Documentation</a>
 				</p>
 				<p>
 					<a
 						href="https://github.com/thelounge/thelounge/issues/new"
 						target="_blank"
 						rel="noopener"
-						class="report-issue-link">Report an issue…</a>
+						class="report-issue-link"
+					>Report an issue…</a>
 				</p>
 			</div>
 
@@ -151,7 +160,8 @@
 						<a
 							href="https://modern.ircdocs.horse/formatting.html#colors"
 							target="_blank"
-							rel="noopener">here</a>.
+							rel="noopener"
+						>here</a>.
 					</p>
 				</div>
 			</div>
@@ -342,7 +352,8 @@
 						<a
 							href="https://en.wikipedia.org/wiki/Client-to-client_protocol"
 							target="_blank"
-							rel="noopener">the dedicated Wikipedia article</a>.
+							rel="noopener"
+						>the dedicated Wikipedia article</a>.
 					</p>
 				</div>
 			</div>

client/components/Windows/Settings.vue

@@ -3,11 +3,13 @@
 		id="settings"
 		class="window"
 		role="tabpanel"
-		aria-label="Settings">
+		aria-label="Settings"
+	>
 		<div class="header">
 			<button
 				class="lt"
-				aria-label="Toggle channel list" />
+				aria-label="Toggle channel list"
+			/>
 		</div>
 		<div class="container">
 			<h1 class="title">Settings</h1>
@@ -17,7 +19,8 @@
 					<label class="opt">
 						<input
 							type="checkbox"
-							name="advanced">
+							name="advanced"
+						>
 						Advanced settings
 					</label>
 				</div>
@@ -27,37 +30,44 @@
 				<div
 					id="native-app"
 					class="col-sm-12"
-					hidden>
+					hidden
+				>
 					<h2>Native app</h2>
 					<button
 						id="webapp-install-button"
 						type="button"
 						class="btn"
-						hidden>Add The Lounge to Home screen</button>
+						hidden
+					>Add The Lounge to Home screen</button>
 					<button
 						id="make-default-client"
 						type="button"
-						class="btn">Open irc:// URLs with The Lounge</button>
+						class="btn"
+					>Open irc:// URLs with The Lounge</button>
 				</div>
 
 				<div
 					v-if="!this.$root.serverConfiguration.public"
 					class="col-sm-12"
-					data-advanced>
+					data-advanced
+				>
 					<h2>
 						Settings synchronisation
 						<span
 							class="tooltipped tooltipped-n tooltipped-no-delay"
-							aria-label="Note: This is an experimental feature and may change in future releases.">
+							aria-label="Note: This is an experimental feature and may change in future releases."
+						>
 							<button
 								class="extra-experimental"
-								aria-label="Note: This is an experimental feature and may change in future releases." />
+								aria-label="Note: This is an experimental feature and may change in future releases."
+							/>
 						</span>
 					</h2>
 					<label class="opt">
 						<input
 							type="checkbox"
-							name="syncSettings">
+							name="syncSettings"
+						>
 						Synchronize settings with other clients.
 					</label>
 					<p class="sync-warning-override"><strong>Warning</strong> Checking this box will override the settings of this client with those stored on the server.</p>
@@ -66,7 +76,8 @@
 						<button
 							type="button"
 							class="btn"
-							@click="onForceSyncClick">Force sync settings</button>
+							@click="onForceSyncClick"
+						>Force sync settings</button>
 						<p>This will override any settings already synced to the server.</p>
 					</div>
 				</div>
@@ -78,7 +89,8 @@
 					<label class="opt">
 						<input
 							type="checkbox"
-							name="motd">
+							name="motd"
+						>
 						Show <abbr title="Message Of The Day">MOTD</abbr>
 					</label>
 				</div>
@@ -86,7 +98,8 @@
 					<label class="opt">
 						<input
 							type="checkbox"
-							name="showSeconds">
+							name="showSeconds"
+						>
 						Show seconds in timestamp
 					</label>
 				</div>
@@ -95,10 +108,12 @@
 						Status messages
 						<span
 							class="tooltipped tooltipped-n tooltipped-no-delay"
-							aria-label="Joins, parts, kicks, nick changes, away changes, and mode changes">
+							aria-label="Joins, parts, kicks, nick changes, away changes, and mode changes"
+						>
 							<button
 								class="extra-help"
-								aria-label="Joins, parts, kicks, nick changes, away changes, and mode changes" />
+								aria-label="Joins, parts, kicks, nick changes, away changes, and mode changes"
+							/>
 						</span>
 					</h2>
 				</div>
@@ -107,21 +122,24 @@
 						<input
 							type="radio"
 							name="statusMessages"
-							value="shown">
+							value="shown"
+						>
 						Show all status messages individually
 					</label>
 					<label class="opt">
 						<input
 							type="radio"
 							name="statusMessages"
-							value="condensed">
+							value="condensed"
+						>
 						Condense status messages together
 					</label>
 					<label class="opt">
 						<input
 							type="radio"
 							name="statusMessages"
-							value="hidden">
+							value="hidden"
+						>
 						Hide all status messages
 					</label>
 				</div>
@@ -132,29 +150,34 @@
 					<label class="opt">
 						<input
 							type="checkbox"
-							name="coloredNicks">
+							name="coloredNicks"
+						>
 						Enable colored nicknames
 					</label>
 					<label class="opt">
 						<input
 							type="checkbox"
-							name="autocomplete">
+							name="autocomplete"
+						>
 						Enable autocomplete
 					</label>
 				</div>
 				<div
 					class="col-sm-12"
-					data-advanced>
+					data-advanced
+				>
 					<label class="opt">
 						<label
 							for="nickPostfix"
-							class="sr-only">Nick autocomplete postfix (e.g. <code>, </code>)</label>
+							class="sr-only"
+						>Nick autocomplete postfix (e.g. <code>, </code>)</label>
 						<input
 							id="nickPostfix"
 							type="text"
 							name="nickPostfix"
 							class="input"
-							placeholder="Nick autocomplete postfix (e.g. ', ')">
+							placeholder="Nick autocomplete postfix (e.g. ', ')"
+						>
 					</label>
 				</div>
 
@@ -164,14 +187,17 @@
 				<div class="col-sm-12">
 					<label
 						for="theme-select"
-						class="sr-only">Theme</label>
+						class="sr-only"
+					>Theme</label>
 					<select
 						id="theme-select"
 						name="theme"
-						class="input">
+						class="input"
+					>
 						<option
 							v-for="theme in this.$root.serverConfiguration.themes"
-							:key="theme.name">
+							:key="theme.name"
+						>
 							{{ theme.displayName }}
 						</option>
 					</select>
@@ -185,7 +211,8 @@
 						<label class="opt">
 							<input
 								type="checkbox"
-								name="media">
+								name="media"
+							>
 							Auto-expand media
 						</label>
 					</div>
@@ -193,7 +220,8 @@
 						<label class="opt">
 							<input
 								type="checkbox"
-								name="links">
+								name="links"
+							>
 							Auto-expand websites
 						</label>
 					</div>
@@ -209,16 +237,19 @@
 							type="button"
 							class="btn"
 							disabled
-							data-text-alternate="Unsubscribe from push notifications">Subscribe to push notifications</button>
+							data-text-alternate="Unsubscribe from push notifications"
+						>Subscribe to push notifications</button>
 						<div
 							v-if="this.$root.pushNotificationState === 'nohttps'"
-							class="error">
+							class="error"
+						>
 							<strong>Warning</strong>:
 							Push notifications are only supported over HTTPS connections.
 						</div>
 						<div
 							v-if="this.$root.pushNotificationState === 'unsupported'"
-							class="error">
+							class="error"
+						>
 							<strong>Warning</strong>:
 							<span>Push notifications are not supported by your browser.</span>
 						</div>
@@ -233,18 +264,21 @@
 						<input
 							id="desktopNotifications"
 							type="checkbox"
-							name="desktopNotifications">
+							name="desktopNotifications"
+						>
 						Enable browser notifications<br>
 						<div
 							v-if="this.$root.desktopNotificationState === 'unsupported'"
-							class="error">
+							class="error"
+						>
 							<strong>Warning</strong>:
 							Notifications are not supported by your browser.
 						</div>
 						<div
 							v-if="this.$root.desktopNotificationState === 'blocked'"
 							id="warnBlockedDesktopNotifications"
-							class="error">
+							class="error"
+						>
 							<strong>Warning</strong>:
 							Notifications are blocked by your browser.
 						</div>
@@ -254,7 +288,8 @@
 					<label class="opt">
 						<input
 							type="checkbox"
-							name="notification">
+							name="notification"
+						>
 						Enable notification sound
 					</label>
 				</div>
@@ -266,38 +301,45 @@
 
 				<div
 					class="col-sm-12"
-					data-advanced>
+					data-advanced
+				>
 					<label class="opt">
 						<input
 							type="checkbox"
-							name="notifyAllMessages">
+							name="notifyAllMessages"
+						>
 						Enable notification for all messages
 					</label>
 				</div>
 
 				<div
 					class="col-sm-12"
-					data-advanced>
+					data-advanced
+				>
 					<label class="opt">
 						<label
 							for="highlights"
-							class="sr-only">Custom highlights (comma-separated keywords)</label>
+							class="sr-only"
+						>Custom highlights (comma-separated keywords)</label>
 						<input
 							id="highlights"
 							type="text"
 							name="highlights"
 							class="input"
-							placeholder="Custom highlights (comma-separated keywords)">
+							placeholder="Custom highlights (comma-separated keywords)"
+						>
 					</label>
 				</div>
 
 				<div
 					v-if="!this.$root.serverConfiguration.public && !this.$root.serverConfiguration.ldapEnabled"
-					id="change-password">
+					id="change-password"
+				>
 					<form
 						action=""
 						method="post"
-						data-event="change-password">
+						data-event="change-password"
+					>
 						<div class="col-sm-12">
 							<h2>Change password</h2>
 						</div>
@@ -305,68 +347,80 @@
 							<!-- TODO: use revealPassword -->
 							<label
 								for="old_password_input"
-								class="sr-only">Enter current password</label>
+								class="sr-only"
+							>Enter current password</label>
 							<input
 								id="old_password_input"
 								type="password"
 								name="old_password"
 								class="input"
-								placeholder="Enter current password">
+								placeholder="Enter current password"
+							>
 						</div>
 						<div class="col-sm-12 password-container">
 							<label
 								for="new_password_input"
-								class="sr-only">Enter desired new password</label>
+								class="sr-only"
+							>Enter desired new password</label>
 							<input
 								id="new_password_input"
 								type="password"
 								name="new_password"
 								class="input"
-								placeholder="Enter desired new password">
+								placeholder="Enter desired new password"
+							>
 						</div>
 						<div class="col-sm-12 password-container">
 							<label
 								for="verify_password_input"
-								class="sr-only">Repeat new password</label>
+								class="sr-only"
+							>Repeat new password</label>
 							<input
 								id="verify_password_input"
 								type="password"
 								name="verify_password"
 								class="input"
-								placeholder="Repeat new password">
+								placeholder="Repeat new password"
+							>
 						</div>
 						<div class="col-sm-12 feedback" />
 						<div class="col-sm-12">
 							<button
 								type="submit"
-								class="btn">Change password</button>
+								class="btn"
+							>Change password</button>
 						</div>
 					</form>
 				</div>
 
 				<div
 					class="col-sm-12"
-					data-advanced>
+					data-advanced
+				>
 					<h2>Custom Stylesheet</h2>
 				</div>
 				<div
 					class="col-sm-12"
-					data-advanced>
+					data-advanced
+				>
 					<label
 						for="user-specified-css-input"
-						class="sr-only">Custom stylesheet. You can override any style with CSS here.</label>
+						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"
 						class="input"
 						name="userStyles"
-						placeholder="/* You can override any style with CSS here */" />
+						placeholder="/* You can override any style with CSS here */"
+					/>
 				</div>
 			</div>
 
 			<div
 				v-if="!this.$root.serverConfiguration.public"
-				class="session-list">
+				class="session-list"
+			>
 				<h2>Sessions</h2>
 
 				<h3>Current session</h3>

client/components/Windows/SignIn.vue

@@ -3,24 +3,28 @@
 		id="sign-in"
 		class="window"
 		role="tabpanel"
-		aria-label="Sign-in">
+		aria-label="Sign-in"
+	>
 		<form
 			class="container"
 			method="post"
 			action=""
-			@submit="onSubmit">
+			@submit="onSubmit"
+		>
 			<img
 				src="img/logo-vertical-transparent-bg.svg"
 				class="logo"
 				alt="The Lounge"
 				width="256"
-				height="170">
+				height="170"
+			>
 			<img
 				src="img/logo-vertical-transparent-bg-inverted.svg"
 				class="logo-inverted"
 				alt="The Lounge"
 				width="256"
-				height="170">
+				height="170"
+			>
 
 			<label for="signin-username">Username</label>
 			<input
@@ -34,7 +38,8 @@
 				autocomplete="username"
 				:value="getStoredUser()"
 				required
-				autofocus>
+				autofocus
+			>
 
 			<div class="password-container">
 				<label for="signin-password">Password</label>
@@ -48,18 +53,21 @@
 						autocapitalize="none"
 						autocorrect="off"
 						autocomplete="current-password"
-						required>
+						required
+					>
 				</RevealPassword>
 			</div>
 
 			<div
 				v-if="errorShown"
-				class="error">Authentication failed.</div>
+				class="error"
+			>Authentication failed.</div>
 
 			<button
 				:disabled="inFlight"
 				type="submit"
-				class="btn">Sign in</button>
+				class="btn"
+			>Sign in</button>
 		</form>
 	</div>
 </template>