GithubHelp home page GithubHelp logo

studiointeract / accounts-ui Goto Github PK

View Code? Open in Web Editor NEW
196.0 196.0 81.0 289 KB

Accounts UI for React in Meteor 1.3+

License: MIT License

JavaScript 100.00%
flow-router loginform meteor profile react react-router signup ssr

accounts-ui's Issues

Support for inline field validation message?

Customizing a theme based on this package...progress is good but can't seem to get the form error messages to show next to input fields.

I am using MDL. It looks something like:

  <div class="mdl-textfield mdl-js-textfield">
    <input class="mdl-textfield__input" type="text" id="sample2">
    <label class="mdl-textfield__label" for="sample2">Number...</label>
    <!-- render this on error -->
    <span class="mdl-textfield__error">Input is not a number!</span>
  </div>

Any hints on how this can be done or is this a feature request?

Problem when adding extra fields

I am following the documentation to add extra fields (firstname and lastname). It renders the fields as expected, but when filling the form it shows the following error:

underscore.js:102 Uncaught (in promise) RangeError: Maximum call stack size exceeded(…)

Removing the extra fields it works fine.
Any idea was this is happening.
Can someone show a working example adding extra fields (maybe I am missing something)

SocialButtons Don't Work?

I see that LoginForm has a SocialButtons element. How do I enable it so as to make it visible on the LoginForm?

Passing State with React Router

I have tried implementing the formState in React Router example from the docs: <Route path="/signup" component={ Accounts.ui.LoginForm } formState={ STATES.SIGN_UP } /> to no avail. If I place <Accounts.ui.LoginForm formState={ STATES.SIGN_UP } /> into its own component and instead call that component into the route, I can at least set the state when that route is entered, but I obviously cannot control the flow the opposite direction (if a user hits Sign In then they will see those form fields but the URL will not change).

Is there anyway to get the intended results from the original code sample? A friend has been able to implement it within Flow Router, so I might drift that direction but wanted to see if this was an issue in the community.

Error messages

I think that we should add more error messages such as:

  • This email doesn't exist: sign in with unregistered email.
  • This email already exist: sign up with an already used email.
  • This password is incorrect: sign in with an incorrect password.

Are any hooks that can be used?

Missing translations

As you can see, some translations are missing when using meteor-accounts-t9n:

https://s3.amazonaws.com/f.cl.ly/items/093D0B0q0K1K2E162C1T/Screen%20Shot%202016-06-10%20at%2010.14.15%20AM.png?v=cfe8c7c2

What's the best way to add them in? Make a PR to accounts-t9n? Or is there somewhere in this repo where I could translate them?

STUDIO INTERACT, PLEASE RESPOND. Need Docs on Social Buttons, Template Mods

I'm dead in the water with accounts for the past 3 days, waiting for a response to my previous post here.

I need to install social buttons. Is that possible? The Read.me doesn't say how to do it. How is this done?

I also need documentation on how to modify the components. Do I overwrite the ones included in the package? Wouldn't my mods be deleted when the package is updated? Please explain how this is done or provide a link that discusses how this is done.

How to add "Confirm Password" Fields

Been wrecking my head on figuring out how to make a Confirm Password field when Signing In and also Changing Password. Any help would be great.

Crash when launching the app just after this package install

Here's the stack trace. I'll try to investigate.
W20160330-23:33:15.732(2)? (STDERR) W20160330-23:33:15.732(2)? (STDERR) /Users/maz-dev/.meteor/packages/meteor-tool/.1.3.0_3.3ma3kz++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/fibers/future.js:267 W20160330-23:33:15.732(2)? (STDERR) throw(ex); W20160330-23:33:15.732(2)? (STDERR) ^ W20160330-23:33:15.823(2)? (STDERR) TypeError: Cannot set property 'loginNoPassword' of undefined W20160330-23:33:15.823(2)? (STDERR) at meteorInstall.node_modules.meteor.studiointeract:react-accounts-ui.imports.api.server.loginWithoutPassword.js (packages/studiointeract:react-accounts-ui/imports/api/server/loginWithoutPassword.js:87:1) W20160330-23:33:15.823(2)? (STDERR) at fileEvaluate (packages/modules-runtime.js:158:9) W20160330-23:33:15.823(2)? (STDERR) at require (packages/modules-runtime.js:92:16) W20160330-23:33:15.824(2)? (STDERR) at meteorInstall.node_modules.meteor.studiointeract:react-accounts-ui.main_server.js (packages/studiointeract:react-accounts-ui/main_server.js:5:1) W20160330-23:33:15.824(2)? (STDERR) at fileEvaluate (packages/modules-runtime.js:158:9) W20160330-23:33:15.824(2)? (STDERR) at require (packages/modules-runtime.js:92:16) W20160330-23:33:15.825(2)? (STDERR) at /Users/maz-dev/code/saintejs/.meteor/local/build/programs/server/packages/studiointeract_react-accounts-ui.js:24855:15 W20160330-23:33:15.825(2)? (STDERR) at /Users/maz-dev/code/saintejs/.meteor/local/build/programs/server/packages/studiointeract_react-accounts-ui.js:24861:3 W20160330-23:33:15.826(2)? (STDERR) at /Users/maz-dev/code/saintejs/.meteor/local/build/programs/server/boot.js:283:10 W20160330-23:33:15.826(2)? (STDERR) at Array.forEach (native)

defaults for onResetPasswordHook and onEnrollAccountHook prevent showing correct form

The current default functions for onResetPasswordHook and onEnrollAccountHook redirect the form to the loginPath, which then changes the formState from PASSWORD_CHANGE to SIGN_IN and does not show the correct change password form.

In my project I set these hooks to blank functions to make these functions work, but this seems like a bad default.

Another newbie question

I keep getting "Signups forbidden", even with

forbidClientAccountCreation: false

I did a meteor reset a few times...please advise

How to extend for user profile

Hi great work you did already.
What I am missing is a way to ask user for firstname, lastname, etc... during signup and store these values in his profile.

I already figured out how to add the appropriate fields in the signup form like this

class NewLogin extends Accounts.ui.LoginForm {
    fields() {
        const { formState } = this.state;
        if (formState == STATES.SIGN_UP) {
            return { 
                firstname: {
                    id: 'firstname',
                    hint: 'Enter firstname',
                    label: 'firstname',
                    onChange: this.handleChange.bind(this, 'firstname')        
                },
                ...super.fields()
            };
        }
        return super.fields();
    }
}

But i cannot figure out how to get them into the options Object when calling the createUser method in line 451 of the LoginForm

Accounts.createUser(options, (error) => {

Can you give advice on it if possible at all or add a possibility for it.

Thx in advance

Change in formState property is not passed down to state in LoginForm component

Hey there,

I noticed that once the LoginForm component is constructed nothing happens when the formState property is changed, through e.g. something like this:

FlowRouter.route('/login', {
    name: 'users.login',
    action() {
      mount(MainLayoutCtx, {
        content: () => (<Accounts.ui.LoginForm {...{
          formState: STATES.SIGN_IN,
          signUpPath: '/signup',
        }} />),
      });
    },
  });

So when your app has two links in the navbar, one to the signup and one to the login form, the user cannot switch between the two forms using these links.

I think it's simple to fix and will provide a pull request shortly..

unexpected reload

when trying to log in (pressing sign in button or hitting enter) a page reload is made with the same url but a "?" is added. This happens on any page including the LoginForm.

I tried commenting out all customized configuration

import { Accounts } from 'meteor/std:accounts-ui';

export default function () {
  Accounts.ui.config({
    passwordSignupFields: 'USERNAME_AND_EMAIL',
    // loginPath: '/login',
    // signUpPath: '/register',
    // resetPasswordPath: '/reset-password',
    // profilePath: '/profile',
    // onSignedInHook: () => FlowRouter.go('/dashboard'),
    // onSignedOutHook: () => FlowRouter.go('/'),
    // minimumPasswordLength: 6
  });
}

using default Accounts.ui.LoginForm but it does not help.
The problems started in 1.1.4
I have gone back to version 1.1.0
:-(

Changing Google accounts scope with requestPermissions

For some reason (I think Google is changing the scope declaration pattern), the latest version of the google-accounts package has a dependency that no longer pulls email from a Google oAuth. I tried to expand the scope with the follow but it does not seem to pick up those values.

Accounts.ui.config({
    requestPermissions: {
        google: [
            'https://www.googleapis.com/auth/userinfo.profile',
            'https://www.googleapis.com/auth/userinfo.email',
        ]
    }
 });

In the meantime I have able to just create my own button that triggers the following, but I imagine there is a cleaner fix. Any ideas?

handleGoogleClick(event) {
    event.preventDefault();
    Meteor.loginWithGoogle({
        requestPermissions: ['email']
    }, function (err) {
         if (!err) {
             const userId = Meteor.userId();
         }
     });
  }

Problems with links and state

I am experimenting inconsistencies, when I try to set the path to certain states i.e. signUpPath = '/register' corresponds to STATES.SIGN_UP and loginPath='/login' corresponds to STATES.SIGN_IN.

e.g. when I am in /password-reset and click to Sign In which redirects me to /login the state for the form is STATES.SIGN_UP instead of STATES.SIGN_IN.

Anyone experimenting the same?

The app will crash if go to any accounts relation routers when the user already logged in

The app will crash if go to any accounts relation routers when the user already logged in,
like /login, /signup, /reset-password, /profile.

I found in LoginForm.jsx is using (user && formState == STATES.PROFILE && (user && 'password' in user.services)) to add changePassword button,

But the app will crach in the user.services is undefined.
LoginForm.jsx:287 Uncaught TypeError: Cannot use 'in' operator to search for 'password' in undefined

In the Meteor guild, the user services field will not auto send to client,
is it correct using user.services is client side?

Invalid key: preSignUpHook

Looks like this particular hook is breaking the package. If you try to add it in your config:

Accounts.ui.config({
  passwordSignupFields: 'EMAIL_ONLY',
  loginPath: '/',
  onSignedInHook: () => FlowRouter.go('/dashboard'),
  onSignedOutHook: () => FlowRouter.go('/'),
  preSignUpHook: () => { console.log('hello') }
});

You get an error of:
Uncaught Error: Accounts.ui.config: Invalid key: preSignUpHook

If you take it out:

Accounts.ui.config({
  passwordSignupFields: 'EMAIL_ONLY',
  loginPath: '/',
  onSignedInHook: () => FlowRouter.go('/dashboard'),
  onSignedOutHook: () => FlowRouter.go('/'),
  // preSignUpHook: () => { console.log('hello') }
});

You get an error of:
Uncaught TypeError: _accountsBase.Accounts.ui._options.preSignUpHook is not a function

Improvements for 3rd party services.

When only using 3rd party services, there are few things that could be improved. e.g.:

  • Not showing the Forget Password Button
  • Not showing the Login / Register Buttons

Install gets stuck

For some reason, I can’t seem to finish the installation. When I enter “meteor add std:accounts-ui” it downloads and loads various things, but it gets stuck at this point: “Extracting std:[email protected]...”

Any idea about what I’m doing wrong, or how I can fix it?
The machine is running Windows 7.

BUG: Clicking reset password link in email does not redirect to page

Hi,

With the latest version, I cannot get resetPasswordPath, nor onResetPasswordHook to have any effect.

The link just redirects to localhost:3000 in development where nothings happens. Only when I manually go to '/login' by clicking my own login-link, do I see that form has a reset-password state.

Please advise. :)

Newbie Question: Cannot find module 'meteor/std:accounts-ui'?

I installed accounts-ui using these commands:

npm i --save react react-dom react-router
meteor add accounts-password
meteor add std:accounts-ui
npm i --save tracker-component

On running, the console shows the following errors:

Uncaught Error: Cannot find module 'tracker-component/package.json'
Uncaught Error: Cannot find module 'meteor/std:accounts-ui'

What am I missing?

Correct Place to Set Up Accounts.config on the Server?

I see this helpful message in the console:

Accounts.config was called on the client but not on the server; some configuration options may not take effect.

Where is the correct place for me to set up Accounts.config on the server? I'm using Mantra.

Do not use package.json if it's not a npm package!!!

When you use package.json with dependencies we have two copies of all your packages (one is my plus one is your). It's very bad!

It's crazy, but you use package.json for add of your sub-packages (bootstrap, etc.). Then we have three(!) copies of react, three copies of react-dom and three copies of tracker-component!

Consider running: meteor npm install --save tracker-component

I'm getting:

Unable to resolve some modules:

  "tracker-component" in /Users/sacha/Dev/packages/react-accounts-ui/imports/ui/components/LoginForm.jsx (os.osx.x86_64)

Consider running: meteor npm install --save tracker-component

But installing tracker-component then gives me:

npm ERR! notarget No compatible version found: react@'>=15.0.0 <16.0.0'
npm ERR! notarget Valid install targets:
npm ERR! notarget ["0.10.0-rc1","0.11.0-rc1","0.0.1","0.0.2","0.0.3","0.1.2","0.2.0","0.2.1","0.2.2","0.2.3","0.2.4","0.2.5","0.2.6","0.3.0","0.3.4","0.3.5","0.5.0","0.5.1","0.5.2","0.6.0","0.6.1","0.6.2","0.6.3","0.7.0","0.7.1","0.8.0","0.9.0-rc1","0.9.0","0.10.0-rc1","0.10.0","0.11.0-rc1","0.11.0","0.11.1","0.11.2","0.12.0-rc1","0.12.0","0.12.1","0.12.2","0.13.0-alpha.1","0.13.0-alpha.2","0.13.0-beta.1","0.13.0-beta.2","0.13.0-rc1","0.13.0-rc2","0.13.0","0.13.1","0.13.2","0.13.3","0.14.0-alpha1","0.14.0-alpha2","0.14.0-alpha3","0.14.0-beta1","0.14.0-beta2","0.14.0-beta3","0.14.0-rc1","0.14.0","0.14.1","0.14.2","0.14.3","0.14.4","0.14.5","0.14.6","0.15.0-alpha.1","0.14.7","15.0.0-rc.1","15.0.0-rc.2"]

Does this package depend on React 15? It won't work with previous versions?

Buttons are Disabled - Uncaught Invariant Violation: getNodeFromInstance: Invalid argument.

I've successfully gotten the elements to render on the page, but none of the buttons work. Upon entering a valid email address, I am able to at least switch between signin/signup/forgot, but I can never submit any of these forms.

I have had this problems on a few build outs, including trying to run superlumen's base system. A friend of mine had the forms working in one repository, but I could not get that same repository to run on my system. Similarly, superlumen's build had the same error on my friend's computer. We were not able to see any obvious environment differences.

This is on Meteor 1.3.4.1.

Does accounts-ui require tracker-component?

Since I updated from 1.1.13 to 1.1.15 (and meteor to 1.3.1), the tmeasday:check-npm-versions package was added.

updated to Meteor 1.3.1.          

Changes to your project's package version selections from updating package
versions:

std:accounts-basic           upgraded from 1.1.8 to 1.1.9
std:accounts-ui              upgraded from 1.1.13 to 1.1.15
tmeasday:check-npm-versions  added, version 0.1.1

And an error appeared to my console browser:
Uncaught Error: tracker-component@^1.3.13 not installed.

The package is actually installed in node_modules. Is this a tmeasday:check-npm-versions or meteor 1.3.1 bug?

is it possible that you are mixing client and server code

Hi in the meteor docs

Accounts.ui.config is for client side
and
Accounts.onCreateUser for server side

I do not understand how or why are you mixing them with the postSignUpHook and think this is the cause why my app broke after upgrading to accounts-ui 1.1.5
I get the error

W20160402-23:59:43.756(2)? (STDERR) Error: Can only call onCreateUser once
W20160402-23:59:43.772(2)? (STDERR)     at AccountsServer.onCreateUser (packages/accounts-base/accounts_server.js:120:13)
W20160402-23:59:43.772(2)? (STDERR)     at exports.default (server/configs/accounts_setup.js:5:12)
W20160402-23:59:43.772(2)? (STDERR)     at meteorInstall.server.main.js (server/main.js:6:1)
...

Accounts.onCreateUser issue

You can only have a single callback hook on Accounts.onCreateUser, which leads to the following warning:

You've implemented Accounts.onCreateUser elsewhere in your application, you can therefor not use Accounts.ui.config({ onPostSignUpHook }) on the server.

What if instead of showing that warning, accounts-ui simply extended the current callback (available at Accounts._onCreateUserHook) with its own custom logic?

i.e.

Accounts.onCreateUser(() => {
  Accounts._onCreateUserHook();
  // do custom stuff here
}

Investigate possibility to publish on npm

Hi, I am using this in the mantra-sample-app.
And when writing a test for it i get the error:

Error: Cannot find module 'meteor/std-accounts-ui
at Function.Module._resolveFilename (module.js:339:15)
at Function.Module._load (module.js:290:25)
at Module.require (module.js:367:17)
at require (internal/module.js:16:19)
...

The app works fine. I did run the command meteor add std-accounts-ui

So my guess is the unit testing (mocha) has problems with atmosphere packages and i would like to test it with npm package instead.

Examples give incorrect passwordSignupFields values

NO_PASSWORD is not a valid option according to your documentation yet examples use it and say it is the default.

Earlier in documentation (near top) it states that EMAIL_ONLY_NO_PASSWORD is the default.

and in code:

if (options.passwordSignupFields) {
    if (_.contains([
      "USERNAME_AND_EMAIL",
      "USERNAME_AND_OPTIONAL_EMAIL",
      "USERNAME_ONLY",
      "EMAIL_ONLY",
      "EMAIL_ONLY_NO_PASSWORD",
      "USERNAME_AND_EMAIL_NO_PASSWORD"
    ],

BUG: Error «Need to set a username or email» when email is set

Hello,

Using latest version as of now.

Steps to reproduce:

  1. First fill out login form with both email and password,
  2. Then click register button.
  3. Finally click register button again.
  4. Observe error message.

Changing the already set email-field makes it work again.
But this is no solution.

What to do? :)

Discussion: Invitation System

I am implementing an invitation system.

Are the current hooks in this package enough?

Basically I'll have to send a token, that will need to be validated, before creating the user.
After that the that user will need to be assigned to a specific role.

@SachaG and @timbrandin what do you think?

State is forced to PROFILE when user is logged in

the State for Accounts.ui.LoginForm is being set to PROFILE even when the formState prop is specified.

I wanted to have a route to show the Change Password form, so I specified a route as such:

FlowRouter.route('/change-password', {
    name: 'users.changePassword',
    action() {
      mount(MainLayoutCtx, {
        content: () => (<Accounts.ui.LoginForm {...{formState: STATES.PASSWORD_CHANGE}} />),
        h1: "Change Password"
      });
    }
  });

But because of this line, the state is being forced to PROFILE:
https://github.com/studiointeract/accounts-ui/blob/master/imports/ui/components/LoginForm.jsx#L33

It needs to be modified to have a default state of SIGN_IN when not signed in, and PROFILE when signed in, but use a specified formState prop if passed in. I will create a PR and link to this issue.

Add chinese language for China

China

zh_cn.js

T9n.map('zh_cn', {
  cancel: '取消',
  'Enter password': '输入密码',
  'Enter newPassword': '输入新密码',
  'Enter email': '输入电子邮箱',
  'Enter username': '输入用户名',
  'Enter username or email': '输入用户名或电子邮箱',
  error: {
    accounts: {
      'Invalid email or username': '无效的密码或用户名',
      'Internal server error': '内部服务器错误',
      'undefined': '服务未配置',
    },
  },
  'or use': '或是使用',
});

Add chinese language for Taiwan

Taiwan

zh_tw.js

T9n.map('zh_tw', {
  cancel: '取消',
  'Enter password': '輸入密碼',
  'Enter newPassword': '輸入新密碼',
  'Enter email': '數入電子郵箱',
  'Enter username': '輸入用戶名',
  'Enter username or email': '輸入用戶名或電子郵箱',
  error: {
    accounts: {
      'Invalid email or username': '無效的密碼或用戶名',
      'Internal server error': '內部服務器錯誤',
      'undefined': '服務未配置',
    },
  },
  'or use': '或是使用',
});

Accounts.sendLoginEmail does not work if address is set

If parameter 'address' is set email's 'to'-address will not be set:

'To' is set with variable 'email':
var options = { to: email, from: Accounts.em

But 'email' is only set when address is not set:
if (!address) { var email = _.find(user.emails || [], function (e) { return !e.verified; }); address = (email || {}).address; }

This case happens when configuring 'EMAIL_ONLY_NO_PASSWORD':
Accounts.ui.config({ passwordSignupFields: 'EMAIL_ONLY_NO_PASSWORD', ...

  • Did I miss something?
  • Please tell me if you'd like a pull request.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.