hardlounge/client/index.html
Jérémie Astori ad8ec4b1e6
Remove the "Stay signed in" checkbox at login
This option is less and less the norm on modern webapps, it is fair to assume this is the default behavior. In fact, we were making it the default.

But more importantly, coming soon is the ability of remotely logging out of your other sessions, which is well handled through token deletion. That means we need to know about said tokens, which are not sent in no-"Stay signed in" version.
2017-08-31 23:07:43 -04:00

913 lines
28 KiB
HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="preload" as="script" href="js/bundle.vendor.js">
<link rel="preload" as="script" href="js/bundle.js">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<link id="theme" rel="stylesheet" href="{{ theme }}">
<style id="user-specified-css"></style>
<title>The Lounge</title>
<link rel="shortcut icon" href="img/favicon.png" data-other="img/favicon-notification.png" data-toggled="false" id="favicon">
<link rel="apple-touch-icon" sizes="120x120" href="img/apple-touch-icon-120x120.png">
<link rel="mask-icon" href="img/logo.svg" color="#455164">
<link rel="manifest" href="manifest.json">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#455164">
</head>
<body class="signed-out {{#if public}}public{{/if}}" data-transports="{{tojson transports}}">
<div id="wrap">
<div id="viewport">
<aside id="sidebar">
<div class="networks"></div>
<div class="empty">
You're not connected to any networks yet.
</div>
</aside>
<footer id="footer">
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Sign in"><button class="icon sign-in" data-target="#sign-in" aria-label="Sign in"></button></span>
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Connect to network"><button class="icon connect" data-target="#connect" aria-label="Connect to network"></button></span>
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Client settings"><button class="icon settings" data-target="#settings" aria-label="Client settings"></button></span>
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Help"><button class="icon help" data-target="#help" aria-label="Help"></button></span>
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Sign out"><button class="icon sign-out" id="sign-out" aria-label="Sign out"></button></span>
</footer>
<div id="main">
<div id="windows">
<div id="loading" class="window active">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1 class="title">The Lounge is loading…</h1>
</div>
<div class="col-xs-12">
<p id="loading-page-message">Loading the app… <a href="http://enable-javascript.com/" target="_blank" rel="noopener">Make sure to have JavaScript enabled.</a></p>
<div id="loading-slow">
<p>This is taking longer than it should, there might be connectivity issues.</p>
<button id="loading-slow-reload" class="btn">Reload page</button>
</div>
<script async src="js/loading-slow-alert.js"></script>
</div>
</div>
</div>
</div>
<div id="chat-container" class="window">
<div id="chat"></div>
<button id="connection-error" class="btn btn-reconnect">Client connection lost &mdash; Click here to reconnect</button>
<form id="form" method="post" action="">
<div class="input">
<span id="nick">
<span id="nick-value" spellcheck="false"></span><!-- Comments here remove spaces between elements
--><span id="set-nick-tooltip" class="tooltipped tooltipped-e" aria-label="Change nick"><button id="set-nick" type="button" aria-label="Change nick"></button></span><!--
--><span id="cancel-nick-tooltip" class="tooltipped tooltipped-e" aria-label="Cancel"><button id="cancel-nick" type="button" aria-label="Cancel"></button></span><!--
--><span id="save-nick-tooltip" class="tooltipped tooltipped-e" aria-label="Save"><button id="submit-nick" type="button" aria-label="Save"></button></span>
</span>
<textarea id="input" class="mousetrap"></textarea>
<span id="submit-tooltip" class="tooltipped tooltipped-w tooltipped-no-touch" aria-label="Send message">
<button id="submit" type="submit" aria-label="Send message"></button>
</span>
</div>
</form>
</div>
<div id="sign-in" class="window">
<form class="container" method="post" action="">
<div class="row">
<div class="col-xs-12">
<h1 class="title">Sign in to The Lounge</h1>
</div>
<div class="col-xs-12">
<label>
Username
<input class="input" name="user">
</label>
</div>
<div class="col-xs-12">
<label>
Password
<input class="input" type="password" name="password">
</label>
</div>
<div class="col-xs-12 error" style="display: none;">
Authentication failed.
</div>
<div class="col-xs-12">
<button type="submit" class="btn">
Sign in
</button>
</div>
</div>
</form>
</div>
<div id="connect" class="window">
<div class="header">
<button class="lt" aria-label="Toggle channel list"></button>
</div>
<form class="container" method="post" action="">
<div class="row">
<div class="col-sm-12">
<h1 class="title">
{{#if public}}The Lounge - {{/if}}
Connect
{{#unless displayNetwork}}
{{#if lockNetwork}}
to {{defaults.name}}
{{/if}}
{{/unless}}
</h1>
</div>
{{#if displayNetwork}}
<div>
<div class="col-sm-12">
<h2>Network settings</h2>
</div>
<div class="col-sm-3">
<label for="connect:name">Name</label>
</div>
<div class="col-sm-9">
<input class="input" id="connect:name" name="name" value="{{defaults.name}}">
</div>
<div class="col-sm-3">
<label for="connect:host">Server</label>
</div>
<div class="col-sm-6 col-xs-8">
<input class="input" id="connect:host" name="host" value="{{defaults.host}}" aria-label="Server address" {{#if lockNetwork}}disabled{{/if}}>
</div>
<div class="col-sm-3 col-xs-4">
<div class="port">
<input class="input" type="number" min="1" max="65535" name="port" value="{{defaults.port}}" aria-label="Server port" {{#if lockNetwork}}disabled{{/if}}>
</div>
</div>
<div class="clearfix"></div>
<div class="col-sm-3">
<label for="connect:password">Password</label>
</div>
<div class="col-sm-9">
<input class="input" id="connect:password" type="password" name="password" value="{{defaults.password}}">
</div>
<div class="col-sm-9 col-sm-offset-3">
<label class="tls">
<input type="checkbox" name="tls" {{#if defaults.tls}}checked{{/if}} {{#if lockNetwork}}disabled{{/if}}>
Enable TLS/SSL
</label>
</div>
<div class="clearfix"></div>
</div>
{{/if}}
<div class="col-sm-12">
<h2>User preferences</h2>
</div>
<div class="col-sm-3">
<label for="connect:nick">Nick</label>
</div>
<div class="col-sm-9">
<input class="input nick" id="connect:nick" name="nick" value="{{defaults.nick}}">
</div>
{{#unless useHexIp}}
<div class="col-sm-3">
<label for="connect:username">Username</label>
</div>
<div class="col-sm-9">
<input class="input username" id="connect:username" name="username" value="{{defaults.username}}">
</div>
{{/unless}}
<div class="col-sm-3">
<label for="connect:realname">Real name</label>
</div>
<div class="col-sm-9">
<input class="input" id="connect:realname" name="realname" value="{{defaults.realname}}">
</div>
<div class="col-sm-3">
<label for="connect:channels">Channels</label>
</div>
<div class="col-sm-9">
<input class="input" id="connect:channels" name="join" value="{{defaults.join}}">
</div>
<div class="col-sm-9 col-sm-offset-3">
<button type="submit" class="btn">Connect</button>
</div>
</div>
</form>
</div>
<div id="settings" class="window">
<div class="header">
<button class="lt" aria-label="Toggle channel list"></button>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1 class="title">Settings</h1>
</div>
<div class="col-sm-12">
<h2>Messages</h2>
</div>
<div class="col-sm-6">
<label class="opt">
<input type="checkbox" name="motd">
Show <abbr title="Message Of The Day">MOTD</abbr>
</label>
</div>
<div class="col-sm-6">
<label class="opt">
<input type="checkbox" name="showSeconds">
Show seconds in timestamp
</label>
</div>
<div class="col-sm-12">
<h2>
Status messages
<span class="tooltipped tooltipped-n tooltipped-no-delay" aria-label="Joins, parts, kicks, nick changes, and mode changes">
<button class="extra-help" aria-label="Joins, parts, kicks, nick changes, and mode changes"></button>
</span>
</h2>
</div>
<div class="col-sm-12">
<label class="opt">
<input type="radio" name="statusMessages" value="shown">
Show all status messages individually
</label>
<label class="opt">
<input type="radio" name="statusMessages" value="condensed">
Condense status messages together
</label>
<label class="opt">
<input type="radio" name="statusMessages" value="hidden">
Hide all status messages
</label>
</div>
<div class="col-sm-12">
<h2>Visual Aids</h2>
</div>
<div class="col-sm-12">
<label class="opt">
<input type="checkbox" name="coloredNicks">
Enable colored nicknames
</label>
<label class="opt">
<input type="checkbox" name="autocomplete">
Enable autocomplete
</label>
</div>
<div class="col-sm-12">
<h2>Theme</h2>
</div>
<div class="col-sm-12">
<label for="theme-select" class="sr-only">Theme</label>
<select id="theme-select" name="theme" class="input">
{{#each themes}}
<option value="{{filename}}">
{{name}}
</option>
{{/each}}
</select>
</div>
{{#if prefetch}}
<div class="col-sm-12">
<h2>Link previews</h2>
</div>
<div class="col-sm-6">
<label class="opt">
<input type="checkbox" name="thumbnails">
Auto-expand images
</label>
</div>
<div class="col-sm-6">
<label class="opt">
<input type="checkbox" name="links">
Auto-expand websites
</label>
</div>
{{/if}}
{{#unless public}}
<div class="col-sm-12">
<h2>Push Notifications</h2>
</div>
<div class="col-sm-12">
<button type="button" class="btn" id="pushNotifications" disabled data-text-alternate="Unsubscribe from push notifications">Subscribe to push notifications</button>
<div class="error" id="pushNotificationsHttps">
<strong>Warning</strong>:
Push notifications are only supported over HTTPS connections.
</div>
<div class="error" id="pushNotificationsUnsupported">
<strong>Warning</strong>:
<span>Push notifications are not supported by your browser.</span>
</div>
</div>
{{/unless}}
<div class="col-sm-12">
<h2>Browser Notifications</h2>
</div>
<div class="col-sm-12">
<label class="opt">
<input id="desktopNotifications" type="checkbox" name="desktopNotifications">
Enable browser notifications<br>
<div class="error" id="warnUnsupportedDesktopNotifications">
<strong>Warning</strong>:
Notifications are not supported by your browser.
</div>
<div class="error" id="warnBlockedDesktopNotifications">
<strong>Warning</strong>:
Notifications are blocked by your browser.
</div>
</label>
</div>
<div class="col-sm-12">
<label class="opt">
<input type="checkbox" name="notification">
Enable notification sound
</label>
</div>
<div class="col-sm-12">
<div class="opt">
<button id="play">Play sound</button>
</div>
</div>
<div class="col-sm-12">
<label class="opt">
<input type="checkbox" name="notifyAllMessages">
Enable notification for all messages
</label>
</div>
<div class="col-sm-12">
<label class="opt">
<label for="highlights" class="sr-only">Custom highlights (comma-separated keywords)</label>
<input type="text" id="highlights" name="highlights" class="input" placeholder="Custom highlights (comma-separated keywords)">
</label>
</div>
{{#unless public}}
{{#unless ldap.enable}}
<div id="change-password">
<form action="" method="post">
<div class="col-sm-12">
<h2>Change password</h2>
</div>
<div class="col-sm-12">
<label for="old_password_input" class="sr-only">Enter current password</label>
<input type="password" id="old_password_input" name="old_password" class="input" placeholder="Enter current password">
</div>
<div class="col-sm-12">
<label for="new_password_input" class="sr-only">Enter desired new password</label>
<input type="password" id="new_password_input" name="new_password" class="input" placeholder="Enter desired new password">
</div>
<div class="col-sm-12">
<label for="verify_password_input" class="sr-only">Repeat new password</label>
<input type="password" id="verify_password_input" name="verify_password" class="input" placeholder="Repeat new password">
</div>
<div class="col-sm-12 feedback"></div>
<div class="col-sm-12">
<button type="submit" class="btn">Change password</button>
</div>
</form>
</div>
{{/unless}}
{{/unless}}
<div class="col-sm-12">
<h2>Custom Stylesheet</h2>
</div>
<div class="col-sm-12">
<textarea class="input" name="userStyles" id="user-specified-css-input" placeholder="You can override any style with CSS here"></textarea>
</div>
</div>
</div>
</div>
<div id="help" class="window">
<div class="header">
<button class="lt" aria-label="Toggle channel list"></button>
</div>
<div class="container">
<h1 class="title">Help</h1>
<h2>Keyboard Shortcuts</h2>
<h3>On Windows / Linux</h3>
<div class="help-item">
<div class="subject">
<kbd>Ctrl</kbd> + <kbd></kbd> / <kbd></kbd>
</div>
<div class="description">
<p>Switch to the previous/next window in the channel list</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd>
</div>
<div class="description">
<p>Clear the current screen</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<kbd>Ctrl</kbd> + <kbd>K</kbd>
</div>
<div class="description">
<p>
Mark any text typed after this shortcut to be colored. After
hitting this shortcut, enter an integer in the
<code>0—15</code> range to select the desired color.
</p>
<p>
A color reference can be found
<a href="https://modern.ircdocs.horse/formatting.html#colors" target="_blank" rel="noopener">here</a>.
</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<kbd>Ctrl</kbd> + <kbd>B</kbd>
</div>
<div class="description">
<p>Mark all text typed after this shortcut as bold.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<kbd>Ctrl</kbd> + <kbd>U</kbd>
</div>
<div class="description">
<p>Mark all text typed after this shortcut as underlined.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<kbd>Ctrl</kbd> + <kbd>I</kbd>
</div>
<div class="description">
<p>Mark all text typed after this shortcut as italics.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<kbd>Ctrl</kbd> + <kbd>O</kbd>
</div>
<div class="description">
<p>
Mark all text typed after this shortcut to be reset to its
original formatting.
</p>
</div>
</div>
<h3>On macOS</h3>
<div class="help-item">
<div class="subject">
<kbd></kbd> + <kbd></kbd> / <kbd></kbd>
</div>
<div class="description">
<p>Switch to the previous/next window in the channel list</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<kbd></kbd> + <kbd></kbd> + <kbd>L</kbd>
</div>
<div class="description">
<p>Clear the current screen</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<kbd></kbd> + <kbd>K</kbd>
</div>
<div class="description">
<p>
Mark any text typed after this shortcut to be colored. After
hitting this shortcut, enter an integer in the
<code>0—15</code> range to select the desired color.
</p>
<p>
A color reference can be found
<a href="https://modern.ircdocs.horse/formatting.html#colors" target="_blank" rel="noopener">here</a>.
</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<kbd></kbd> + <kbd>B</kbd>
</div>
<div class="description">
<p>Mark all text typed after this shortcut as bold.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<kbd></kbd> + <kbd>U</kbd>
</div>
<div class="description">
<p>Mark all text typed after this shortcut as underlined.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<kbd></kbd> + <kbd>I</kbd>
</div>
<div class="description">
<p>Mark all text typed after this shortcut as italics.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<kbd></kbd> + <kbd>O</kbd>
</div>
<div class="description">
<p>
Mark all text typed after this shortcut to be reset to its
original formatting.
</p>
</div>
</div>
<h2>Commands</h2>
<div class="help-item">
<div class="subject">
<code>/away [message]</code>
</div>
<div class="description">
<p>Mark yourself as away with an optional message.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/back</code>
</div>
<div class="description">
<p>Remove your away status (set with <code>/away</code>).</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/ban nick</code>
</div>
<div class="description">
<p>Ban (<code>+b</code>) a user from the current channel.
This can be a nickname or a hostmask.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/banlist</code>
</div>
<div class="description">
<p>Load the banlist for the current channel.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/clear</code>
</div>
<div class="description">
<p>Clear the current screen.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/collapse</code>
</div>
<div class="description">
<p>
Collapse all previews in the current channel (opposite of
<code>/expand</code>)
</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/connect host [port]</code>
</div>
<div class="description">
<p>
Connect to a new IRC network. If <code>port</code> starts with
a <code>+</code> sign, the connection will be made secure
using TLS.
</p>
<p>Alias: <code>/server</code></p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/ctcp target cmd [args]</code>
</div>
<div class="description">
<p>
Send a <abbr title="Client-to-client protocol">CTCP</abbr>
request. Read more about this on
<a href="https://en.wikipedia.org/wiki/Client-to-client_protocol" target="_blank" rel="noopener">the dedicated Wikipedia article</a>.
</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/deop nick [...nick]</code>
</div>
<div class="description">
<p>
Remove op (<code>-o</code>) from one or several users in the
current channel.
</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/devoice nick [...nick]</code>
</div>
<div class="description">
<p>
Remove voice (<code>-v</code>) from one or several users in
the current channel.
</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/disconnect [message]</code>
</div>
<div class="description">
<p>
Disconnect from the current network with an
optionally-provided message.
</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/expand</code>
</div>
<div class="description">
<p>
Expand all previews in the current channel (opposite of
<code>/collapse</code>)
</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/invite nick [channel]</code>
</div>
<div class="description">
<p>
Invite a user to the specified channel. If
<code>channel</code> is ommitted, user will be invited to the
current channel.
</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/join channel</code>
</div>
<div class="description">
<p>Join a channel.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/kick nick</code>
</div>
<div class="description">
<p>Kick a user from the current channel.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/list</code>
</div>
<div class="description">
<p>Retrieve a list of available channels on this network.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/me message</code>
</div>
<div class="description">
<p>
Send an action message to the current channel. The Lounge will
display it inline, as if the message was posted in the third
person.
</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/mode flags [args]</code>
</div>
<div class="description">
<p>
Set the given flags to the current channel if the active
window is a channel, another user if the active window is a
private message window, or yourself if the current window is a
server window.
</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/msg channel message</code>
</div>
<div class="description">
<p>Send a message to the specified channel.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/nick newnick</code>
</div>
<div class="description">
<p>Change your nickname on the current network.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/notice channel message</code>
</div>
<div class="description">
<p>Sends a notice message to the specified channel.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/op nick [...nick]</code>
</div>
<div class="description">
<p>
Give op (<code>+o</code>) to one or several users in the
current channel.
</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/part</code>
</div>
<div class="description">
<p>Close the current channel or private message window.</p>
<p>Aliases: <code>/close</code>, <code>/leave</code></p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/query nick</code>
</div>
<div class="description">
<p>Send a private message to the specified user.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/quit [message]</code>
</div>
<div class="description">
<p>
Disconnect from the current network with an optional message.
</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/raw message</code>
</div>
<div class="description">
<p>Send a raw message to the current IRC network.</p>
<p>Aliases: <code>/quote</code>, <code>/send</code></p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/slap nick</code>
</div>
<div class="description">
<p>Slap someone in the current channel with a trout!</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/topic newtopic</code>
</div>
<div class="description">
<p>Set the topic in the current channel.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/unban nick</code>
</div>
<div class="description">
<p>Unban (<code>-b</code>) a user from the current channel.
This can be a nickname or a hostmask.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/voice nick [...nick]</code>
</div>
<div class="description">
<p>
Give voice (<code>+v</code>) to one or several users in the
current channel.
</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<code>/whois nick</code>
</div>
<div class="description">
<p>
Retrieve information about the given user on the current
network.
</p>
</div>
</div>
<h2>About The Lounge</h2>
<p class="about">
{{#if gitCommit}}
The Lounge is running from source
(<a href="https://github.com/thelounge/lounge/tree/{{ gitCommit }}" target="_blank" rel="noopener"><code>{{ gitCommit }}</code></a>).<br>
{{else}}
The Lounge is in version <strong>{{version}}</strong>
(<a href="https://github.com/thelounge/lounge/releases/tag/v{{ version }}" target="_blank" rel="noopener">See release notes</a>).<br>
{{/if}}
<a href="https://thelounge.github.io/" target="_blank" rel="noopener">Website</a><br>
<a href="https://thelounge.github.io/docs/" target="_blank" rel="noopener">Documentation</a><br>
<a href="https://github.com/thelounge/lounge/issues/new" target="_blank" rel="noopener">Report a bug</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="context-menu-container">
<ul id="context-menu"></ul>
</div>
<div id="image-viewer"></div>
<script src="js/bundle.vendor.js"></script>
<script src="js/bundle.js"></script>
</body>
</html>