hiro/accounts-ui
1
0
Fork 0
mirror of https://github.com/vale981/accounts-ui synced 2025-03-05 09:51:40 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'master' of github.com:studiointeract/accounts-ui

Browse source
This commit is contained in:
Tim Brandin 2017-05-26 14:15:41 +02:00
commit fca7236d01
9 changed files with 96 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
CHANGELOG.md
View file

@ -1,5 +1,11 @@
# ChangeLog
### v1.2.21
26-May-2017
* Added functionality to include your own translation function.
* Replaced dependency on tracker-component with react-meteor-data.
### v1.2.20
13-March-2017

14
README.md
View file

@ -399,14 +399,15 @@ To install the dependencies added in your package.json run:
// main.jsx
import React from 'react';
import PropTypes from 'prop-types';
import { Accounts, STATES } from 'meteor/std:accounts-ui';
/**
* Form.propTypes = {
* fields: React.PropTypes.object.isRequired,
* buttons: React.PropTypes.object.isRequired,
* error: React.PropTypes.string,
* ready: React.PropTypes.bool
* fields: PropTypes.object.isRequired,
* buttons: PropTypes.object.isRequired,
* error: PropTypes.string,
* ready: PropTypes.bool
* };
*/
class Form extends Accounts.ui.Form {
@ -482,6 +483,11 @@ class NewLogin extends Accounts.ui.LoginForm {
return super.fields();
}
translate(text) {
// Here you specify your own translation function, e.g.
return this.props.t(text);
}
signUp(options = {}) {
const { firstname = null } = this.state;
if (firstname !== null) {

9
imports/helpers.js
View file

@ -64,10 +64,10 @@ export function validateEmail(email, showMessage, clearMessage) {
if (Accounts.ui._options.emailPattern.test(email)) {
return true;
} else if (!email || email.length === 0) {
showMessage(T9n.get("error.emailRequired"), 'warning', false, 'email');
showMessage("error.emailRequired", 'warning', false, 'email');
return false;
} else {
showMessage(T9n.get("error.accounts.Invalid email"), 'warning', false, 'email');
showMessage("error.accounts.Invalid email", 'warning', false, 'email');
return false;
}
}
@ -76,7 +76,8 @@ export function validatePassword(password = '', showMessage, clearMessage){
if (password.length >= Accounts.ui._options.minimumPasswordLength) {
return true;
} else {
const errMsg = T9n.get("error.minChar").replace(/7/, Accounts.ui._options.minimumPasswordLength);
// const errMsg = T9n.get("error.minChar").replace(/7/, Accounts.ui._options.minimumPasswordLength);
const errMsg = "error.minChar"
showMessage(errMsg, 'warning', false, 'password');
return false;
}
@ -87,7 +88,7 @@ export function validateUsername(username, showMessage, clearMessage, formState)
return true;
} else {
const fieldName = (passwordSignupFields() === 'USERNAME_ONLY' || formState === STATES.SIGN_UP) ? 'username' : 'usernameOrEmail';
showMessage(T9n.get("error.usernameRequired"), 'warning', false, fieldName);
showMessage("error.usernameRequired", 'warning', false, fieldName);
return false;
}
}

3
imports/ui/components/Button.jsx
View file

@ -1,4 +1,5 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Accounts } from 'meteor/accounts-base';
let Link;
try { Link = require('react-router').Link; } catch(e) {}
@ -28,7 +29,7 @@ export class Button extends React.Component {
}
}
Button.propTypes = {
onClick: React.PropTypes.func
onClick: PropTypes.func
};
Accounts.ui.Button = Button;

3
imports/ui/components/Field.jsx
View file

@ -1,4 +1,5 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Accounts } from 'meteor/accounts-base';
export class Field extends React.Component {
@ -69,7 +70,7 @@ export class Field extends React.Component {
}
}
Field.propTypes = {
onChange: React.PropTypes.func
onChange: PropTypes.func
};
Accounts.ui.Field = Field;

15
imports/ui/components/Form.jsx
View file

@ -1,5 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import { Accounts } from 'meteor/accounts-base';
import './Fields.jsx';
import './Buttons.jsx';
@ -26,6 +27,7 @@ export class Form extends React.Component {
buttons,
error,
messages,
translate,
ready = true,
className
} = this.props;
@ -38,7 +40,7 @@ export class Form extends React.Component {
>
<Accounts.ui.Fields fields={ fields } />
<Accounts.ui.Buttons buttons={ buttons } />
<Accounts.ui.PasswordOrService oauthServices={ oauthServices } />
<Accounts.ui.PasswordOrService oauthServices={ oauthServices } translate={ translate } />
<Accounts.ui.SocialButtons oauthServices={ oauthServices } />
<Accounts.ui.FormMessages messages={messages} />
</form>
@ -46,11 +48,12 @@ export class Form extends React.Component {
}
}
Form.propTypes = {
oauthServices: React.PropTypes.object,
fields: React.PropTypes.object.isRequired,
buttons: React.PropTypes.object.isRequired,
error: React.PropTypes.string,
ready: React.PropTypes.bool
oauthServices: PropTypes.object,
fields: PropTypes.object.isRequired,
buttons: PropTypes.object.isRequired,
translate: PropTypes.func.isRequired,
error: PropTypes.string,
ready: PropTypes.bool
};
Accounts.ui.Form = Form;

92
imports/ui/components/LoginForm.jsx
View file

@ -45,6 +45,7 @@ class LoginForm extends Component {
onPreSignUpHook: props.onPreSignUpHook || Accounts.ui._options.onPreSignUpHook,
onPostSignUpHook: props.onPostSignUpHook || Accounts.ui._options.onPostSignUpHook,
};
this.translate = this.translate.bind(this);
}
componentDidMount() {
@ -95,6 +96,13 @@ class LoginForm extends Component {
}
}
translate(text) {
// if (this.props.t) {
// return this.props.t(text);
// }
return T9n.get(text);
}
validateField(field, value) {
const { formState } = this.state;
switch(field) {
@ -120,8 +128,8 @@ class LoginForm extends Component {
getUsernameOrEmailField() {
return {
id: 'usernameOrEmail',
hint: T9n.get('enterUsernameOrEmail'),
label: T9n.get('usernameOrEmail'),
hint: this.translate('enterUsernameOrEmail'),
label: this.translate('usernameOrEmail'),
required: true,
defaultValue: this.state.username || "",
onChange: this.handleChange.bind(this, 'usernameOrEmail'),
@ -132,8 +140,8 @@ class LoginForm extends Component {
getUsernameField() {
return {
id: 'username',
hint: T9n.get('enterUsername'),
label: T9n.get('username'),
hint: this.translate('enterUsername'),
label: this.translate('username'),
required: true,
defaultValue: this.state.username || "",
onChange: this.handleChange.bind(this, 'username'),
@ -144,8 +152,8 @@ class LoginForm extends Component {
getEmailField() {
return {
id: 'email',
hint: T9n.get('enterEmail'),
label: T9n.get('email'),
hint: this.translate('enterEmail'),
label: this.translate('email'),
type: 'email',
required: true,
defaultValue: this.state.email || "",
@ -157,8 +165,8 @@ class LoginForm extends Component {
getPasswordField() {
return {
id: 'password',
hint: T9n.get('enterPassword'),
label: T9n.get('password'),
hint: this.translate('enterPassword'),
label: this.translate('password'),
type: 'password',
required: true,
defaultValue: this.state.password || "",
@ -170,8 +178,8 @@ class LoginForm extends Component {
getSetPasswordField() {
return {
id: 'newPassword',
hint: T9n.get('enterPassword'),
label: T9n.get('choosePassword'),
hint: this.translate('enterPassword'),
label: this.translate('choosePassword'),
type: 'password',
required: true,
onChange: this.handleChange.bind(this, 'newPassword')
@ -181,8 +189,8 @@ class LoginForm extends Component {
getNewPasswordField() {
return {
id: 'newPassword',
hint: T9n.get('enterNewPassword'),
label: T9n.get('newPassword'),
hint: this.translate('enterNewPassword'),
label: this.translate('newPassword'),
type: 'password',
required: true,
onChange: this.handleChange.bind(this, 'newPassword'),
@ -305,7 +313,7 @@ class LoginForm extends Component {
if (user && formState == STATES.PROFILE) {
loginButtons.push({
id: 'signOut',
label: T9n.get('signOut'),
label: this.translate('signOut'),
disabled: waiting,
onClick: this.signOut.bind(this)
});
@ -314,7 +322,7 @@ class LoginForm extends Component {
if (this.showCreateAccountLink()) {
loginButtons.push({
id: 'switchToSignUp',
label: T9n.get('signUp'),
label: this.translate('signUp'),
type: 'link',
href: signUpPath,
onClick: this.switchToSignUp.bind(this)
@ -324,7 +332,7 @@ class LoginForm extends Component {
if (formState == STATES.SIGN_UP || formState == STATES.PASSWORD_RESET) {
loginButtons.push({
id: 'switchToSignIn',
label: T9n.get('signIn'),
label: this.translate('signIn'),
type: 'link',
href: loginPath,
onClick: this.switchToSignIn.bind(this)
@ -334,7 +342,7 @@ class LoginForm extends Component {
if (this.showForgotPasswordLink()) {
loginButtons.push({
id: 'switchToPasswordReset',
label: T9n.get('forgotPassword'),
label: this.translate('forgotPassword'),
type: 'link',
href: resetPasswordPath,
onClick: this.switchToPasswordReset.bind(this)
@ -349,7 +357,7 @@ class LoginForm extends Component {
&& (user.services && 'password' in user.services)) {
loginButtons.push({
id: 'switchToChangePassword',
label: T9n.get('changePassword'),
label: this.translate('changePassword'),
type: 'link',
href: changePasswordPath,
onClick: this.switchToChangePassword.bind(this)
@ -359,7 +367,7 @@ class LoginForm extends Component {
if (formState == STATES.SIGN_UP) {
loginButtons.push({
id: 'signUp',
label: T9n.get('signUp'),
label: this.translate('signUp'),
type: hasPasswordService() ? 'submit' : 'link',
className: 'active',
disabled: waiting,
@ -370,7 +378,7 @@ class LoginForm extends Component {
if (this.showSignInLink()) {
loginButtons.push({
id: 'signIn',
label: T9n.get('signIn'),
label: this.translate('signIn'),
type: hasPasswordService() ? 'submit' : 'link',
className: 'active',
disabled: waiting,
@ -381,7 +389,7 @@ class LoginForm extends Component {
if (formState == STATES.PASSWORD_RESET) {
loginButtons.push({
id: 'emailResetLink',
label: T9n.get('resetYourPassword'),
label: this.translate('resetYourPassword'),
type: 'submit',
disabled: waiting,
onClick: this.passwordReset.bind(this)
@ -391,7 +399,7 @@ class LoginForm extends Component {
if (this.showPasswordChangeForm() || this.showEnrollAccountForm()) {
loginButtons.push({
id: 'changePassword',
label: (this.showPasswordChangeForm() ? T9n.get('changePassword') : T9n.get('setPassword')),
label: (this.showPasswordChangeForm() ? this.translate('changePassword') : this.translate('setPassword')),
type: 'submit',
disabled: waiting,
onClick: this.passwordChange.bind(this)
@ -400,7 +408,7 @@ class LoginForm extends Component {
if (Accounts.user()) {
loginButtons.push({
id: 'switchToSignOut',
label: T9n.get('cancel'),
label: this.translate('cancel'),
type: 'link',
href: profilePath,
onClick: this.switchToSignOut.bind(this)
@ -408,7 +416,7 @@ class LoginForm extends Component {
} else {
loginButtons.push({
id: 'cancelResetPassword',
label: T9n.get('cancel'),
label: this.translate('cancel'),
type: 'link',
onClick: this.cancelResetPassword.bind(this),
});
@ -617,7 +625,7 @@ class LoginForm extends Component {
Meteor.loginWithPassword(loginSelector, password, (error, result) => {
onSubmitHook(error,formState);
if (error) {
this.showMessage(T9n.get(`error.accounts.${error.reason}`) || T9n.get("Unknown error"), 'error');
this.showMessage(`error.accounts.${error.reason}` || "unknown_error", 'error');
}
else {
loginResultCallback(() => this.state.onSignedInHook());
@ -674,10 +682,11 @@ class LoginForm extends Component {
options.forceApprovalPrompt = Accounts.ui._options.forceApprovalPrompt[serviceName];
this.clearMessages();
const self = this
loginWithService(options, (error) => {
onSubmitHook(error,formState);
if (error) {
this.showMessage(T9n.get(`error.accounts.${error.reason}`) || T9n.get("Unknown error"));
this.showMessage(`error.accounts.${error.reason}` || "unknown_error");
} else {
this.setState({ formState: STATES.PROFILE });
this.clearDefaultFieldValues();
@ -744,12 +753,12 @@ class LoginForm extends Component {
const SignUp = function(_options) {
Accounts.createUser(_options, (error) => {
if (error) {
this.showMessage(T9n.get(`error.accounts.${error.reason}`) || T9n.get("Unknown error"), 'error');
if (T9n.get(`error.accounts.${error.reason}`)) {
this.showMessage(`error.accounts.${error.reason}` || "unknown_error", 'error');
if (this.translate(`error.accounts.${error.reason}`)) {
onSubmitHook(`error.accounts.${error.reason}`, formState);
}
else {
onSubmitHook("Unknown error", formState);
onSubmitHook("unknown_error", formState);
}
}
else {
@ -795,10 +804,10 @@ class LoginForm extends Component {
Accounts.loginWithoutPassword({ email: email }, (error) => {
if (error) {
this.showMessage(T9n.get(`error.accounts.${error.reason}`) || T9n.get("Unknown error"), 'error');
this.showMessage(`error.accounts.${error.reason}` || "unknown_error", 'error');
}
else {
this.showMessage(T9n.get("info.emailSent"), 'success', 5000);
this.showMessage(this.translate("info.emailSent"), 'success', 5000);
this.clearDefaultFieldValues();
}
onSubmitHook(error, formState);
@ -809,10 +818,10 @@ class LoginForm extends Component {
Accounts.loginWithoutPassword({ email: usernameOrEmail, username: usernameOrEmail }, (error) => {
if (error) {
this.showMessage(T9n.get(`error.accounts.${error.reason}`) || T9n.get("Unknown error"), 'error');
this.showMessage(`error.accounts.${error.reason}` || "unknown_error", 'error');
}
else {
this.showMessage(T9n.get("info.emailSent"), 'success', 5000);
this.showMessage(this.translate("info.emailSent"), 'success', 5000);
this.clearDefaultFieldValues();
}
onSubmitHook(error, formState);
@ -821,10 +830,10 @@ class LoginForm extends Component {
} else {
let errMsg = null;
if (_.contains([ "USERNAME_AND_EMAIL_NO_PASSWORD" ], passwordSignupFields())) {
errMsg = T9n.get("error.accounts.Invalid email or username");
errMsg = this.translate("error.accounts.invalid_email");
}
else {
errMsg = T9n.get("error.accounts.Invalid email");
errMsg = this.translate("error.accounts.invalid_email");
}
this.showMessage(errMsg,'warning');
onSubmitHook(errMsg, formState);
@ -849,10 +858,10 @@ class LoginForm extends Component {
Accounts.forgotPassword({ email: email }, (error) => {
if (error) {
this.showMessage(T9n.get(`error.accounts.${error.reason}`) || T9n.get("Unknown error"), 'error');
this.showMessage(`error.accounts.${error.reason}` || "unknown_error", 'error');
}
else {
this.showMessage(T9n.get("info.emailSent"), 'success', 5000);
this.showMessage(this.translate("info.emailSent"), 'success', 5000);
this.clearDefaultFieldValues();
}
onSubmitHook(error, formState);
@ -882,11 +891,11 @@ class LoginForm extends Component {
if (token) {
Accounts.resetPassword(token, newPassword, (error) => {
if (error) {
this.showMessage(T9n.get(`error.accounts.${error.reason}`) || T9n.get("Unknown error"), 'error');
this.showMessage(`error.accounts.${error.reason}` || "unknown_error", 'error');
onSubmitHook(error, formState);
}
else {
this.showMessage(T9n.get('info.passwordChanged'), 'success', 5000);
this.showMessage(this.translate('info.passwordChanged'), 'success', 5000);
onSubmitHook(null, formState);
this.setState({ formState: STATES.PROFILE });
Accounts._loginButtonsSession.set('resetPasswordToken', null);
@ -898,11 +907,11 @@ class LoginForm extends Component {
else {
Accounts.changePassword(password, newPassword, (error) => {
if (error) {
this.showMessage(T9n.get(`error.accounts.${error.reason}`) || T9n.get("Unknown error"), 'error');
this.showMessage(`error.accounts.${error.reason}` || "unknown_error", 'error');
onSubmitHook(error, formState);
}
else {
this.showMessage(T9n.get('info.passwordChanged'), 'success', 5000);
this.showMessage('info.passwordChanged', 'success', 5000);
onSubmitHook(null, formState);
this.setState({ formState: STATES.PROFILE });
this.clearDefaultFieldValues();
@ -912,7 +921,7 @@ class LoginForm extends Component {
}
showMessage(message, type, clearTimeout, field){
message = message.trim();
message = this.translate(message).trim();
if (message) {
this.setState(({ messages = [] }) => {
messages.push({
@ -985,6 +994,7 @@ class LoginForm extends Component {
buttons={this.buttons()}
{...this.state}
message={message}
translate={this.translate}
/>
);
}

12
imports/ui/components/PasswordOrService.jsx
View file

@ -1,4 +1,5 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Accounts } from 'meteor/accounts-base';
import { T9n } from 'meteor/softwarerero:accounts-t9n';
import { hasPasswordService } from '../../helpers.js';
@ -14,6 +15,13 @@ export class PasswordOrService extends React.Component {
};
}
translate(text) {
if (this.props.translate) {
return this.props.translate(text);
}
return T9n.get(text);
}
render () {
let { className = "password-or-service", style = {} } = this.props;
let { hasPasswordService, services } = this.state;
@ -25,7 +33,7 @@ export class PasswordOrService extends React.Component {
if (hasPasswordService && services.length > 0) {
return (
<div style={ style } className={ className }>
{ `${T9n.get('orUse')} ${ labels.join(' / ') }` }
{ `${this.translate('orUse')} ${ labels.join(' / ') }` }
</div>
);
}
@ -33,7 +41,7 @@ export class PasswordOrService extends React.Component {
}
}
PasswordOrService.propTypes = {
oauthServices: React.PropTypes.object
oauthServices: PropTypes.object
};
Accounts.ui.PasswordOrService = PasswordOrService;

2
package.js
View file

@ -1,6 +1,6 @@
Package.describe({
name: 'std:accounts-ui',
version: '1.2.20',
version: '1.2.21',
summary: 'Accounts UI for React in Meteor 1.3+',
git: 'https://github.com/studiointeract/accounts-ui',
documentation: 'README.md'