Skip to content

C
converse.js
Commit e9638e70 authored by JC Brand's avatar JC Brand
Browse files
Options

Initial work on allowing in band registrations. XEP 077

parent 35f203ff
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 313 additions and 179 deletions
converse.js
View file @ e9638e70
This diff is collapsed.
css/converse.css
View file @ e9638e70
...@@ -926,9 +926,6 @@ dl.add-converse-contact { ...@@ -926,9 +926,6 @@ dl.add-converse-contact {
display: block; display: block;
clear: both; clear: both;
} }
#conversejs .chatroom-form label.label-ta {
height: auto;
}
#conversejs .chatroom-form label input, #conversejs .chatroom-form label input,
#conversejs .chatroom-form label select { #conversejs .chatroom-form label select {
float: right; float: right;
...@@ -1110,9 +1107,17 @@ dl.add-converse-contact { ...@@ -1110,9 +1107,17 @@ dl.add-converse-contact {
width: 300px; width: 300px;
} }
#conversejs .controlbox-pane { #conversejs .controlbox-pane {
padding: 0; background-color: white;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border: 0;
font-size: 14px;
height: 289px;
height: calc(100% - 35px);
overflow-y: hidden;
padding: 0;
position: absolute;
width: 100%;
} }
#conversejs .controlbox-pane dd { #conversejs .controlbox-pane dd {
margin-left: 0; margin-left: 0;
...@@ -1122,18 +1127,27 @@ dl.add-converse-contact { ...@@ -1122,18 +1127,27 @@ dl.add-converse-contact {
#conversejs .controlbox-pane dd.odd { #conversejs .controlbox-pane dd.odd {
background-color: #DCEAC5; background-color: #DCEAC5;
} }
#conversejs form#converse-register,
#conversejs form#converse-login { #conversejs form#converse-login {
background: white; background: white;
padding: 2em 0.5em; padding: 2em 0.5em;
} }
#conversejs form#converse-register input,
#conversejs form#converse-login input { #conversejs form#converse-login input {
width: 100%; width: 98%;
height: 30px;
} }
#conversejs form#converse-register label,
#conversejs form#converse-login label { #conversejs form#converse-login label {
margin-top: 0.5em; margin-top: 0.5em;
} }
#conversejs form#converse-login .login-submit { #conversejs form#converse-register .login-submit,
#conversejs form#converse-login .login-submit,
#conversejs form#converse-register .submit,
#conversejs form#converse-login .submit {
width: 100%;
margin-top: 1em; margin-top: 1em;
height: 30px;
} }
#conversejs form.set-xmpp-status { #conversejs form.set-xmpp-status {
background: none; background: none;
...@@ -1201,21 +1215,6 @@ select#select-xmpp-status { ...@@ -1201,21 +1215,6 @@ select#select-xmpp-status {
cursor: default; cursor: default;
color: #666666; color: #666666;
} }
#conversejs div#users,
#conversejs div#chatrooms,
#conversejs div#login-dialog,
#conversejs div#settings {
border: 0;
font-size: 14px;
background-color: white;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
width: 100%;
height: 289px;
height: calc(100% - 35px);
overflow-y: hidden;
position: absolute;
}
#conversejs div#chatrooms { #conversejs div#chatrooms {
overflow-y: auto; overflow-y: auto;
} }
......
css/theme.css
View file @ e9638e70
...@@ -16,6 +16,7 @@ h4, ...@@ -16,6 +16,7 @@ h4,
h5, h5,
h6 { h6 {
margin: 0 0 35px; margin: 0 0 35px;
text-transform: uppercase;
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700; font-weight: 700;
letter-spacing: 1px; letter-spacing: 1px;
......
index.html
View file @ e9638e70
...@@ -12,14 +12,8 @@ ...@@ -12,14 +12,8 @@
<link type="text/css" rel="stylesheet" media="screen" href="components/bootstrap/dist/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" media="screen" href="components/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" media="screen" href="components/fontawesome/css/font-awesome.min.css" /> <link type="text/css" rel="stylesheet" media="screen" href="components/fontawesome/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" media="screen" href="css/theme.css" /> <link type="text/css" rel="stylesheet" media="screen" href="css/theme.css" />
<link type="text/css" rel="stylesheet" media="screen" href="css/converse.min.css" /> <link type="text/css" rel="stylesheet" media="screen" href="css/converse.css" />
<!-- Only for development: <script data-main="main" src="components/requirejs/require.js"></script> --> <script data-main="main" src="components/requirejs/require.js"></script>
<![if gte IE 9]>
<script src="builds/converse.website.min.js"></script>
<![endif]>
<!--[if lt IE 9]>
<script src="builds/converse.website-no-otr.min.js"></script>
<![endif]-->
</head> </head>
<body id="page-top" data-spy="scroll" data-target=".navbar-custom"> <body id="page-top" data-spy="scroll" data-target=".navbar-custom">
......
less/converse.less
View file @ e9638e70
...@@ -1247,9 +1247,17 @@ dl.add-converse-contact { ...@@ -1247,9 +1247,17 @@ dl.add-converse-contact {
} }
#conversejs .controlbox-pane { #conversejs .controlbox-pane {
padding: 0; background-color: white;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border: 0;
font-size: 14px;
height: 289px;
height: ~"calc(100% - 35px)";
overflow-y: hidden;
padding: 0;
position: absolute;
width: 100%;
} }
#conversejs .controlbox-pane dd { #conversejs .controlbox-pane dd {
...@@ -1262,21 +1270,30 @@ dl.add-converse-contact { ...@@ -1262,21 +1270,30 @@ dl.add-converse-contact {
background-color: #DCEAC5; background-color: #DCEAC5;
} }
#conversejs form#converse-register,
#conversejs form#converse-login { #conversejs form#converse-login {
background: white; background: white;
padding: 2em 0.5em; padding: 2em 0.5em;
} }
#conversejs form#converse-register input,
#conversejs form#converse-login input { #conversejs form#converse-login input {
width: 100%; width: 98%;
height: 30px;
} }
#conversejs form#converse-register label,
#conversejs form#converse-login label { #conversejs form#converse-login label {
margin-top: 0.5em; margin-top: 0.5em;
} }
#conversejs form#converse-login .login-submit { #conversejs form#converse-register .login-submit,
#conversejs form#converse-login .login-submit,
#conversejs form#converse-register .submit,
#conversejs form#converse-login .submit {
width: 100%;
margin-top: 1em; margin-top: 1em;
height: 30px;
} }
#conversejs form.set-xmpp-status { #conversejs form.set-xmpp-status {
...@@ -1357,22 +1374,6 @@ select#select-xmpp-status { ...@@ -1357,22 +1374,6 @@ select#select-xmpp-status {
color: rgb(102,102,102); color: rgb(102,102,102);
} }
#conversejs div#users,
#conversejs div#chatrooms,
#conversejs div#login-dialog,
#conversejs div#settings {
border: 0;
font-size: 14px;
background-color: white;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
width: 100%;
height: 289px;
height: ~"calc(100% - 35px)";
overflow-y: hidden;
position: absolute;
}
#conversejs div#chatrooms { #conversejs div#chatrooms {
overflow-y: auto; overflow-y: auto;
} }
......
main.js
View file @ e9638e70
...@@ -17,6 +17,7 @@ require.config({ ...@@ -17,6 +17,7 @@ require.config({
"strophe": "components/strophe/strophe", "strophe": "components/strophe/strophe",
"strophe.disco": "components/strophejs-plugins/disco/strophe.disco", "strophe.disco": "components/strophejs-plugins/disco/strophe.disco",
"strophe.muc": "components/strophe.muc/index", "strophe.muc": "components/strophe.muc/index",
"strophe.register": "components/strophejs-plugins/register/strophe.register",
"strophe.roster": "src/strophe.roster", "strophe.roster": "src/strophe.roster",
"strophe.vcard": "components/strophejs-plugins/vcard/strophe.vcard", "strophe.vcard": "components/strophejs-plugins/vcard/strophe.vcard",
"text": 'components/requirejs-text/text', "text": 'components/requirejs-text/text',
...@@ -93,6 +94,8 @@ require.config({ ...@@ -93,6 +94,8 @@ require.config({
"pending_contacts": "src/templates/pending_contacts", "pending_contacts": "src/templates/pending_contacts",
"requesting_contact": "src/templates/requesting_contact", "requesting_contact": "src/templates/requesting_contact",
"requesting_contacts": "src/templates/requesting_contacts", "requesting_contacts": "src/templates/requesting_contacts",
"register_panel": "src/templates/register_panel",
"register_tab": "src/templates/register_tab",
"room_description": "src/templates/room_description", "room_description": "src/templates/room_description",
"room_item": "src/templates/room_item", "room_item": "src/templates/room_item",
"room_panel": "src/templates/room_panel", "room_panel": "src/templates/room_panel",
...@@ -143,6 +146,7 @@ require.config({ ...@@ -143,6 +146,7 @@ require.config({
'strophe': { exports: 'Strophe' }, 'strophe': { exports: 'Strophe' },
'strophe.disco': { deps: ['strophe'] }, 'strophe.disco': { deps: ['strophe'] },
'strophe.muc': { deps: ['strophe'] }, 'strophe.muc': { deps: ['strophe'] },
'strophe.register': { deps: ['strophe'] },
'strophe.roster': { deps: ['strophe'] }, 'strophe.roster': { deps: ['strophe'] },
'strophe.vcard': { deps: ['strophe'] } 'strophe.vcard': { deps: ['strophe'] }
} }
......
mockup/controlbox.html
View file @ e9638e70
...@@ -31,16 +31,26 @@ ...@@ -31,16 +31,26 @@
<div class="chat-head controlbox-head"> <div class="chat-head controlbox-head">
<ul id="controlbox-tabs"> <ul id="controlbox-tabs">
<li><a class="current" href="#login">Sign in</a></li> <li><a class="current" href="#login">Sign in</a></li>
<li><a href="#register">Register</a></li>
</ul> </ul>
<a class="close-chatbox-button icon-close"></a> <a class="close-chatbox-button icon-close"></a>
</div> </div>
<div id="login-dialog"> <div id="login-dialog" class="controlbox-pane">
<form id="converse-login"> <form id="converse-login">
<label>XMPP/Jabber Username:</label><input type="text" id="jid"> <label>XMPP Username:</label><input type="text" id="jid" placeholder="name@server">
<label>Password:</label><input type="password" id="password"> <label>Password:</label><input type="password" id="password">
<input class="login-submit" type="submit" value="Log In"> <input class="submit" type="submit" value="Log In">
<span class="conn-feedback"></span>
</form>
</div>
<div id="register" class="controlbox-pane" style="display: none">
<form id="converse-register">
<label>XMPP Username:</label><input type="text" id="jid" placeholder="name@server">
<label>Password:</label><input type="password" name="password">
<label>Confirm Password:</label><input type="password" name="password_confirm">
<input class="submit" type="submit" value="Register">
<span class="conn-feedback"></span>
</form> </form>
<span class="conn-feedback"></span>
</div> </div>
</div> </div>
</div> </div>
...@@ -55,6 +65,7 @@ ...@@ -55,6 +65,7 @@
</ul> </ul>
<a class="close-chatbox-button icon-close"></a> <a class="close-chatbox-button icon-close"></a>
</div> </div>
<div id="users" class="controlbox-pane" style="display: block;"> <div id="users" class="controlbox-pane" style="display: block;">
<form class="set-xmpp-status" action="" method="post"> <form class="set-xmpp-status" action="" method="post">
<span id="xmpp-status-holder"> <span id="xmpp-status-holder">
...@@ -227,39 +238,41 @@ ...@@ -227,39 +238,41 @@
</dd> </dd>
</dl> </dl>
</div> </div>
<div id="chatrooms" style="display: none;">
<form class="add-chatroom" action="" method="post">
<input type="text" name="chatroom" class="new-chatroom-name" placeholder="Room name">
<input type="text" name="nick" class="new-chatroom-nick" placeholder="Nickname">
<input type="text" name="server" class="new-chatroom-server" placeholder="Server">
<input type="submit" name="join" value="Join">
<input type="button" name="show" id="show-rooms" value="Show rooms" style="display: inline-block;">
</form>
<dl id="available-chatrooms">
<dt>Rooms on conference.opkode.im</dt>
<dd class="available-chatroom">
<a class="open-room"
data-room-jid="converse.js@conference.opkode.im"
title="Click to open this room" href="#">Special chatroom with a long name (2)</a>
<a class="room-info icon-room-info"
data-room-jid="converse.js@conference.opkode.im"
title="Show more information on this room" href="#">&nbsp;</a>
<div class="room-info">
<p class="room-info"><strong>Description:</strong></p>
<p class="room-info"><strong>Occupants:</strong> 2</p>
<p class="room-info"><strong>Features:</strong> </p>
<ul>
<li class="room-info">Moderated</li><li class="room-info">Open room</li>
<li class="room-info">Permanent room</li><li class="room-info">Public</li>
<li class="room-info">Semi-anonymous</li>
<li class="room-info">Requires authentication <span class="icon-lock"></span></li>
<p></p>
</ul>
</div>
</dd>
</dl>
</div>
</div> </div>
<div id="chatrooms" class="controlbox-pane" style="display: none;">
<form class="add-chatroom" action="" method="post">
<input type="text" name="chatroom" class="new-chatroom-name" placeholder="Room name">
<input type="text" name="nick" class="new-chatroom-nick" placeholder="Nickname">
<input type="text" name="server" class="new-chatroom-server" placeholder="Server">
<input type="submit" name="join" value="Join">
<input type="button" name="show" id="show-rooms" value="Show rooms" style="display: inline-block;">
</form>
<dl id="available-chatrooms">
<dt>Rooms on conference.opkode.im</dt>
<dd class="available-chatroom">
<a class="open-room"
data-room-jid="converse.js@conference.opkode.im"
title="Click to open this room" href="#">Special chatroom with a long name (2)</a>
<a class="room-info icon-room-info"
data-room-jid="converse.js@conference.opkode.im"
title="Show more information on this room" href="#">&nbsp;</a>
<div class="room-info">
<p class="room-info"><strong>Description:</strong></p>
<p class="room-info"><strong>Occupants:</strong> 2</p>
<p class="room-info"><strong>Features:</strong> </p>
<ul>
<li class="room-info">Moderated</li><li class="room-info">Open room</li>
<li class="room-info">Permanent room</li><li class="room-info">Public</li>
<li class="room-info">Semi-anonymous</li>
<li class="room-info">Requires authentication <span class="icon-lock"></span></li>
<p></p>
</ul>
</div>
</dd>
</dl>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -272,6 +285,12 @@ $(document).ready(function () { ...@@ -272,6 +285,12 @@ $(document).ready(function () {
$('a[href=#users]').click(function (ev) { $('a[href=#users]').click(function (ev) {
switchTab(ev); switchTab(ev);
}); });
$('a[href=#register]').click(function (ev) {
switchTab(ev);
});
$('a[href=#login]').click(function (ev) {
switchTab(ev);
});
$("a.choose-xmpp-status").click(function (ev) { $("a.choose-xmpp-status").click(function (ev) {
ev.preventDefault(); ev.preventDefault();
......
src/deps-full.js
View file @ e9638e70
...@@ -10,6 +10,7 @@ define("converse-dependencies", [ ...@@ -10,6 +10,7 @@ define("converse-dependencies", [
"typeahead", "typeahead",
"strophe", "strophe",
"strophe.muc", "strophe.muc",
"strophe.register",
"strophe.roster", "strophe.roster",
"strophe.vcard", "strophe.vcard",
"strophe.disco" "strophe.disco"
......
src/deps-website.js
View file @ e9638e70
...@@ -12,6 +12,7 @@ define("converse-dependencies", [ ...@@ -12,6 +12,7 @@ define("converse-dependencies", [
"typeahead", "typeahead",
"strophe", "strophe",
"strophe.muc", "strophe.muc",
"strophe.register",
"strophe.roster", "strophe.roster",
"strophe.vcard", "strophe.vcard",
"strophe.disco" "strophe.disco"
......
src/templates.js
View file @ e9638e70
...@@ -29,6 +29,8 @@ define("converse-templates", [ ...@@ -29,6 +29,8 @@ define("converse-templates", [
"tpl!occupant", "tpl!occupant",
"tpl!pending_contact", "tpl!pending_contact",
"tpl!pending_contacts", "tpl!pending_contacts",
"tpl!register_panel",
"tpl!register_tab",
"tpl!requesting_contact", "tpl!requesting_contact",
"tpl!requesting_contacts", "tpl!requesting_contacts",
"tpl!room_description", "tpl!room_description",
...@@ -75,19 +77,21 @@ define("converse-templates", [ ...@@ -75,19 +77,21 @@ define("converse-templates", [
occupant: arguments[27], occupant: arguments[27],
pending_contact: arguments[28], pending_contact: arguments[28],
pending_contacts: arguments[29], pending_contacts: arguments[29],
requesting_contact: arguments[30], register_panel: arguments[30],
requesting_contacts: arguments[31], register_tab: arguments[31],
room_description: arguments[32], requesting_contact: arguments[32],
room_item: arguments[33], requesting_contacts: arguments[33],
room_panel: arguments[34], room_description: arguments[34],
roster: arguments[35], room_item: arguments[35],
roster_item: arguments[36], room_panel: arguments[36],
select_option: arguments[37], roster: arguments[37],
search_contact: arguments[38], roster_item: arguments[38],
status_option: arguments[39], select_option: arguments[39],
toggle_chats: arguments[40], search_contact: arguments[40],
toolbar: arguments[41], status_option: arguments[41],
trimmed_chat: arguments[42], toggle_chats: arguments[42],
form_textarea: arguments[43] toolbar: arguments[43],
trimmed_chat: arguments[44],
form_textarea: arguments[45]
}; };
}); });
src/templates/login_panel.html
View file @ e9638e70
<form id="converse-login" method="post"> <form id="converse-login" method="post">
<label>{{label_username}}</label> <label>{{label_username}}</label>
<input type="username" name="jid" placeholder="Username"> <input type="username" name="jid" placeholder="user@server">
<label>{{label_password}}</label> <label>{{label_password}}</label>
<input type="password" name="password" placeholder="Password"> <input type="password" name="password" placeholder="password">
<input class="login-submit" type="submit" value="{{label_login}}"> <input class="submit" type="submit" value="{{label_login}}">
<span class="conn-feedback"></span> <span class="conn-feedback"></span>
</form> </form>
src/templates/register_panel.html 0 → 100644
View file @ e9638e70
<form id="converse-register">
<label>{{label_domain}}</label>
<input type="text" name="domain" placeholder="e.g. conversejs.org">
<input class="submit" type="submit" value="{{label_register}}">
<span class="conn-feedback"></span>
</form>
src/templates/register_tab.html 0 → 100644
View file @ e9638e70
<li><a class="s" href="#register">{{label_register}}</a></li>
src/utils.js
View file @ e9638e70
define(["jquery"], function ($) { define(["jquery", "converse-templates"], function ($, templates) {
"use strict";
var XFORM_TYPE_MAP = {
'text-private': 'password',
'text-single': 'textline',
'fixed': 'label',
'boolean': 'checkbox',
'hidden': 'hidden',
'jid-multi': 'textarea',
'list-single': 'dropdown',
'list-multi': 'dropdown'
};
$.fn.hasScrollBar = function() { $.fn.hasScrollBar = function() {
if (!$.contains(document, this.get(0))) { if (!$.contains(document, this.get(0))) {
return false; return false;
...@@ -52,6 +65,61 @@ define(["jquery"], function ($) { ...@@ -52,6 +65,61 @@ define(["jquery"], function ($) {
* See actionInfoMessages * See actionInfoMessages
*/ */
return str; return str;
},
xForm2webForm: function (field) {
/* Takes a field in XMPP XForm (XEP-004: Data Forms) format
* and turns it into a HTML DOM field.
*
* Parameters:
* (XMLElement) field - the field to convert
*/
var $field = $(field), options = [],
j, $options, $values, value, values;
if ($field.attr('type') == 'list-single' || $field.attr('type') == 'list-multi') {
values = [];
$values = $field.children('value');
for (j=0; j<$values.length; j++) {
values.push($($values[j]).text());
}
$options = $field.children('option');
for (j=0; j<$options.length; j++) {
value = $($options[j]).find('value').text();
options.push(templates.select_option({
value: value,
label: $($options[j]).attr('label'),
selected: (values.indexOf(value) >= 0)
}));
}
return templates.form_select({
name: $field.attr('var'),
label: $field.attr('label'),
options: options.join(''),
multiple: ($field.attr('type') == 'list-multi')
});
} else if ($field.attr('type') == 'fixed') {
return $('<p>').text($field.find('value').text());
} else if ($field.attr('type') == 'jid-multi') {
return templates.form_textarea({
name: $field.attr('var'),
label: $field.attr('label') || '',
value: $field.find('value').text()
});
} else if ($field.attr('type') == 'boolean') {
return templates.form_checkbox({
name: $field.attr('var'),
type: XFORM_TYPE_MAP[$field.attr('type')],
label: $field.attr('label') || '',
checked: $field.find('value').text() === "1" && 'checked="1"' || ''
});
} else {
return templates.form_input({
name: $field.attr('var'),
type: XFORM_TYPE_MAP[$field.attr('type')],
label: $field.attr('label') || '',
value: $field.find('value').text()
});
}
} }
}; };
return utils; return utils;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7