2013-02-16 19:18:14 +01:00
<!DOCTYPE html>
2013-10-07 00:12:44 +02:00
< 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 >
2013-10-07 14:26:05 +02:00
< 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" >
2013-10-26 10:30:35 +02:00
< 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 >
2013-10-11 19:07:04 +02:00
< 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 >
2013-10-05 16:05:16 +02:00
< script type = "text/javascript" src = "js/localstorage.js" > < / script >
2013-10-16 23:10:49 +02:00
< 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 >
2013-10-08 23:06:47 +02:00
< 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 >
2013-10-15 16:09:08 +02:00
< div class = "panel-group" id = "accordion" >
2013-10-22 13:26:35 +02:00
< div class = "panel" >
2013-10-15 16:09:08 +02:00
< 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 >
2013-10-15 16:09:08 +02:00
< div id = "collapseOne" class = "panel-collapse collapse in" >
< div class = "panel-body" >
< form class = "form-signin" role = "form" >
< div class = "form-group" >
2013-10-25 13:43:03 +02:00
< 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 >
2013-10-17 18:36:53 +02:00
< div class = "alert alert-danger" ng-show = "passwordError" >
Error wrong password
< / div >
2013-10-25 13:43:03 +02:00
< label class = "control-label" for = "password" > WeeChat relay password< / label >
2013-10-15 16:09:08 +02:00
< input type = "password" class = "form-control" id = "password" ng-model = "password" placeholder = "Password" >
2013-10-25 13:43:03 +02:00
< 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 >
2013-10-15 16:09:08 +02:00
< / 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 >
2013-10-15 16:09:08 +02:00
< / form >
< / div >
< / div >
< / div >
2013-10-22 13:26:35 +02:00
< div class = "panel" >
2013-10-15 16:09:08 +02:00
< 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 >
2013-10-15 16:09:08 +02:00
< 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 >
2013-10-15 16:09:08 +02:00
< / 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 >
2013-10-15 16:09:08 +02:00
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 >
2013-10-15 16:09:08 +02:00
< / div >
< / div >
< / div >
2013-10-11 23:21:51 +02:00
< / 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-26 23:41:37 +02:00
< div id = "topbar" class = "horizontal-line" >
2013-10-16 16:04:37 +02:00
< div class = "brand" >
2013-10-16 14:13:23 +02:00
< img alt = "brand" src = "img/favicon.png" >
< / div >
2013-10-16 16:04:37 +02:00
< div class = "title" >
2013-10-16 22:35:21 +02:00
{{ activeBuffer().title}}
2013-10-16 14:13:23 +02:00
< / div >
2013-10-19 12:45:16 +02:00
< div class = "actions pull-right vertical-line-left" >
2013-10-16 15:09:27 +02:00
< 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 >
2013-10-19 12:14:32 +02:00
< 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 >
2013-10-26 22:56:52 +02:00
< li class = "" >
< form class = "form-inline" role = "form" >
< div class = "checkbox" >
< label >
< input type = "checkbox" ng-model = "nonicklist" >
Hide nicklist
< / label >
< / div >
< / form >
< / li >
2013-10-16 15:09:27 +02:00
< / 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" >
2013-10-11 14:44:05 +02:00
< 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" >
2013-10-11 14:44:05 +02:00
< / 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 }}" >
2013-10-15 14:59:06 +02:00
< span class = "badge pull-right" ng-hide = "content.notification" ng-if = "content.unread" ng-bind = "content.unread" > < / span >
2013-10-15 14:31:41 +02:00
< 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 >
2013-10-26 23:17:32 +02:00
< div id = "bufferlines" ng-class = "{'withnicklist': nonicklist==false}" >
2013-10-26 22:56:52 +02:00
< div id = "nicklist" ng-hide = "nonicklist" class = "vertical-line-left" >
2013-10-27 00:26:17 +02:00
< ul class = "nicklistgroup list-unstyled" ng-repeat = "group in activeBuffer().nicklist" >
< li class = "" ng-repeat = "nick in group.nicks|orderBy:'nick.name'" >
2013-10-26 22:56:52 +02:00
< a ng-click = "nickAction(nick)" > < span ng-class = "nick.prefix_color" > {{nick.prefix}}< / span > < span ng-class = "color" > {{nick.name}}< / span > < / a >
< / li >
< / ul >
< / div >
2013-10-12 02:37:11 +02:00
< table >
< tbody >
2013-10-26 15:00:34 +02:00
< 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" >
2013-10-26 15:00:34 +02:00
< span class = "date" ng-class = "{'repeated-time': bufferline.shortTime==bufferlines[$index-1].shortTime}" >
2013-10-26 10:42:11 +02:00
< 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" >
2013-10-26 10:30:35 +02:00
< 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" >
2013-10-16 00:07:33 +02:00
< 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-08-06 23:07:29 +02:00
2013-10-12 02:37:11 +02:00
< / div >
< div ng-hide = "metadata.visible" >
2013-10-16 00:07:33 +02:00
< 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 >
2013-10-05 18:40:01 +02:00
< / div >
2013-10-12 02:37:11 +02:00
< div class = "push" > < / div >
2013-10-05 18:40:01 +02:00
< / div >
< div id = "footer" ng-show = "connected" >
2013-10-26 23:17:32 +02:00
< div class = "navbar navbar-inverse navbar-fixed-bottom" ng-class = "{'withnicklist': nonicklist==false}" >
2013-10-09 17:53:25 +02:00
< form class = "form form-horizontal" ng-submit = "sendMessage()" >
< div class = "input-group" >
2013-10-15 16:08:51 +02:00
< 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 >
2013-10-05 18:40:01 +02:00
< / form >
< / div >
< / body >
2013-02-16 18:49:20 +01:00
< / html >
