Split connect and settings into templates
This commit is contained in:
Pavel Djundik
parent
2a6b255aee
commit
55d1625ab2
@ -80,291 +80,8 @@
|
||||
</form>
|
||||
</div>
|
||||
<div id="sign-in" class="window"></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" data-type="settings">
|
||||
<div class="header">
|
||||
<button class="lt" aria-label="Toggle channel list"></button>
|
||||
</div>
|
||||
<div class="container">
|
||||
<h1 class="title">Settings</h1>
|
||||
|
||||
<div class="row">
|
||||
<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, away changes, and mode changes">
|
||||
<button class="extra-help" aria-label="Joins, parts, kicks, nick changes, away 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="{{name}}">
|
||||
{{displayName}}
|
||||
</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>
|
||||
|
||||
{{#unless public}}
|
||||
<div class="session-list">
|
||||
<h2>Sessions</h2>
|
||||
|
||||
<h3>Current session</h3>
|
||||
<div id="session-current"></div>
|
||||
|
||||
<h3>Other sessions</h3>
|
||||
<div id="session-list"></div>
|
||||
</div>
|
||||
{{/unless}}
|
||||
</div>
|
||||
</div>
|
||||
<div id="connect" class="window"></div>
|
||||
<div id="settings" class="window" data-type="settings"></div>
|
||||
|
||||
<div id="help" class="window">
|
||||
<div class="header">
|
||||
|
||||
@ -22,6 +22,8 @@ module.exports = {
|
||||
|
||||
windows: {
|
||||
sign_in: require("./windows/sign_in.tpl"),
|
||||
settings: require("./windows/settings.tpl"),
|
||||
connect: require("./windows/connect.tpl"),
|
||||
},
|
||||
|
||||
chan: require("./chan.tpl"),
|
||||
|
||||
88
client/views/windows/connect.tpl
Normal file
88
client/views/windows/connect.tpl
Normal file
@ -0,0 +1,88 @@
|
||||
<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>
|
||||
193
client/views/windows/settings.tpl
Normal file
193
client/views/windows/settings.tpl
Normal file
@ -0,0 +1,193 @@
|
||||
<div class="header">
|
||||
<button class="lt" aria-label="Toggle channel list"></button>
|
||||
</div>
|
||||
<div class="container">
|
||||
<h1 class="title">Settings</h1>
|
||||
|
||||
<div class="row">
|
||||
<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, away changes, and mode changes">
|
||||
<button class="extra-help" aria-label="Joins, parts, kicks, nick changes, away 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="{{name}}">
|
||||
{{displayName}}
|
||||
</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>
|
||||
|
||||
{{#unless public}}
|
||||
<div class="session-list">
|
||||
<h2>Sessions</h2>
|
||||
|
||||
<h3>Current session</h3>
|
||||
<div id="session-current"></div>
|
||||
|
||||
<h3>Other sessions</h3>
|
||||
<div id="session-list"></div>
|
||||
</div>
|
||||
{{/unless}}
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user