pandora/static/js/account.js

408 lines
16 KiB
JavaScript
Raw Normal View History

2011-11-05 17:04:10 +00:00
'use strict';
2011-05-25 19:42:45 +00:00
pandora.ui.accountDialog = function(action) {
var that = Ox.Dialog(Ox.extend({
2011-08-17 11:39:55 +00:00
fixedSize: true,
height: 192,
2011-05-25 19:42:45 +00:00
id: 'accountDialog',
removeOnClose: true,
2011-08-17 11:39:55 +00:00
width: 432
2011-05-25 19:42:45 +00:00
}, pandora.ui.accountDialogOptions(action)))
.bindEvent({
2011-10-29 10:35:39 +00:00
open: function() {
pandora.$ui.accountForm.find('input')[0].focus();
},
2011-09-17 17:40:15 +00:00
resize: function(data) {
2011-05-25 19:42:45 +00:00
var width = data.width - 32;
2011-06-06 15:48:11 +00:00
pandora.$ui.accountForm.items.forEach(function(item) {
2011-05-25 19:42:45 +00:00
item.options({width: width});
});
}
});
return that;
};
pandora.ui.accountDialogOptions = function(action, value) {
2011-11-04 15:54:42 +00:00
//Ox.Log('', 'ACTION', action)
pandora.$ui.accountForm && pandora.$ui.accountForm.remove();
2011-05-25 19:42:45 +00:00
var buttons = {
signin: ['signup', 'reset'],
signup: ['signin'],
username: [],
reset: ['signin'],
resetAndSignin: []
2011-05-25 19:42:45 +00:00
},
buttonTitle = {
signin: 'Sign In',
signup: 'Sign Up',
username: 'Sign Up',
2011-05-25 19:42:45 +00:00
reset: 'Reset Password',
2011-10-22 15:31:12 +00:00
resetAndSignin: 'Sign In'
2011-05-25 19:42:45 +00:00
},
dialogText = {
2013-05-09 10:13:58 +00:00
signin: Ox._('To sign in to your account, please enter your username and password.'),
signup: Ox._('To sign up for an account, please choose a username and password, and enter your e-mail address.'),
username: Ox._('To sign up for an account, please choose a username.'),
2013-05-09 10:13:58 +00:00
reset: Ox._('To reset your password, please enter either your username or your e-mail address.'),
resetAndSignin: Ox._('To sign in to your account, please choose a new password, and enter the code that we have just e-mailed to you.')
2011-05-25 19:42:45 +00:00
},
dialogTitle = {
2013-05-09 10:13:58 +00:00
signin: Ox._('Sign In'),
signup: Ox._('Sign Up'),
username: Ox._('Sign Up'),
2013-05-09 10:13:58 +00:00
reset: Ox._('Reset Password'),
resetAndSignin: Ox._('Reset Password')
2011-05-25 19:42:45 +00:00
};
function button(type) {
if (type == 'cancel') {
2011-06-19 17:49:25 +00:00
return Ox.Button({
2011-05-25 19:42:45 +00:00
id: 'cancel' + Ox.toTitleCase(action),
2013-05-09 10:13:58 +00:00
title: Ox._('Cancel')
2012-06-30 20:02:52 +00:00
}).bindEvent({
click: function() {
pandora.$ui.accountDialog.close();
pandora.UI.set({page: ''});
}
2011-05-25 19:42:45 +00:00
});
} else if (type == 'submit') {
2011-06-19 17:49:25 +00:00
return Ox.Button({
2011-05-25 19:42:45 +00:00
disabled: true,
id: 'submit' + Ox.toTitleCase(action),
2013-05-09 10:13:58 +00:00
title: Ox._(buttonTitle[action])
2012-06-30 20:02:52 +00:00
}).bindEvent({
click: function() {
pandora.$ui.accountForm.submit();
}
2011-05-25 19:42:45 +00:00
});
} else {
2011-06-19 17:49:25 +00:00
return Ox.Button({
2011-05-25 19:42:45 +00:00
id: type,
2013-05-09 10:13:58 +00:00
title: Ox._(buttonTitle[type] + '...')
2012-06-30 20:02:52 +00:00
}).bindEvent({
click: function() {
if (['signin', 'signup'].indexOf(type) > -1 && type != pandora.user.ui.page) {
pandora.UI.set({page: type});
} else {
pandora.$ui.accountDialog.options(pandora.ui.accountDialogOptions(type));
}
pandora.$ui.accountForm.find('input.OxInput')[0].focus();
}
2011-05-25 19:42:45 +00:00
});
}
}
2011-10-07 17:56:39 +00:00
2011-05-25 19:42:45 +00:00
return {
2012-05-24 08:22:56 +00:00
buttons: [].concat(
2011-10-22 15:31:12 +00:00
buttons[action].map(function(type) {
2011-05-25 19:42:45 +00:00
return button(type);
2011-10-22 15:31:12 +00:00
}),
buttons[action].length ? [{}] : [],
[button('cancel'), button('submit')]
),
2011-06-19 17:49:25 +00:00
content: Ox.Element()
2011-05-25 19:42:45 +00:00
.append(
2011-08-17 11:39:55 +00:00
$('<img>')
.attr({src: '/static/png/icon.png'})
2011-08-17 11:39:55 +00:00
.css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'})
2011-05-25 19:42:45 +00:00
)
.append(
2011-08-17 11:39:55 +00:00
Ox.Element()
.css({position: 'absolute', left: '96px', top: '16px', width: '320px'})
.append(
Ox.Element()
.addClass('OxText')
.html(dialogText[action] + '<br/><br/>')
)
.append(
pandora.$ui.accountForm = pandora.ui.accountForm(action, value)
)
2011-05-25 19:42:45 +00:00
),
keys: {
enter: 'submit' + Ox.toTitleCase(action),
escape: 'cancel' + Ox.toTitleCase(action)
},
title: dialogTitle[action]
};
};
pandora.ui.accountForm = function(action, value) {
2011-06-06 15:48:11 +00:00
if (pandora.$ui.accountForm) {
pandora.$ui.accountForm.items.forEach(function(item) {
item.remove();
2011-05-25 19:42:45 +00:00
});
}
var items = {
'signin': ['username', 'password'],
'signup': ['newUsername', 'password', 'email'],
'username': ['newUsername'],
2011-05-25 19:42:45 +00:00
'reset': ['usernameOrEmail'],
'resetAndSignin': ['oldUsername', 'newPassword', 'code']
2011-05-25 19:42:45 +00:00
},
$items = items[action].map(function(v) {
2011-05-25 19:42:45 +00:00
return item(v, value);
}),
2011-06-19 17:49:25 +00:00
that = Ox.Form({
2011-05-25 19:42:45 +00:00
id: 'accountForm' + Ox.toTitleCase(action),
items: $items
}).bindEvent({
submit: function(data) {
2011-10-29 10:35:39 +00:00
pandora.$ui.accountDialog.disableButtons();
if (action == 'signin') {
pandora.api.signin(data.values, function(result) {
2011-05-25 19:42:45 +00:00
if (!result.data.errors) {
pandora.$ui.accountDialog.close();
pandora.signin(result.data);
2011-05-25 19:42:45 +00:00
} else {
2011-10-29 10:35:39 +00:00
pandora.$ui.accountDialog.enableButtons();
2013-05-09 10:13:58 +00:00
that.setMessages([{id: 'password', message: Ox._('Incorrect password')}]);
2011-05-25 19:42:45 +00:00
}
});
} else if (action == 'signup') {
pandora.api.signup(data.values, function(result) {
2011-05-25 19:42:45 +00:00
if (!result.data.errors) {
pandora.$ui.accountDialog.close();
pandora.signin(result.data);
2011-05-25 19:42:45 +00:00
pandora.ui.accountWelcomeDialog().open();
} else {
Ox.forEach(result.data.errors, function(value, key) {
if (['username', 'password', 'email'].indexOf(key) > -1) {
that.setMessages([{id: key, message: Ox._(result.data.errors[key])}]);
}
});
2011-10-29 10:35:39 +00:00
pandora.$ui.accountDialog.enableButtons();
2011-05-25 19:42:45 +00:00
}
});
} else if (action == 'reset') {
2012-06-05 13:13:00 +00:00
var usernameOrEmail = data.values.usernameOrEmail,
key = usernameOrEmail[0];
2011-05-25 19:42:45 +00:00
data = {};
data[key] = usernameOrEmail[1];
pandora.api.requestToken(data, function(result) {
if (!result.data.errors) {
pandora.$ui.accountDialog.options(pandora.ui.accountDialogOptions('resetAndSignin', result.data.username));
pandora.$ui.accountDialog.enableButtons();
2011-05-25 19:42:45 +00:00
} else {
2011-10-29 10:35:39 +00:00
pandora.$ui.accountDialog.enableButtons();
2013-05-09 10:13:58 +00:00
that.setMessages([{id: 'usernameOrEmail', message: Ox._('Unknown ' + (key == 'username' ? 'username' : 'e-mail address'))}])
2011-05-25 19:42:45 +00:00
}
});
} else if (action == 'resetAndSignin') {
pandora.api.resetPassword(data.values, function(result) {
2011-05-25 19:42:45 +00:00
if (!result.data.errors) {
pandora.$ui.accountDialog.close();
2011-10-07 17:56:39 +00:00
pandora.signin(result.data);
2011-05-25 19:42:45 +00:00
} else {
2011-10-29 10:35:39 +00:00
pandora.$ui.accountDialog.enableButtons();
2013-05-09 10:13:58 +00:00
that.setMessages([{id: 'code', message: Ox._('Incorrect code')}]);
2011-05-25 19:42:45 +00:00
}
2011-10-07 17:56:39 +00:00
});
2011-05-25 19:42:45 +00:00
}
2011-05-25 19:42:45 +00:00
},
2011-09-17 17:40:15 +00:00
validate: function(data) {
2011-06-06 15:48:11 +00:00
pandora.$ui.accountDialog[
2011-05-25 19:42:45 +00:00
(data.valid ? 'enable' : 'disable') + 'Button'
]('submit' + Ox.toTitleCase(action));
}
});
that.items = $items;
function item(type, value) {
if (type == 'code') {
2011-06-19 17:49:25 +00:00
return Ox.Input({
2011-08-17 11:39:55 +00:00
autovalidate: pandora.autovalidateCode,
2011-05-25 19:42:45 +00:00
id: 'code',
2013-05-09 10:13:58 +00:00
label: Ox._('Code'),
2011-05-25 19:42:45 +00:00
labelWidth: 120,
validate: pandora.validateCode,
2011-08-17 11:39:55 +00:00
width: 320
2011-05-25 19:42:45 +00:00
});
} else if (type == 'email') {
2011-06-19 17:49:25 +00:00
return Ox.Input({
2011-08-17 11:39:55 +00:00
autovalidate: pandora.autovalidateEmail,
2011-05-25 19:42:45 +00:00
id: 'email',
2013-05-09 10:13:58 +00:00
label: Ox._('E-Mail Address'),
2011-05-25 19:42:45 +00:00
labelWidth: 120,
2011-11-02 17:26:08 +00:00
type: 'email', // fixme: ??
2011-05-25 19:42:45 +00:00
validate: pandora.validateUser('email'),
2011-08-17 11:39:55 +00:00
width: 320
2011-05-25 19:42:45 +00:00
});
} else if (type == 'newPassword') {
2011-06-19 17:49:25 +00:00
return Ox.Input({
2011-05-25 19:42:45 +00:00
autovalidate: /.+/,
id: 'password',
2013-05-09 10:13:58 +00:00
label: Ox._('New Password'),
2011-05-25 19:42:45 +00:00
labelWidth: 120,
type: 'password',
2011-10-22 14:50:53 +00:00
validate: pandora.validateNewPassword,
2011-08-17 11:39:55 +00:00
width: 320
2011-05-25 19:42:45 +00:00
});
} else if (type == 'newUsername') {
2011-06-19 17:49:25 +00:00
return Ox.Input({
2011-05-25 19:42:45 +00:00
autovalidate: pandora.autovalidateUsername,
id: 'username',
2013-05-09 10:13:58 +00:00
label: Ox._('Username'),
2011-05-25 19:42:45 +00:00
labelWidth: 120,
validate: pandora.validateUser('username'),
2011-08-17 11:39:55 +00:00
width: 320
2011-05-25 19:42:45 +00:00
});
} else if (type == 'oldUsername') {
2011-06-19 17:49:25 +00:00
return Ox.Input({
2011-05-25 19:42:45 +00:00
disabled: true,
id: 'username',
2013-05-09 10:13:58 +00:00
label: Ox._('Username'),
2011-05-25 19:42:45 +00:00
labelWidth: 120,
value: value,
2011-08-17 11:39:55 +00:00
width: 320
2011-05-25 19:42:45 +00:00
});
} else if (type == 'password') {
2011-06-19 17:49:25 +00:00
return Ox.Input({
2011-05-25 19:42:45 +00:00
autovalidate: /.+/,
id: 'password',
2013-05-09 10:13:58 +00:00
label: Ox._('Password'),
2011-05-25 19:42:45 +00:00
labelWidth: 120,
type: 'password',
validate: pandora.validatePassword,
2011-08-17 11:39:55 +00:00
width: 320
2011-05-25 19:42:45 +00:00
});
} else if (type == 'username') {
2011-06-19 17:49:25 +00:00
return Ox.Input({
2011-05-25 19:42:45 +00:00
autovalidate: pandora.autovalidateUsername,
id: 'username',
2013-05-09 10:13:58 +00:00
label: Ox._('Username'),
2011-05-25 19:42:45 +00:00
labelWidth: 120,
validate: pandora.validateUser('username', true),
2011-08-17 11:39:55 +00:00
width: 320
2011-10-29 17:46:46 +00:00
});
2011-05-25 19:42:45 +00:00
} else if (type == 'usernameOrEmail') {
2011-06-19 17:49:25 +00:00
return Ox.FormElementGroup({
2011-05-25 19:42:45 +00:00
id: 'usernameOrEmail',
elements: [
2011-06-19 17:49:25 +00:00
pandora.$ui.usernameOrEmailSelect = Ox.Select({
2011-05-25 19:42:45 +00:00
id: 'usernameOrEmailSelect',
items: [
2013-05-09 10:13:58 +00:00
{id: 'username', title: Ox._('Username')},
{id: 'email', title: Ox._('E-Mail Address')},
2011-05-25 19:42:45 +00:00
],
overlap: 'right',
2011-08-17 11:39:55 +00:00
width: 128
2011-05-25 19:42:45 +00:00
})
.bindEvent({
2011-09-17 17:40:15 +00:00
change: function(data) {
2011-06-06 15:48:11 +00:00
pandora.$ui.usernameOrEmailInput.options({
2011-12-21 15:34:28 +00:00
autovalidate: data.value == 'username'
2011-10-22 14:50:53 +00:00
? pandora.autovalidateUsername : pandora.autovalidateEmail,
2011-12-21 15:34:28 +00:00
validate: pandora.validateUser(data.value, true),
2011-05-25 19:42:45 +00:00
value: ''
2011-12-18 09:44:31 +00:00
}).focusInput(true);
2012-05-22 13:15:16 +00:00
that.find('.OxFormMessage:visible').html('').hide();
2011-10-22 14:50:53 +00:00
pandora.$ui.accountDialog.disableButton('submitReset');
2011-05-25 19:42:45 +00:00
}
}),
2011-06-19 17:49:25 +00:00
pandora.$ui.usernameOrEmailInput = Ox.Input({
2011-05-25 19:42:45 +00:00
autovalidate: pandora.autovalidateUsername,
id: 'usernameOrEmailInput',
validate: pandora.validateUser('username', true),
2011-08-17 11:39:55 +00:00
width: 192
2011-05-25 19:42:45 +00:00
})
],
separators: [
{title: '', width: 0}
2012-06-05 13:13:00 +00:00
],
validate: function(value, callback) {
2012-06-05 13:29:17 +00:00
pandora.validateUser(value[0], true)(value[1], callback);
2012-06-05 13:13:00 +00:00
}
2011-05-25 19:42:45 +00:00
});
}
}
2011-10-29 17:46:46 +00:00
return that;
2011-05-25 19:42:45 +00:00
};
pandora.ui.accountSignoutDialog = function() {
2011-06-19 17:49:25 +00:00
var that = Ox.Dialog({
2011-10-08 15:16:22 +00:00
buttons: [
Ox.Button({
id: 'stay',
2013-05-09 10:13:58 +00:00
title: Ox._('Stay Signed In')
2012-06-30 20:02:52 +00:00
}).bindEvent({
click: function() {
that.close();
pandora.UI.set({page: ''});
}
2011-10-08 15:16:22 +00:00
}),
Ox.Button({
id: 'signout',
2013-05-09 10:13:58 +00:00
title: Ox._('Sign Out')
2012-06-30 20:02:52 +00:00
}).bindEvent({
click: function() {
that.close();
pandora.UI.set({page: ''});
pandora.api.signout({}, function(result) {
pandora.signout(result.data);
2012-06-30 20:02:52 +00:00
});
}
2011-10-08 15:16:22 +00:00
})
],
content: Ox.Element()
.append(
$('<img>')
.attr({src: '/static/png/icon.png'})
2011-10-08 15:16:22 +00:00
.css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'})
)
.append(
$('<div>')
.css({position: 'absolute', left: '96px', top: '16px', width: '192px'})
.html(Ox._('Are you sure you want to sign out?'))
2011-10-08 15:16:22 +00:00
),
fixedSize: true,
height: 128,
keys: {enter: 'signout', escape: 'stay'},
removeOnClose: true,
2013-05-09 10:13:58 +00:00
title: Ox._('Sign Out'),
2011-10-08 15:16:22 +00:00
width: 304
});
2011-05-25 19:42:45 +00:00
return that;
2011-08-17 11:39:55 +00:00
};
2011-05-25 19:42:45 +00:00
pandora.ui.accountWelcomeDialog = function() {
2011-06-19 17:49:25 +00:00
var that = Ox.Dialog({
2011-05-25 19:42:45 +00:00
buttons: [
2011-08-17 11:39:55 +00:00
Ox.Button({
id: 'preferences',
2013-05-09 10:13:58 +00:00
title: Ox._('Preferences...')
2011-08-17 11:39:55 +00:00
}).bindEvent('click', function() {
that.close();
pandora.UI.set({page: 'preferences'})
2011-08-17 11:39:55 +00:00
}),
{},
Ox.Button({
id: 'close',
2013-05-09 10:13:58 +00:00
title: Ox._('Close')
2011-08-17 11:39:55 +00:00
}).bindEvent('click', function() {
that.close();
2011-08-17 11:39:55 +00:00
})
2011-05-25 19:42:45 +00:00
],
2011-08-17 11:39:55 +00:00
content: Ox.Element()
.append(
$('<img>')
.attr({src: '/static/png/icon.png'})
2011-08-17 11:39:55 +00:00
.css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'})
)
.append(
Ox.Element()
.css({position: 'absolute', left: '96px', top: '16px', width: '192px'})
2013-05-10 14:54:30 +00:00
.html(Ox._(
'Welcome, {0}!<br/><br/>Your account has been created.',
[Ox.encodeHTMLEntities(pandora.user.username)]
))
2011-08-17 11:39:55 +00:00
),
fixedSize: true,
height: 128,
2011-05-25 19:42:45 +00:00
keys: {enter: 'close', escape: 'close'},
removeOnClose: true,
2013-05-09 10:13:58 +00:00
title: Ox._('Welcome to {0}', [pandora.site.site.name]),
2011-08-17 11:39:55 +00:00
width: 304
2011-05-25 19:42:45 +00:00
});
return that;
};