Mirrors/thelounge
2
0
Fork 0
mirror of https://github.com/thelounge/thelounge synced 2024-11-22 12:03:11 +00:00
Code Issues Projects Releases Packages Wiki Activity

Fix lint

Browse source
This commit is contained in:
Richard Lewis 2019-03-01 16:18:16 +02:00 committed by Pavel Djundik
parent 5a3ad194e8
commit 08635beb61
8 changed files with 231 additions and 128 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
client/components/App.vue
View file

@ -2,18 +2,22 @@
<div <div
id="viewport" id="viewport"
:class="{notified: $store.state.isNotified}" :class="{notified: $store.state.isNotified}"
role="tablist"> role="tablist"
>
<Sidebar <Sidebar
:networks="networks" :networks="networks"
:active-channel="activeChannel" /> :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" :is="$store.state.activeWindow"
ref="window" /> ref="window"
/>
</article> </article>
</div> </div>
</template> </template>

37
client/components/NetworkForm.vue
View file

@ -3,11 +3,13 @@
id="connect" id="connect"
class="window" class="window"
role="tabpanel" role="tabpanel"
aria-label="Connect"> aria-label="Connect"
>
<div class="header"> <div class="header">
<button <button
class="lt" class="lt"
aria-label="Toggle channel list" /> aria-label="Toggle channel list"
/>
</div> </div>
<form <form
class="container" class="container"
@ -23,7 +25,8 @@
<input <input
type="hidden" type="hidden"
name="uuid" name="uuid"
:value="defaults.uuid"> :value="defaults.uuid"
>
Edit {{ defaults.name }} Edit {{ defaults.name }}
</template> </template>
<template v-else> <template v-else>
@ -51,7 +54,8 @@
class="input" class="input"
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 +70,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 +83,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 +94,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 +105,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>
@ -121,7 +125,8 @@
name="nick" name="nick"
: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">
@ -133,7 +138,8 @@
class="input username" class="input username"
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">
@ -147,7 +153,8 @@
class="input" class="input"
: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">
@ -159,7 +166,8 @@
class="input" class="input"
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">
@ -172,7 +180,7 @@
name="commands" name="commands"
placeholder="One raw command per line, each command will be executed on new connection" placeholder="One raw command per line, each command will be executed on new connection"
:value="defaults.commands ? defaults.commands.join('\n') : ''" :value="defaults.commands ? defaults.commands.join('\n') : ''"
/> />
</div> </div>
<div class="col-sm-9 col-sm-offset-3"> <div class="col-sm-9 col-sm-offset-3">
<button <button
@ -191,7 +199,8 @@
id="connect:channels" id="connect:channels"
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

6
client/components/RevealPassword.vue
View file

@ -9,9 +9,11 @@
{ '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>

73
client/components/Sidebar.vue
View file

@ -6,53 +6,64 @@
<img <img
: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> </div>
<NetworkList <NetworkList
:networks="networks" :networks="networks"
:active-channel="activeChannel" /> :active-channel="activeChannel"
/>
</div> </div>
<footer id="footer"> <footer id="footer">
<span <span
class="tooltipped tooltipped-n tooltipped-no-touch" 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 <span
class="tooltipped tooltipped-n tooltipped-no-touch" 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 <span
class="tooltipped tooltipped-n tooltipped-no-touch" 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 <span
class="tooltipped tooltipped-n tooltipped-no-touch" 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> </footer>
</aside> </aside>
<div id="sidebar-overlay" /> <div id="sidebar-overlay" />

12
client/components/Windows/Changelog.vue
View file

@ -2,17 +2,20 @@
<div <div
id="changelog" id="changelog"
class="window" class="window"
aria-label="Changelog"> aria-label="Changelog"
>
<div class="header"> <div class="header">
<button <button
class="lt" class="lt"
aria-label="Toggle channel list" /> aria-label="Toggle channel list"
/>
</div> </div>
<div class="container"> <div class="container">
<a <a
id="back-to-help" id="back-to-help"
href="#" href="#"
data-target="Help">« Help</a> 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>
@ -27,7 +30,8 @@
<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">View release notes for this version on GitHub</a> rel="noopener"
>View release notes for this version on GitHub</a>
</p> </p>
</template> </template>
</template> </template>

33
client/components/Windows/Help.vue
View file

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

162
client/components/Windows/Settings.vue
View file

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

24
client/components/Windows/SignIn.vue
View file

@ -3,24 +3,28 @@
id="sign-in" id="sign-in"
class="window" class="window"
role="tabpanel" role="tabpanel"
aria-label="Sign-in"> aria-label="Sign-in"
>
<form <form
class="container" class="container"
method="post" method="post"
action="" action=""
@submit="onSubmit"> @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
@ -34,7 +38,8 @@
autocomplete="username" autocomplete="username"
: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>
@ -48,18 +53,21 @@
autocapitalize="none" autocapitalize="none"
autocorrect="off" autocorrect="off"
autocomplete="current-password" autocomplete="current-password"
required> required
>
</RevealPassword> </RevealPassword>
</div> </div>
<div <div
v-if="errorShown" v-if="errorShown"
class="error">Authentication failed.</div> class="error"
>Authentication failed.</div>
<button <button
:disabled="inFlight" :disabled="inFlight"
type="submit" type="submit"
class="btn">Sign in</button> class="btn"
>Sign in</button>
</form> </form>
</div> </div>
</template> </template>