glowingbear-mainbox/index.html

264 lines
13 KiB
HTML
Raw Normal View History

2013-02-16 19:18:14 +01:00
<!DOCTYPE html>
<html ng-app="weechat" ng-cloak>
2013-02-16 18:49:20 +01:00
<head>
2013-10-09 17:53:25 +02:00
<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">
2013-10-06 12:34:41 +02:00
<link rel="shortcut icon" type="image/png" href="img/favicon.png" >
<link href="css/style.css" rel="stylesheet" media="screen">
2013-10-02 01:39:24 +02:00
<link href="css/glowingbear.css" rel="stylesheet" media="screen">
2013-10-26 14:19:45 +02:00
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
2013-10-11 15:59:55 +02:00
<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>
2013-10-24 22:38:57 +02:00
<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>
2013-02-16 19:18:14 +01:00
<script type="text/javascript" src="js/websockets.js"></script>
2013-10-08 02:42:19 +02:00
<script type="text/javascript" src="js/models.js"></script>
<script type="text/javascript" src="js/plugins.js"></script>
2013-10-15 15:21:13 +02:00
<script type="text/javascript" src="js/favico-0.3.0.min.js"></script>
2013-10-07 15:38:47 +02:00
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
2013-02-16 18:49:20 +01:00
</head>
2013-10-11 16:24:25 +02:00
<body ng-controller="WeechatCtrl" ng-keydown="handleKeyPress($event)">
2013-10-09 17:53:25 +02:00
<div ng-hide="connected" class="container">
<h2>
2013-10-16 14:13:23 +02:00
<img alt="logo" src="img/favicon.png">
2013-10-09 17:53:25 +02:00
glowing bear
<small>
WeeChat web frontend
</small>
</h2>
2013-10-11 23:38:30 +02:00
<div class="alert alert-danger" ng-show="errorMessage">
<strong>Oh no!</strong> We cannot connect!
</div>
<div class="panel-group" id="accordion">
2013-10-22 13:26:35 +02:00
<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>
2013-02-16 19:18:14 +01:00
</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" id="host" ng-model="host" placeholder="Address">
<input type="text" class="form-control" 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" 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" id="lines" ng-model="lines" placeholder="40">
<p class="help-block">Enter number of lines to sync from WeeChat on connect</p>
</div>
2013-10-16 14:25:07 +02:00
<button class="btn btn-lg btn-primary" ng-click="connect()">Connect <i class="glyphicon glyphicon-chevron-right"></i></button>
</form>
</div>
</div>
</div>
2013-10-22 13:26:35 +02:00
<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:
2013-10-26 08:36:06 +02:00
<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.
2013-10-22 13:26:35 +02:00
</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:
2013-10-26 08:36:06 +02:00
<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:
2013-10-26 08:36:06 +02:00
<pre>
/relay sslcertkey
/relay add ssl.weechat 8000
</pre>
2013-10-21 15:51:05 +02:00
</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>
2013-10-11 23:38:30 +02:00
</div>
</div>
2013-10-09 17:53:25 +02:00
<div class="content" ng-show="connected">
2013-10-16 23:27:47 +02:00
<div id="topbar" class="horizontal-line">
<div class="brand">
2013-10-16 14:13:23 +02:00
<img alt="brand" src="img/favicon.png">
</div>
<div class="title">
{{ activeBuffer().title}}
2013-10-16 14:13:23 +02:00
</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>
2013-10-17 10:50:29 +02:00
<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="hotlistsync">
Sync hotlist with WeeChat
</label>
</div>
</form>
</li>
</ul>
</div>
2013-10-16 14:25:07 +02:00
<a ng-click="disconnect()">
<i class="glyphicon glyphicon-remove"></i>
</a>
</div>
2013-10-16 14:13:23 +02:00
</div>
2013-10-16 23:27:47 +02:00
<div id="sidebar" class="vertical-line">
2013-10-11 00:51:18 +02:00
<ul class="nav nav-pills nav-stacked">
<li class="bufferfilter">
<form role="form">
2013-10-17 13:13:01 +02:00
<input class="form-control" type="text" id="bufferFilter" ng-model="search" ng-keydown="handleSearchBoxKey($event)" placeholder="Search">
</form>
</li>
2013-10-17 13:13:01 +02:00
<li class="buffer" ng-class="{'active': content.active }" ng-repeat="(key, content) in buffers | toArray | filter:{fullName:search} | filter:hasUnread | orderBy:'content.number':true">
2013-10-11 00:51:18 +02:00
<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>
2013-10-11 00:51:18 +02:00
{{ content.shortName }}<span ng-hide="content.shortName">{{ content.fullName }}</span>
</a>
</li>
</ul>
</div>
<div id="bufferlines">
2013-10-12 02:37:11 +02:00
<table>
<tbody>
<tr class="bufferline" ng-repeat-start="bufferline in (bufferlines = activeBuffer().lines)">
2013-10-17 10:50:29 +02:00
<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>
2013-10-12 02:37:11 +02:00
</span>
</td>
2013-10-26 10:32:17 +02:00
<td class="prefix"><span ng-repeat="part in bufferline.prefix" ng-class="{{ part.classes }}">{{ part.text }}</span></td>
2013-10-12 11:49:14 +02:00
<td class="message">
<span ng-repeat="part in bufferline.content" class="text" ng-class="{{ part.classes }}" ng-bind-html="part.text"></span>
2013-10-08 15:55:07 +02:00
2013-10-12 02:37:11 +02:00
<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>
2013-10-12 02:37:11 +02:00
<div ng-bind-html="metadata.content"></div>
2013-10-12 02:37:11 +02:00
</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>
2013-10-12 02:37:11 +02:00
</div>
</div>
</td>
</tr>
2013-10-12 21:06:24 +02:00
<tr class="readmarker" ng-repeat-end ng-show="activeBuffer().lastSeen==$index">
2013-10-12 20:44:40 +02:00
<td colspan="3">
2013-10-12 21:06:24 +02:00
<hr ng-if="activeBuffer().lastSeen==$index" id="readmarker">
2013-10-12 20:44:40 +02:00
</td>
</tr>
2013-10-12 02:37:11 +02:00
</tbody>
</table>
</div>
2013-10-12 02:37:11 +02:00
<div class="push"></div>
</div>
<div id="footer" ng-show="connected">
2013-10-09 17:53:25 +02:00
<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>
2013-10-09 17:53:25 +02:00
<span class="input-group-btn">
<button class="btn btn-default btn-primary">Send</button>
</span>
</div>
</form>
</div>
</body>
2013-02-16 18:49:20 +01:00
</html>