<!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>
<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">
<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>
</ul>
</div>
<a ng-click="disconnect()">
<i class="glyphicon glyphicon-remove"></i>
</a>
</div>
</div>
<div id="sidebar">
<ul class="nav nav-pills nav-stacked">
<li class="bufferfilter">
<form role="form">
<input class="form-control" type="text" id="bufferFilter" ng-model="search.$" placeholder="Search">
</form>
</li>
<li class="" ng-class="{'active': content.active }" ng-repeat="(key, content) in buffers | toArray | filter: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 class="time">
<span class="date text-muted">
{{ bufferline.date | date:'HH:mm' }}
</span>
</td>
<td class="prefix">
<span ng-repeat="part in bufferline.prefix" class="text" 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>