Collapse for frontpage, and style inputs
This commit is contained in:
Tor Hveem
parent
d1ab293b4b
commit
001024db7d
|
|
@ -71,6 +71,26 @@ input#sendMessage {
|
||||||
border: 0;
|
border: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
.panel input {
|
||||||
|
max-width: 300px;
|
||||||
|
}
|
||||||
|
input[type=text], input[type=password] {
|
||||||
|
color: black;
|
||||||
|
border: 0;
|
||||||
|
-webkit-box-shadow:
|
||||||
|
inset 0 0 8px rgba(0,0,0,0.4),
|
||||||
|
0 0 16px rgba(0,0,0,0.4);
|
||||||
|
-moz-box-shadow:
|
||||||
|
inset 0 0 8px rgba(0,0,0,0.4),
|
||||||
|
0 0 16px rgba(0,0,0,0.4);
|
||||||
|
box-shadow:
|
||||||
|
inset 0 0 8px rgba(0,0,0,0.4),
|
||||||
|
0 0 16px rgba(0,0,0,0.4);
|
||||||
|
background: rgba(255,255,255,0.5);
|
||||||
|
}
|
||||||
|
#sidebar, .panel {
|
||||||
|
background: #282828;
|
||||||
|
}
|
||||||
#sidebar {
|
#sidebar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 12%;
|
width: 12%;
|
||||||
|
|
@ -78,8 +98,7 @@ input#sendMessage {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
min-width: 130px;
|
min-width: 130px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
background: #282828;
|
}
|
||||||
}
|
|
||||||
.content {
|
.content {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
|
|
|
||||||
135
index.html
135
index.html
|
|
@ -32,55 +32,96 @@
|
||||||
<div class="alert alert-danger" ng-show="errorMessage">
|
<div class="alert alert-danger" ng-show="errorMessage">
|
||||||
<strong>Oh no!</strong> We cannot connect!
|
<strong>Oh no!</strong> We cannot connect!
|
||||||
</div>
|
</div>
|
||||||
<form class="form-signin" role="form">
|
<div class="panel-group" id="accordion">
|
||||||
<div class="form-group">
|
<div class="panel ">
|
||||||
<label class="control-label" for="host">WeeChat hostname</label>
|
<div class="panel-heading">
|
||||||
<input type="text" class="form-control" id="host" ng-model="host" placeholder="Address">
|
<h4 class="panel-title">
|
||||||
<p class="help-block">Enter the hostname to the WeeChat relay</p>
|
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
|
||||||
</div>
|
Connection settings
|
||||||
<div class="form-group">
|
</a>
|
||||||
<label class="control-label" for="port">WeeChat port number</label>
|
</h4>
|
||||||
<input type="text" class="form-control" id="port" ng-model="port" placeholder="9001">
|
|
||||||
<p class="help-block">Enter the the port to the WeeChat relay</p>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="control-label" for="password">WeeChat relay password</label>
|
|
||||||
<input type="password" class="form-control" id="password" ng-model="password" placeholder="Password">
|
|
||||||
<p class="help-block">Password will be stored in your browser session</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div id="collapseOne" class="panel-collapse collapse in">
|
||||||
<label class="control-label" for="proto">Encryption</label>
|
<div class="panel-body">
|
||||||
<input type="checkbox" class="form-control" id="ssl" ng-model="ssl">
|
<form class="form-signin" role="form">
|
||||||
<p class="help-block">Check the box if you want to encrypt communication between browser and WeeChat. <strong>Note</strong>: Due to a <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=594502">bug</a> encryption will not work in Firefox. You must also first visit the URL https://weechathost:relayport/ to accept the certificate</p>
|
<div class="form-group">
|
||||||
|
<label class="control-label" for="host">WeeChat hostname</label>
|
||||||
|
<input type="text" class="form-control" id="host" ng-model="host" placeholder="Address">
|
||||||
|
<p class="help-block">Enter the hostname to the WeeChat relay</p>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="control-label" for="port">WeeChat port number</label>
|
||||||
|
<input type="text" class="form-control" id="port" ng-model="port" placeholder="9001">
|
||||||
|
<p class="help-block">Enter the the port to the WeeChat relay</p>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="control-label" for="password">WeeChat relay password</label>
|
||||||
|
<input type="password" class="form-control" id="password" ng-model="password" placeholder="Password">
|
||||||
|
<p class="help-block">Password will be stored in your browser session</p>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="control-label" for="proto">Encryption</label>
|
||||||
|
<input type="checkbox" class="form-control" id="ssl" ng-model="ssl">
|
||||||
|
<p class="help-block">Read encryption instructions for help</p>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="control-label" for="port">Lines</label>
|
||||||
|
<input type="text" class="form-control" id="lines" ng-model="lines" placeholder="40">
|
||||||
|
<p class="help-block">Enter number of lines to sync from WeeChat on connect</p>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-lg btn-primary" ng-click="connect()">Connect!</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="panel ">
|
||||||
|
<div class="panel-heading">
|
||||||
|
<h4 class="panel-title">
|
||||||
|
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
|
||||||
|
Usage instructions
|
||||||
|
</a>
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
<div id="collapseTwo" class="panel-collapse collapse">
|
||||||
|
<div class="panel-body">
|
||||||
|
<div>To start using, please enable relay in your WeeChat client:
|
||||||
|
<pre>
|
||||||
|
/set relay.network.password yourpassword
|
||||||
|
/relay add weechat 9001</pre>
|
||||||
|
<span class="label label-warning">WeeChat version 0.4.2 or higher is required.</span><br>
|
||||||
|
The communication goes directly between your browser and your weechat in clear text.
|
||||||
|
Connection settings are saved between sessions, including password, in your own browser.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="panel ">
|
||||||
|
<div class="panel-heading">
|
||||||
|
<h4 class="panel-title">
|
||||||
|
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
|
||||||
|
Encryption instructions
|
||||||
|
</a>
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
<div id="collapseThree" class="panel-collapse collapse">
|
||||||
|
<div class="panel-body">
|
||||||
|
If you check the encryption box, communication between browser and WeeChat will be encrypted.<br>
|
||||||
|
<strong>Note</strong>: Due to a <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=594502">bug</a> encryption will not work in Firefox. You must also first visit the URL https://weechathost:relayport/ to accept the certificate</p>
|
||||||
|
If you want to use encrypted session you first have to set up the relay using SSL like this:
|
||||||
|
<pre>
|
||||||
|
$ mkdir -p ~/.weechat/ssl
|
||||||
|
$ cd ~/.weechat/ssl
|
||||||
|
$ openssl req -nodes -newkey rsa:2048 -keyout relay.pem -x509 -days 365 -out relay.pem
|
||||||
|
</pre>
|
||||||
|
If WeeChat is already running, you can reload the certificate and private key with command:
|
||||||
|
<pre>
|
||||||
|
/relay sslcertkey
|
||||||
|
/relay add ssl.weechat 8000
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
|
||||||
<label class="control-label" for="port">Lines</label>
|
|
||||||
<input type="text" class="form-control" id="lines" ng-model="lines" placeholder="40">
|
|
||||||
<p class="help-block">Enter number of lines to sync from WeeChat on connect</p>
|
|
||||||
</div>
|
|
||||||
<button class="btn btn-lg btn-primary" ng-click="connect()">Connect!</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<h3>Instructions</h3>
|
|
||||||
<div>To start using, please enable relay in your WeeChat client:
|
|
||||||
<pre>
|
|
||||||
/set relay.network.password yourpassword
|
|
||||||
/relay add weechat 9001</pre>
|
|
||||||
<span class="label label-warning">WeeChat version 0.4.2 or higher is required.</span><br>
|
|
||||||
The communication goes directly between your browser and your weechat in clear text.
|
|
||||||
Connection settings are saved between sessions, including password, in your own browser.
|
|
||||||
<h4>Encryption</h4>
|
|
||||||
If you want to use encrypted session you first have to set up the relay using SSL
|
|
||||||
<pre>
|
|
||||||
$ mkdir -p ~/.weechat/ssl
|
|
||||||
$ cd ~/.weechat/ssl
|
|
||||||
$ openssl req -nodes -newkey rsa:2048 -keyout relay.pem -x509 -days 365 -out relay.pem
|
|
||||||
</pre>
|
|
||||||
If WeeChat is already running, you can reload the certificate and private key with command:
|
|
||||||
<pre>
|
|
||||||
/relay sslcertkey
|
|
||||||
/relay add ssl.weechat 8000
|
|
||||||
</pre>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content" ng-show="connected">
|
<div class="content" ng-show="connected">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue