322:7dfdf32e8577
Anton Shestakov <av6@dwimlabs.net>, Sat, 14 Jul 2018 20:23:13 +0800
index: authorizing contact also adds it to the roster Maybe there are cases when this doesn't make sense, but so far this looks like the right thing to do.

previous change 321:b68b9cdc34da

index.html

Permissions: -rw-r--r--

Other formats: Feeds:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tram IM</title>
<link rel="stylesheet" href="/libs/uikit/2.27.5/css/uikit.min.css">
<link rel="stylesheet" href="/libs/uikit/2.27.5/css/components/form-advanced.min.css">
<link rel="stylesheet" href="/libs/uikit/2.27.5/css/components/progress.min.css">
<link rel="stylesheet" href="/css/tram-im.css">
<script src="/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/libs/underscore/1.9.1/underscore-min.js"></script>
<script src="/libs/backbone/1.3.3/backbone-min.js"></script>
<script src="/libs/rivets/0.8.1/rivets.bundled.min.js"></script>
<script src="/libs/moment/2.20.1/moment.min.js"></script>
<script src="/libs/uikit/2.27.5/js/uikit.min.js"></script>
<script src="/vendor/strophejs/strophe.min.js"></script>
<script src="/vendor/strophejs-plugins/disco/strophe.disco.js"></script>
<script src="/vendor/strophejs-plugins/ping/strophe.ping.js"></script>
<script src="/vendor/strophejs-plugins/register/strophe.register.js"></script>
<script src="/vendor/strophejs-plugins/roster/strophe.roster.js"></script>
<script src="/vendor/strophejs-plugins/vcard/strophe.vcard.js"></script>
<script src="/vendor/webrtc-adapter-6.2.1.js"></script>
</head>
<body>
<div class="uk-progress uk-progress-mini page-progress" data-app="progress" rv-hide="model:progress | eq undefined">
<div class="uk-progress-bar" rv-style-width="model:progress | percent"></div>
</div>
<div class="smart-container" data-step="noscript">
<div class="uk-alert">
<p class="uk-text-center">This page needs JavaScript to work.</p>
</div>
</div>
<div class="smart-container uk-hidden" data-step="login">
<div class="uk-form uk-form-horizontal" data-form="connect">
<div class="uk-form-row">
<label for="username" class="uk-form-label">Username</label>
<div class="uk-form-controls">
<input id="username" type="text" class="uk-width-1-1" required autofocus
rv-value="form:username" rv-class-uk-form-danger="form:username-errors">
<div class="uk-text-danger" rv-each-error="form:username-errors">{ error }</div>
</div>
</div>
<div class="uk-form-row">
<label for="password" class="uk-form-label">Password</label>
<div class="uk-form-controls">
<input id="password" type="password" class="uk-width-1-1" required
rv-value="form:password" rv-class-uk-form-danger="form:password-errors">
<div class="uk-text-danger" rv-each-error="form:password-errors">{ error }</div>
</div>
</div>
<div class="uk-form-row">
<div class="uk-form-controls">
<div class="uk-alert uk-alert-danger" rv-each-error="form:auth-errors">{ error }</div>
<button type="button" class="uk-button uk-button-primary" rv-on-click="connect">
<i class="uk-icon-sign-in"></i>&nbsp;Log in
</button>
<a class="uk-float-right uk-button uk-button-link" href="/register.html">Register</a>
</div>
</div>
</div>
</div>
<script>
$('[data-step="noscript"]').addClass('uk-hidden');
</script>
<div class="has-sidebar full-height uk-flex uk-flex-column uk-hidden" data-step="main">
<div class="sidebar" data-app="sidebar" rv-class-mini="model:sidebar/minified">
<ul class="uk-nav uk-nav-offcanvas uk-text-nowrap">
<li class="uk-text-center">
<a rv-on-click="view.minify">
<i class="uk-icon-chevron-right" rv-if="model:sidebar/minified"></i>
<i class="uk-icon-chevron-left" rv-unless="model:sidebar/minified"></i>
</a>
</li>
<li class="uk-nav-divider"></li>
<li rv-class-uk-active="model:show | eq 'chat'">
<a data-show="chat" rv-on-click="view.show">
<div class="status-pip" rv-style="'chat' | fn view.getPipColor"></div>
<span class="label">Ready to chat</span>
</a>
</li>
<li rv-class-uk-active="model:show | eq 'online'">
<a data-show="online" rv-on-click="view.show">
<div class="status-pip" rv-style="'online' | fn view.getPipColor"></div>
<span class="label">Online</span>
</a>
</li>
<li rv-class-uk-active="model:show | eq 'away'">
<a data-show="away" rv-on-click="view.show">
<div class="status-pip" rv-style="'away' | fn view.getPipColor"></div>
<span class="label">Away</span>
</a>
</li>
<li rv-class-uk-active="model:show | eq 'xa'">
<a data-show="xa" rv-on-click="view.show">
<div class="status-pip" rv-style="'xa' | fn view.getPipColor"></div>
<span class="label">Gone</span>
</a>
</li>
<li class="uk-nav-divider"></li>
<li>
<a data-uk-modal="{target:'#settings-modal'}">
<i class="uk-icon-cog fixed-width"></i>
<span class="label">Settings</span>
</a>
</li>
<li>
<a data-uk-modal="{target:'#profile-modal'}">
<i class="uk-icon-info-circle fixed-width"></i>
<span class="label">Profile</span>
</a>
</li>
<li class="uk-nav-divider"></li>
<li>
<a rv-on-click="view.disconnect">
<i class="uk-icon-sign-out fixed-width"></i>
<span class="label">Log out</span>
</a>
</li>
</ul>
</div>
<div class="uk-flex-item-none" data-app="calls"></div>
<div class="uk-grid uk-flex-item-auto main-grid">
<div class="uk-width-xlarge-1-4 uk-width-large-1-3 uk-width-medium-1-2 uk-flex uk-flex-column contact-list-block">
<ul class="uk-list uk-flex-item-auto contact-list" data-app="contacts"></ul>
<div class="uk-form uk-flex-item-none input-group separate">
<input id="new-contact" type="text" value="" placeholder="add a contact" required>
<span class="input-group-button">
<button type="button" class="uk-button uk-button-success" data-add-button>
<i class="uk-icon-user-plus"></i>
</button>
</span>
</div>
</div>
<div class="uk-width-xlarge-3-4 uk-width-large-2-3 uk-width-medium-1-2 uk-flex uk-flex-column">
<div class="uk-flex-item-auto message-area" data-app="logs"></div>
<div class="uk-form uk-flex-item-none input-group separate uk-hidden" data-form="send">
<input id="msg" type="text" value="" placeholder="send a message" required>
<span class="input-group-button">
<button class="uk-button uk-button-primary" data-send-button>
<i class="uk-icon-paper-plane"></i>
</button>
</span>
</div>
</div>
</div>
</div>
<div id="settings-modal" class="uk-modal">
<div class="uk-modal-dialog">
<button type="button" class="uk-modal-close uk-close"></button>
<div class="uk-modal-header"><h2>Settings</h2></div>
<div class="uk-form" data-app="settings">
<div class="uk-form-row">
<label>
<input type="checkbox" rv-checked="settings:chatstates">
Send chat state notifications (XEP-0085)
</label>
</div>
</div>
<div class="uk-modal-footer" data-app="server-info">
<p rv-if="server:name">
Server: { server:name } { server:version } on { server:os }
</p>
<p rv-if="server:name">
Message carbons (XEP-0280):
<span class="uk-text-success" rv-if="server:carbons">enabled</span>
<span class="uk-text-danger" rv-unless="server:carbons">not supported</span>
</p>
<p rv-if="server:name">
Client state indication (XEP-0352):
<span class="uk-text-success" rv-if="server:csi">enabled</span>
<span class="uk-text-danger" rv-unless="server:csi">not supported</span>
</p>
</div>
</div>
</div>
<div id="profile-modal" class="uk-modal">
<div class="uk-modal-dialog">
<button type="button" class="uk-modal-close uk-close"></button>
<div class="uk-modal-header"><h2>Profile</h2></div>
<dl data-app="profile">
<dt>Full Name</dt>
<dd>{ contact:profile:fullname }</dd>
<dt>Nickname</dt>
<dd>{ contact:profile:nickname }</dd>
<dt>Avatar</dt>
<dd><img rv-if="contact:profile:avatar/url" rv-src="contact:profile:avatar/url"></dd>
</dl>
<div class="uk-text-right">
<button class="uk-button uk-button-danger uk-modal-close" data-unregister-button>Remove account</button>
</div>
</div>
</div>
<script type="text/template" id="video-block-template">
<div class="video-block">
<video class="remote" autoplay></video>
<video class="local" autoplay muted></video>
<div class="contact autofade">
<div class="column avatar-column"></div>
<div class="column uk-width-1-1">
<strong>{ call:contact:profile:d/handle }</strong>
</div>
</div>
<div class="buttons uk-text-center">
<button type="button" class="uk-button uk-button-success autofade" data-mute-cam
rv-if="call:local/stream" rv-hide="call:local/video/muted">
<i class="uk-icon-eye"></i>
</button>
<button type="button" class="uk-button uk-button-danger" data-unmute-cam
rv-if="call:local/stream" rv-show="call:local/video/muted">
<i class="uk-icon-eye-slash"></i>
</button>
<button type="button" class="uk-button uk-button-success autofade" data-mute-mic
rv-if="call:local/stream" rv-hide="call:local/audio/muted">
<i class="uk-icon-microphone"></i>
</button>
<button type="button" class="uk-button uk-button-danger" data-unmute-mic
rv-if="call:local/stream" rv-show="call:local/audio/muted">
<i class="uk-icon-microphone-slash"></i>
</button>
<button type="button" class="uk-button uk-button-success autofade" data-mute-audio
rv-if="call:remote/stream" rv-hide="call:remote/audio/muted">
<i class="uk-icon-volume-up"></i>
</button>
<button type="button" class="uk-button uk-button-danger" data-unmute-audio
rv-if="call:remote/stream" rv-show="call:remote/audio/muted">
<i class="uk-icon-volume-off"></i>
</button>
<button type="button" class="uk-button uk-button-danger autofade" data-hang-up>
<i class="uk-icon-phone"></i>
</button>
</div>
</div>
</script>
<script type="text/template" id="avatar-template">
<div class="vignette">
<img class="avatar" rv-if="contact:profile:avatar/url" rv-src="contact:profile:avatar/url">
<div class="avatar" rv-unless="contact:profile:avatar/url" rv-style="contact:bjid | dumb-hash | fn view.getColors">
{ contact:profile:d/handle | first-letter }
</div>
</div>
</script>
<script type="text/template" id="message-template">
<div class="message" rv-data-id="message:id">
<div class="splitter" rv-if="message:d/split"></div>
<div class="column avatar-column" rv-class-uk-invisible="message:d/fold"></div>
<div class="column text-column">
<div rv-hide="message:d/fold">
<strong rv-if="message:contact:profile:d/handle">{ message:contact:profile:d/handle }</strong>
<strong rv-unless="message:contact:profile:d/handle">{ message:from }</strong>
</div>
<div rv-class="message:cls">
<span class="uk-float-right uk-text-muted">
<i class="uk-icon-pencil" rv-if="message:corrected" title="Edited (XEP-0308)"></i>
<i class="uk-icon-files-o" rv-if="message:carbon" title="Carbon (XEP-0280)"></i>
<time class="stamp"
rv-datetime="message:d/mstamp | iso-date"
rv-title="message:d/mstamp | format-date 'HH:mm:ss'">
{ message:d/mstamp | from-now }
</time>
</span>
<div rv-unless="message:html">{ message:text }</div>
<div class="xhtml-body" rv-if="message:html" rv-html="message:html"></div>
</div>
</div>
</div>
</script>
<script type="text/template" id="contact-template">
<li class="contact" rv-class-active="contact:active" rv-data-jid="contact:jid" rv-style="contact:show | fn view.getBorderColor">
<div class="column avatar-column">
<div class="status-pip" rv-title="contact:show" rv-style="contact:show | fn view.getPipColor"></div>
<div class="uk-badge uk-badge-notification uk-badge-warning" rv-if="contact:d/unread">{ contact:d/unread }</div>
</div>
<div class="column uk-width-1-1">
<strong>{ contact:profile:d/handle }</strong>
<div class="uk-text-nowrap">
<span>{ contact:status }</span>
<span rv-hide="contact:type | eq 'self'">{ contact:chatstate | only 'composing' }</span>
</div>
</div>
<div class="column uk-text-nowrap">
<i class="uk-icon-phone calling-icon" rv-if="contact:d/actions | has 'wait'"></i>
<button type="button" class="uk-button" data-call="av" rv-if="contact:d/actions | has 'call'">
<i class="uk-icon-video-camera"></i>
</button>
<button type="button" class="uk-button" data-call="a" rv-if="contact:d/actions | has 'call'">
<i class="uk-icon-phone"></i>
</button>
<button type="button" class="uk-button uk-button-success" data-accept="av" rv-if="contact:d/actions | has 'accept'">
<i class="uk-icon-video-camera"></i>
</button>
<button type="button" class="uk-button uk-button-success" data-accept="a" rv-if="contact:d/actions | has 'accept'">
<i class="uk-icon-phone"></i>
</button>
<button type="button" class="uk-button uk-button-danger" data-decline rv-if="contact:d/actions | has 'decline'">
<i class="uk-icon-times"></i>
</button>
<button type="button" class="uk-button uk-button-danger" data-hang-up rv-if="contact:d/actions | has 'hang-up'">
<i class="uk-icon-phone"></i> Hang up
</button>
<button type="button" class="uk-button" data-chat>
<i class="uk-icon-comments-o"></i>
</button>
<div class="uk-button-dropdown" data-uk-dropdown="{mode:'click',pos:'bottom-right'}" rv-if="contact:d/actions | has 'remove'">
<button class="uk-button"><i class="uk-icon-caret-down"></i></button>
<div class="uk-dropdown uk-dropdown-small">
<ul class="uk-nav uk-nav-dropdown">
<li><a data-remove rv-if="contact:d/actions | has 'remove'">Remove</a></li>
</ul>
</div>
</div>
</div>
<div class="uk-text-center">
<button type="button" class="uk-button uk-button-success" data-authorize rv-if="contact:d/actions | has 'authorize'">
<i class="uk-icon-plus"></i> Authorize
</button>
<button type="button" class="uk-button uk-button-danger" data-unauthorize rv-if="contact:d/actions | has 'unauthorize'">
<i class="uk-icon-times"></i> Decline
</button>
</div>
</li>
</script>
<script type="text/template" id="chat-template">
<div class="chat">
<div class="log"></div>
</div>
</script>
<script src='/js/tram.js'></script>
<script src='/js/rivets.js'></script>
<script src='/js/xmpp.js'></script>
<script src='/js/webrtc.js'></script>
<script src='/js/contacts.js'></script>
<script src='/js/messages.js'></script>
<script src='/js/calls.js'></script>
<script src='/js/favicon.js'></script>
<script src='/js/sidebar.js'></script>
<script src='/js/progress.js'></script>
<script src='/js/forms.js'></script>
<script src='/config.js'></script>
<script src='/js/index.js'></script>
<script>
$('[data-step="login"]').removeClass('uk-hidden');
</script>
</body>
</html>