<!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/style.css" rel="stylesheet" media="screen">
<link href="css/glowingbear.css" rel="stylesheet" media="screen">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<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-route.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-sanitize.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.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/irc-utils.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="//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 relay hostname and port number</label>
<div class="input-group">
<input type="text" class="form-control monospace" id="host" ng-model="host" placeholder="Address">
<input type="text" class="form-control monospace" id="port" ng-model="port" placeholder="9001">
</div>
<div class="alert alert-danger" ng-show="passwordError">
Error wrong password
</div>
<label class="control-label" for="password">WeeChat relay password</label>
<input type="password" class="form-control monospace" id="password" ng-model="password" placeholder="Password">
<div class="checkbox">
<label>
<input type="checkbox" class="checkbox" id="savepassword" ng-model="savepassword">
Save password in your browser
</label>
</div>
<div class="checkbox">
<label class="control-label " for="ssl">
<input type="checkbox" class="" id="ssl" ng-model="ssl">
Encryption. Read instructions for help
</label>
</div>
</div>
<div class="form-group">
<label class="control-label" for="port">Lines</label>
<input type="text" class="form-control monospace" 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>
<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 class="panel" ng-hide="isinstalled">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
Install app
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
<p>If you have a very new Firefox you can install the frontend as an app. Click the button to install.</p>
<button class="btn btn-lg btn-primary" ng-click="install()">Install app <i class="glyphicon glyphicon-chevron-right"></i></button>
</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" title="Connected to {{ host }}:{{ port}}">
</div>
<div class="title" ng-bind-html="activeBuffer().title | linky:'_blank'"></div>
<div class="actions pull-right vertical-line-left">
<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>
<li class="">
<form class="form-inline" role="form">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="noembed">
Hide embedded content by default
</label>
</div>
</form>
</li>
<li class="">
<form class="form-inline" role="form">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="hotlistsync">
Sync hotlist with WeeChat
</label>
</div>
</form>
</li>
<li class="">
<form class="form-inline" role="form">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="nonicklist">
Hide nicklist
</label>
</div>
</form>
</li>
<li class="">
<form class="form-inline" role="form">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="orderbyserver">
Order channels by server
</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 monospace" 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:predicate">
<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.indent(predicate) }}{{ content.shortName }}<span ng-hide="content.shortName">{{ content.fullName }}</span>
</a>
</li>
</ul>
</div>
<div id="bufferlines" class="monospace" ng-class="{'withnicklist': showNicklist}">
<div id="nicklist" ng-show="showNicklist" class="vertical-line-left">
<ul class="nicklistgroup list-unstyled" ng-repeat="group in activeBuffer().nicklist">
<li class="" ng-repeat="nick in group.nicks|orderBy:'name'" ng-click="openQuery(nick.name)">
<a ng-click="nickAction(nick)"><span ng-class="nick.prefixClasses">{{nick.prefix}}</span><span ng-class="nick.nameClasses">{{nick.name}}</span></a>
</li>
</ul>
</div>
<table>
<tbody ng-repeat="bufferline in (bufferlines = activeBuffer().lines)">
<tr class="bufferline">
<td ng-hide="notimestamp" class="time">
<span class="date" ng-class="{'repeated-time': bufferline.shortTime==bufferlines[$index-1].shortTime}">
<span class="cof-chat_time cob-chat_time coa-chat_time">{{ bufferline.date | date:'HH' }}</span><span class="cof-chat_time_delimiters cob-chat_time_delimiters coa-chat_time_delimiters">:</span><span class="cof-chat_time cob-chat_time coa-chat_time">{{ bufferline.date | date:'mm' }}</span>
</span>
</td>
<td class="prefix"><span ng-repeat="part in bufferline.prefix" ng-class="{{ part.classes }}">{{ part.text }}</span></td>
<td class="message">
<span ng-repeat="part in bufferline.content" class="text" ng-class="{{ part.classes }}" ng-bind-html="part.text|linky:'_blank'"></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-if="activeBuffer().lastSeen==$index">
<td colspan="3">
<hr 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" ng-class="{'withnicklist': showNicklist}">
<div input-bar></div>
</div>
</body>
</html>