d6de5805a2
This commit introduces a way to handle wrong password. The only way to know it is by sending an other message after the init one. If we receive an answer to this second message id then we know we are connected with the good password, otherwise we will received an onclose event from the websocket.
235 lines
12 KiB
HTML
235 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html ng-app="weechat" ng-cloak>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title ng-bind-template="WeeChat {{ pageTitle}}"></title>
|
|
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
|
|
<link rel="shortcut icon" type="image/png" href="img/favicon.png" >
|
|
<link href="css/glowingbear.css" rel="stylesheet" media="screen">
|
|
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
|
|
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-sanitize.min.js"></script>
|
|
<script type="text/javascript" src="js/underscore.js"></script>
|
|
<script type="text/javascript" src="js/localstorage.js"></script>
|
|
<script type="text/javascript" src="js/weechat.js"></script>
|
|
<script type="text/javascript" src="js/websockets.js"></script>
|
|
<script type="text/javascript" src="js/models.js"></script>
|
|
<script type="text/javascript" src="js/plugins.js"></script>
|
|
<script type="text/javascript" src="js/favico-0.3.0.min.js"></script>
|
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
|
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
|
|
</head>
|
|
<body ng-controller="WeechatCtrl" ng-keydown="handleKeyPress($event)">
|
|
<div ng-hide="connected" class="container">
|
|
<h2>
|
|
<img alt="logo" src="img/favicon.png">
|
|
glowing bear
|
|
<small>
|
|
WeeChat web frontend
|
|
</small>
|
|
</h2>
|
|
<div class="alert alert-danger" ng-show="errorMessage">
|
|
<strong>Oh no!</strong> We cannot connect!
|
|
</div>
|
|
<div class="panel-group" id="accordion">
|
|
<div class="panel ">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
|
|
Connection settings
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
<div id="collapseOne" class="panel-collapse collapse in">
|
|
<div class="panel-body">
|
|
<form class="form-signin" role="form">
|
|
<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>
|
|
<div class="alert alert-danger" ng-show="passwordError">
|
|
Error wrong password
|
|
</div>
|
|
<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 <i class="glyphicon glyphicon-chevron-right"></i></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>
|
|
<div class="content" ng-show="connected">
|
|
<div id="topbar" class="horizontal-line">
|
|
<div class="brand">
|
|
<img alt="brand" src="img/favicon.png">
|
|
</div>
|
|
<div class="title">
|
|
{{ activeBuffer().title}}
|
|
</div>
|
|
<div class="actions pull-right">
|
|
<div class="dropdown pull-left">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
|
<i class="glyphicon glyphicon-cog"></i>
|
|
<span class="caret"></span>
|
|
</a>
|
|
<ul class="dropdown-menu pull-right">
|
|
<li class="">
|
|
<form class="form-inline" role="form">
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" ng-model="onlyUnread">
|
|
Only show unread
|
|
</label>
|
|
</div>
|
|
</form>
|
|
</li>
|
|
<li class="">
|
|
<form class="form-inline" role="form">
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" ng-model="notimestamp">
|
|
Hide timestamps
|
|
</label>
|
|
</div>
|
|
</form>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<a ng-click="disconnect()">
|
|
<i class="glyphicon glyphicon-remove"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div id="sidebar" class="vertical-line">
|
|
<ul class="nav nav-pills nav-stacked">
|
|
<li class="bufferfilter">
|
|
<form role="form">
|
|
<input class="form-control" type="text" id="bufferFilter" ng-model="search" ng-keydown="handleSearchBoxKey($event)" placeholder="Search">
|
|
</form>
|
|
</li>
|
|
<li class="buffer" ng-class="{'active': content.active }" ng-repeat="(key, content) in buffers | toArray | filter:{fullName:search} | filter:hasUnread | orderBy:'content.number':true">
|
|
<a href="#" ng-click="setActiveBuffer(content.id)" title="{{ content.fullName }}">
|
|
<span class="badge pull-right" ng-hide="content.notification" ng-if="content.unread" ng-bind="content.unread"></span>
|
|
<span class="badge pull-right danger" ng-show="content.notification" ng-bind="content.notification"></span>
|
|
{{ content.shortName }}<span ng-hide="content.shortName">{{ content.fullName }}</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="bufferlines">
|
|
<table>
|
|
<tbody>
|
|
<tr class="bufferline" ng-repeat-start="bufferline in activeBuffer().lines">
|
|
<td ng-hide="notimestamp" class="time">
|
|
<span class="date text-muted">
|
|
{{ bufferline.date | date:'HH:mm' }}
|
|
</span>
|
|
</td>
|
|
<td class="prefix vertical-line"><span ng-repeat="part in bufferline.prefix" style="{{ part.fg }}">{{ part.text }}</span></td>
|
|
<td class="message">
|
|
<span ng-repeat="part in bufferline.content" class="text" style="{{ part.fg }}" ng-bind-html="part.text"></span>
|
|
|
|
<div ng-repeat="metadata in bufferline.metadata">
|
|
<div ng-show="metadata.visible">
|
|
<button class="btn btn-primary pull-right" ng-click="metadata.visible = false">Hide {{ metadata.name }}</button>
|
|
<div ng-bind-html="metadata.content"></div>
|
|
|
|
</div>
|
|
<div ng-hide="metadata.visible">
|
|
<button class="btn pull-right" ng-class="{'btn-warning': metadata.nsfw, 'btn-primary': !metadata.nsfw}" ng-click="metadata.visible = true">Show {{ metadata.name }}</button>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="readmarker" ng-repeat-end ng-show="activeBuffer().lastSeen==$index">
|
|
<td colspan="3">
|
|
<hr ng-if="activeBuffer().lastSeen==$index" id="readmarker">
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="push"></div>
|
|
</div>
|
|
<div id="footer" ng-show="connected">
|
|
<div class="navbar navbar-inverse navbar-fixed-bottom">
|
|
<form class="form form-horizontal" ng-submit="sendMessage()">
|
|
<div class="input-group">
|
|
<input id="sendMessage" type="text" class="form-control" autocomplete="off" ng-model="command" autofocus>
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-default btn-primary">Send</button>
|
|
</span>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</body>
|
|
</html>
|