diff --git a/static/js/pandora/account.js b/static/js/pandora/account.js
index 2c14584e1..5181397ce 100644
--- a/static/js/pandora/account.js
+++ b/static/js/pandora/account.js
@@ -205,7 +205,7 @@ pandora.ui.accountForm = function(action, value) {
validate: function(value, callback) {
callback({
message: 'Missing code',
- valid: !!value.length
+ valid: value.length > 0
});
},
width: 320
@@ -216,7 +216,7 @@ pandora.ui.accountForm = function(action, value) {
id: 'email',
label: 'E-Mail Address',
labelWidth: 120,
- type: 'email',
+ type: 'email', // fixme: ??
validate: pandora.validateUser('email'),
width: 320
});
diff --git a/static/js/pandora/contactForm.js b/static/js/pandora/contactForm.js
index 49e95e51c..3f08790d7 100644
--- a/static/js/pandora/contactForm.js
+++ b/static/js/pandora/contactForm.js
@@ -6,34 +6,31 @@ pandora.ui.contactForm = function() {
width = getWidth(),
- $receiptCheckbox = Ox.Checkbox({
- checked: true,
- id: 'receipt',
- title: 'Send me a receipt',
- width: width - 136
- })
- .bindEvent({
- change: function(data) {
- $receiptCheckbox.options({
- title: (data.checked ? 'Send' : 'Don\'t send')
- + ' me a receipt'
- });
- }
- }),
-
$form = Ox.Form({
items: [
Ox.Input({
id: 'name',
label: 'Your Name',
labelWidth: 128,
+ validate: function(value, callback) {
+ callback({valid: true});
+ },
value: pandora.user.username,
width: width
}),
Ox.Input({
+ autovalidate: pandora.autovalidateEmail,
id: 'email',
label: 'Your E-Mail Address',
labelWidth: 128,
+ validate: function(value, callback) {
+ callback({
+ message: 'Please enter '
+ + (value.length == 0 ? 'your' : 'a valid')
+ + ' e-mail address',
+ valid: Ox.isValidEmail(value)
+ });
+ },
value: pandora.user.email,
width: width
}),
@@ -41,64 +38,118 @@ pandora.ui.contactForm = function() {
id: 'subject',
label: 'Subject',
labelWidth: 128,
+ validate: function(value, callback) {
+ callback({valid: true});
+ },
value: '',
width: width
}),
Ox.Input({
+ autovalidate: /.+/,
height: 256,
id: 'message',
placeholder: 'Message',
type: 'textarea',
+ validate: function(value, callback) {
+ callback({
+ message: 'Please enter a message',
+ valid: value.length > 0
+ });
+ },
value: '',
width: width
- }),
- $receiptCheckbox
+ })
],
- submit: function(data, callback) {
- pandora.api.contact({
- name: data.name,
- email: data.email,
- subject: data.subject,
- message: data.message,
- receipt: data.receipt
- }, function(result) {
- callback && callback(result);
- });
- },
- width: 240
})
+ .css({width: width + 'px'})
.bindEvent({
- change: function(event) {
+ validate: function(data) {
+ $sendButton.options({
+ disabled: !data.valid
+ });
+ }
+ })
+ .appendTo(that),
+
+ $receiptCheckbox = Ox.Checkbox({
+ checked: pandora.user.level != 'guest',
+ id: 'receipt',
+ title: 'Send a receipt to ' + pandora.user.email,
+ width: width - 136
+ })
+ .css({float: 'left', margin: '8px 4px 8px 0'})
+ .bindEvent({
+ change: function(data) {
+ $receiptCheckbox.options({
+ title: data.checked
+ ? 'Send a receipt to ' + pandora.user.email
+ : 'Don\'t send me a receipt'
+ });
}
})
.appendTo(that),
$sendButton = Ox.Button({
+ disabled: true,
title: 'Send Message',
width: 128
})
- .css({position: 'absolute', left: width - 112 + 'px', top: '352px'})
+ .css({float: 'left', margin: '8px 0 8px ' + (pandora.user.level == 'guest' ? width - 128 : 4) + 'px'})
.bindEvent({
click: function() {
- $form.submit();
+ var data = $form.values();
+ pandora.api.contact({
+ name: data.name,
+ email: data.email,
+ subject: data.subject,
+ message: data.message,
+ receipt: $receiptCheckbox.value()
+ }, function(result) {
+ var $dialog = Ox.Dialog({
+ buttons: [
+ Ox.Button({
+ id: 'close',
+ title: 'Close'
+ }).bindEvent({
+ click: function() {
+ $dialog.close();
+ }
+ })
+ ],
+ content: Ox.Element()
+ .append(
+ $('')
+ .attr({src: '/static/png/icon64.png'})
+ .css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'})
+ )
+ .append(
+ Ox.Element()
+ .css({position: 'absolute', left: '96px', top: '16px', width: '192px'})
+ .html('Thanks for your message!
We will get back to you as soon as possible.')
+ ),
+ fixedSize: true,
+ height: 128,
+ keys: {enter: 'close', escape: 'close'},
+ title: 'Message Sent',
+ width: 304
+ })
+ .open();
+ });
+
}
})
.appendTo(that);
$text = $('