mirror of
https://github.com/vale981/accounts-ui
synced 2025-03-05 18:01:39 -05:00
Merge branch 'master' into devel
This commit is contained in:
commit
22ff235453
9 changed files with 98 additions and 47 deletions
|
@ -50,7 +50,7 @@ session@1.1.3
|
|||
softwarerero:accounts-t9n@0.0.20
|
||||
spacebars@1.0.9
|
||||
spacebars-compiler@1.0.9
|
||||
studiointeract:react-accounts-ui@1.0.21-rc.1
|
||||
std:accounts-ui@1.1.0
|
||||
tracker@1.0.11
|
||||
ui@1.0.9
|
||||
underscore@1.0.6
|
||||
|
|
|
@ -1,5 +1,13 @@
|
|||
# ChangeLog
|
||||
|
||||
### v1.1.1
|
||||
|
||||
* Bugfixes
|
||||
|
||||
### v1.1.0
|
||||
|
||||
* Renamed package to std:accounts-ui
|
||||
|
||||
### v1.0.21
|
||||
|
||||
* Buttons for oauth services
|
||||
|
|
96
README.md
96
README.md
|
@ -1,6 +1,6 @@
|
|||
# React Accounts UI
|
||||
|
||||
Current version 1.0.21
|
||||
Current version 1.1.1
|
||||
|
||||
## Features
|
||||
|
||||
|
@ -17,14 +17,16 @@ Current version 1.0.21
|
|||
|
||||
This package does not by standard come with any styling, you can easily [extend and make your own](#create-your-own-styled-version), here are a couple versions we've made for the typical use case:
|
||||
|
||||
* [**Basic**](https://atmospherejs.com/studiointeract/react-accounts-ui-basic) `studiointeract:react-accounts-ui-basic`
|
||||
* [**Semantic UI**](https://atmospherejs.com/studiointeract/react-accounts-ui-semantic-ui) `studiointeract:react-accounts-ui-semantic-ui`
|
||||
* [**Basic**](https://atmospherejs.com/studiointeract/accounts-basic) `std:accounts-basic`
|
||||
* [**Semantic UI**](https://atmospherejs.com/studiointeract/accounts-semantic) `std:accounts-semantic`
|
||||
* [Bootstrap 3] (help out on this: http://github.com/studiointeract/accounts-bootstrap)
|
||||
* [Material UI] (help out on this: http://github.com/studiointeract/accounts-material)
|
||||
|
||||
* Add your styled version here [Learn how](#create-your-own-styled-version)
|
||||
|
||||
## Installation
|
||||
|
||||
`meteor add studiointeract:react-accounts-ui`
|
||||
`meteor add std:accounts-ui`
|
||||
|
||||
## Configuration
|
||||
|
||||
|
@ -32,7 +34,7 @@ We support the standard [configuration in the account-ui package](http://docs.me
|
|||
|
||||
### Accounts.ui.config(options)
|
||||
|
||||
`import { Accounts } from 'meteor/studiointeract:react-accounts-ui`
|
||||
`import { Accounts } from 'meteor/std:accounts-ui`
|
||||
|
||||
Configure the behavior of `<Accounts.ui.LoginForm />`
|
||||
|
||||
|
@ -56,19 +58,19 @@ Configure the behavior of `<Accounts.ui.LoginForm />`
|
|||
* **homeRoutePath** String
|
||||
Set the path to where you would like the user to be redirected after a successful login or sign out.
|
||||
|
||||
* **onSubmitHook** function(error, state)
|
||||
* **onSubmitHook** function(error, state) **client**
|
||||
Called when the LoginForm is being submitted: allows for custom actions to be taken on form submission. error contains possible errors occurred during the submission process, state specifies the LoginForm internal state from which the submission was triggered. A nice use case might be closing the modal or side-menu or dropdown showing LoginForm.
|
||||
|
||||
* **preSignUpHook** function(options)
|
||||
* **onPreSignUpHook** function(options) **client**
|
||||
Called just before submitting the LoginForm for sign-up: allows for custom actions on the data being submitted. A nice use could be extending the user profile object accessing options.profile. to be taken on form submission. The plain text password is also provided for any reasonable use. If you return a promise, the submission will wait until you resolve it.
|
||||
|
||||
* **postSignUpHook** func(userId, info) **server**
|
||||
* **onPostSignUpHook** func(userId, info) **server**
|
||||
Called server side, just after a successful user account creation, post submitting the pwdForm for sign-up: allows for custom actions on the data being submitted after we are sure a new user was successfully created. A common use might be applying roles to the user, as this is only possible after fully completing user creation in `alanning:roles`. The userId is available as the first parameter, so that user user object may be retrieved.
|
||||
|
||||
* **postSignUpHook** func(userId, info) **client**
|
||||
* **onPostSignUpHook** func(userId, info) **client**
|
||||
Called client side, just after a successful user account creation, post submitting the pwdForm for sign-up: allows for custom actions on the data being submitted after we are sure a new user was successfully created. Default is **loginPath**.
|
||||
|
||||
* **resetPasswordHook** function()
|
||||
* **onResetPasswordHook** function()
|
||||
Change the default redirect behavior when the user clicks the link to reset their email sent from the system, i.e. you want a custom path for the reset password form. Default is **loginPath**.
|
||||
|
||||
* **onEnrollAccountHook** function()
|
||||
|
@ -94,12 +96,12 @@ This is the default setting for **passwordSignupFields** in the [configuration](
|
|||
### Example setup (Meteor 1.3)
|
||||
|
||||
`meteor add accounts-password`
|
||||
`meteor add studiointeract:react-accounts-ui`
|
||||
`meteor add std:accounts-ui`
|
||||
|
||||
```javascript
|
||||
|
||||
import React from 'react';
|
||||
import { Accounts } from 'meteor/studiointeract:react-accounts-ui';
|
||||
import { Accounts } from 'meteor/std:react-accounts-ui';
|
||||
|
||||
Accounts.ui.config({
|
||||
passwordSignupFields: 'NO_PASSWORD',
|
||||
|
@ -115,13 +117,13 @@ if (Meteor.isClient) {
|
|||
### Example setup using FlowRouter (Meteor 1.3)
|
||||
|
||||
`meteor add accounts-password`
|
||||
`meteor add studiointeract:react-accounts-ui`
|
||||
`meteor add std:accounts-ui`
|
||||
`meteor add kadira:flow-router-ssr`
|
||||
|
||||
```javascript
|
||||
|
||||
import React from 'react';
|
||||
import { Accounts } from 'meteor/studiointeract:react-accounts-ui';
|
||||
import { Accounts } from 'meteor/std:accounts-ui';
|
||||
import { FlowRouter } from 'meteor/kadira:flow-router-ssr';
|
||||
|
||||
Accounts.ui.config({
|
||||
|
@ -141,25 +143,71 @@ FlowRouter.route("/login", {
|
|||
|
||||
```
|
||||
|
||||
### Example setup using the STATES api.
|
||||
|
||||
You can define the inital state you want in your route for the component,
|
||||
as set the path where the links in the component link to, for example below we
|
||||
have one route for /login and one for /signup.
|
||||
|
||||
`meteor add accounts-password`
|
||||
`meteor add std:accounts-ui`
|
||||
`meteor add kadira:flow-router-ssr`
|
||||
|
||||
```javascript
|
||||
T9n.setLanguage('en');
|
||||
|
||||
Accounts.config({
|
||||
sendVerificationEmail: true,
|
||||
forbidClientAccountCreation: false
|
||||
});
|
||||
|
||||
Accounts.ui.config({
|
||||
passwordSignupFields: 'USERNAME_AND_OPTIONAL_EMAIL',
|
||||
loginPath: '/login'
|
||||
});
|
||||
|
||||
FlowRouter.route("/login", {
|
||||
action(params) {
|
||||
mount(MainLayout, {
|
||||
content: <Accounts.ui.LoginForm {...{
|
||||
formState: STATES.SIGN_IN,
|
||||
signUpPath: '/signup'
|
||||
}} />
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
FlowRouter.route("/signup", {
|
||||
action(params) {
|
||||
mount(MainLayout, {
|
||||
content: <Accounts.ui.LoginForm {...{
|
||||
formState: STATES.SIGN_UP,
|
||||
loginPath: '/login'
|
||||
}} />
|
||||
});
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## Create your own styled version
|
||||
|
||||
**To you who are a package author**, its easy to write extensions for `studiointeract:react-accounts-ui` by importing and export like the following example:
|
||||
**To you who are a package author**, its easy to write extensions for `std:accounts-ui` by importing and export like the following example:
|
||||
|
||||
```javascript
|
||||
// package.js
|
||||
|
||||
Package.describe({
|
||||
name: 'author:react-accounts-ui-bootstrap',
|
||||
name: 'author:accounts-bootstrap',
|
||||
version: '1.0.0',
|
||||
summary: 'Bootstrap – Accounts UI for React in Meteor 1.3',
|
||||
git: 'https://github.com/author/react-accounts-ui-bootstrap',
|
||||
git: 'https://github.com/author/accounts-bootstrap',
|
||||
documentation: 'README.md'
|
||||
});
|
||||
|
||||
Package.onUse(function(api) {
|
||||
api.versionsFrom('1.3');
|
||||
api.use('ecmascript');
|
||||
api.use('studiointeract:react-accounts-ui');
|
||||
api.use('std:accounts-ui');
|
||||
|
||||
api.imply('session');
|
||||
|
||||
|
@ -171,11 +219,11 @@ Package.onUse(function(api) {
|
|||
// package.json
|
||||
|
||||
{
|
||||
"name": "react-accounts-ui-bootstrap",
|
||||
"name": "accounts-bootstrap",
|
||||
"description": "Bootstrap – Accounts UI for React in Meteor 1.3",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/author/react-accounts-ui-bootstrap.git"
|
||||
"url": "https://github.com/author/accounts-bootstrap.git"
|
||||
},
|
||||
"keywords": [
|
||||
"react",
|
||||
|
@ -186,9 +234,9 @@ Package.onUse(function(api) {
|
|||
"author": "author",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/author/react-accounts-ui-bootstrap/issues"
|
||||
"url": "https://github.com/author/accounts-bootstrap/issues"
|
||||
},
|
||||
"homepage": "https://github.com/author/react-accounts-ui-bootstrap",
|
||||
"homepage": "https://github.com/author/accounts-bootstrap",
|
||||
"dependencies": {
|
||||
"react": "^15.x",
|
||||
"react-dom": "^15.x",
|
||||
|
@ -205,7 +253,7 @@ To install the dependencies added in your package.json run:
|
|||
// main.jsx
|
||||
|
||||
import React from 'react';
|
||||
import { Accounts } from 'meteor/studiointeract:react-accounts-ui';
|
||||
import { Accounts } from 'meteor/std:accounts-ui';
|
||||
|
||||
/**
|
||||
* Form.propTypes = {
|
||||
|
@ -268,7 +316,7 @@ export { Accounts as default };
|
|||
> Example provided by [@radzom](https://github.com/radzom).
|
||||
|
||||
```javascript
|
||||
import { Accounts, STATES } from 'meteor/react-accounts-ui';
|
||||
import { Accounts, STATES } from 'meteor/accounts-ui';
|
||||
|
||||
class NewLogin extends Accounts.ui.LoginForm {
|
||||
fields() {
|
||||
|
|
|
@ -13,6 +13,7 @@ Accounts.ui._options = {
|
|||
requestOfflineToken: {},
|
||||
forceApprovalPrompt: {},
|
||||
passwordSignupFields: 'NO_PASSWORD',
|
||||
minimumPasswordLength: 6,
|
||||
loginPath: '/',
|
||||
signUpPath: null,
|
||||
resetPasswordPath: null,
|
||||
|
|
|
@ -44,9 +44,10 @@ export function passwordSignupFields() {
|
|||
};
|
||||
|
||||
export function validatePassword(password){
|
||||
if (password.length >= 7) {
|
||||
if (password.length >= Accounts.ui._options.minimumPasswordLength) {
|
||||
return true;
|
||||
} else {
|
||||
this.showMessage(T9n.get("error.minChar").replace(/7/, Accounts.ui._options.minimumPasswordLength), 'warning');
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
|
|
@ -2,23 +2,19 @@ import React from 'react';
|
|||
import { Accounts } from 'meteor/accounts-base';
|
||||
|
||||
export class Button extends React.Component {
|
||||
handleClick(evt) {
|
||||
let { onClick, href } = this.props;
|
||||
if (!href) {
|
||||
evt.preventDefault();
|
||||
onClick(evt);
|
||||
}
|
||||
shouldComponentUpdate(nextProps) {
|
||||
return this.props.href == nextProps.href;
|
||||
}
|
||||
|
||||
render () {
|
||||
const { label, href = null, type, disabled = false, className } = this.props;
|
||||
const { label, href = null, type, disabled = false, className, onClick } = this.props;
|
||||
return type == 'link' ? (
|
||||
<a href={ href } className={ className } onClick={ this.handleClick.bind(this) }>{ label }</a>
|
||||
<a href={ href } className={ className } onClick={ onClick }>{ label }</a>
|
||||
) : (
|
||||
<button className={ className }
|
||||
type={type}
|
||||
disabled={ disabled }
|
||||
onClick={ this.handleClick.bind(this) }>{ label }</button>
|
||||
onClick={ onClick }>{ label }</button>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -363,7 +363,7 @@ export class LoginForm extends Tracker.Component {
|
|||
|
||||
showForgotPasswordLink() {
|
||||
return !this.state.user
|
||||
&& this.state.formState != STATES.PASSWORD_RESET
|
||||
&& this.state.formState == STATES.SIGN_IN
|
||||
&& _.contains(
|
||||
["USERNAME_AND_EMAIL", "USERNAME_AND_OPTIONAL_EMAIL", "EMAIL_ONLY"],
|
||||
passwordSignupFields());
|
||||
|
@ -543,7 +543,6 @@ export class LoginForm extends Tracker.Component {
|
|||
options.password = Meteor.uuid();
|
||||
}
|
||||
else if (!validatePassword(password)) {
|
||||
this.showMessage(T9n.get("error.minChar"), 'warning');
|
||||
Accounts.ui._options.onSubmitHook("error.minChar", formState);
|
||||
return;
|
||||
}
|
||||
|
@ -578,7 +577,7 @@ export class LoginForm extends Tracker.Component {
|
|||
};
|
||||
|
||||
// Allow for Promises to return.
|
||||
let promise = Accounts.ui._options.preSignUpHook(options);
|
||||
let promise = Accounts.ui._options.onPreSignUpHook(options);
|
||||
if (promise instanceof Promise) {
|
||||
promise.then(SignUp);
|
||||
}
|
||||
|
@ -672,8 +671,6 @@ export class LoginForm extends Tracker.Component {
|
|||
} = this.state;
|
||||
|
||||
if ( !validatePassword(newPassword) ){
|
||||
this.showMessage(T9n.get("error.minChar"), 'warning');
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
Package.describe({
|
||||
name: 'std:react-accounts-ui',
|
||||
version: '1.1.0',
|
||||
name: 'std:accounts-ui',
|
||||
version: '1.1.1',
|
||||
summary: 'Accounts UI for React in Meteor 1.3',
|
||||
git: 'https://github.com/studiointeract/react-accounts-ui',
|
||||
git: 'https://github.com/studiointeract/accounts-ui',
|
||||
documentation: 'README.md'
|
||||
});
|
||||
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
{
|
||||
"name": "react-accounts-ui",
|
||||
"name": "accounts-ui",
|
||||
"description": "Accounts UI for React Component in Meteor",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/studiointeract/react-accounts-ui.git"
|
||||
"url": "https://github.com/studiointeract/accounts-ui.git"
|
||||
},
|
||||
"keywords": [
|
||||
"react",
|
||||
|
@ -13,9 +13,9 @@
|
|||
"author": "timbrandin",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/studiointeract/react-accounts-ui/issues"
|
||||
"url": "https://github.com/studiointeract/accounts-ui/issues"
|
||||
},
|
||||
"homepage": "https://github.com/studiointeract/react-accounts-ui",
|
||||
"homepage": "https://github.com/studiointeract/accounts-ui",
|
||||
"dependencies": {
|
||||
"react": ">=0.14.7 || ^15.0.0-rc.2",
|
||||
"react-dom": ">=0.14.7 || ^15.0.0-rc.2",
|
||||
|
|
Loading…
Add table
Reference in a new issue