How to set username and password requirements when user tries to logs in?

help
1

I made a custom login page using meteor-accounts (won’t be using the -ui package).

  • If the user tries to sign in with a username without the ‘@’ I want to let them know they’re not following that format.
  • And, if the user tries to sign in with a password that is less than 6 characters long, I want to let them know that they’re not following that format.

So, how would I be able to do the tasks above for the sign-in page?

P.S. I will not be dealing with account creation because I already hard-coded my users, I just need this for the login page. Thanks!

2 
const testComplexPassword = password => {
  return {
    longEnough: password.length >= 8,
    hasUpperCase: /[A-Z]/.test(password),
    hasLowerCase: /[a-z]/.test(password),
    hasNumbers: /\d/.test(password),
    hasNonAlphas: /\W/.test(password)
  }
}

const passwordCheck = testComplexPassword(password) // password can be in a state, props etc.
// You can instruct the user what is missing until validated and enable a Save button when all true.
// As a standard procedure, re-validate on the server before saving just to make sure the user did not alter the client code to permit a wrong password format.

const passwordIsStandard = passwordCheck.longEnough && passwordCheck.hasUpperCase && passwordCheck.hasLowerCase && passwordCheck.hasNumbers && passwordCheck.hasNonAlphas
3

Thanks, would I put this in the client side or server side? My Meteor.loginWithPassword is in the client-side by the way

4

This could be your controlled input field on your client side:

 <input
       id='password'
       autoComplete='none'
       className='form-control'
       onChange={e => { youValidationFunction(e.target.value) }} // save value to your state
       onBlur={() => { /*...perhaps check the password when you leave the field */}}
       placeholder='Password'
       type='password'
       value={password} /> // this value is from your state.

<button .... disabled={!passwordIsStandard}>Save</button>


In the Save method, on the server, revalidate the password before writing to DB
1 Like
5

@mayway1 This validation can be done in one line but I separated it in multiple keys so that I can show my users what is required of them. You can see it live here as you type in your password: https://www.cyclehabibi.com/signup

1 Like
6

wow thank you so much!

7

Do you happen to have this sourcecode on github? The alerts on the right are really cool.

8

I generate my alerts with React Toastr Style Guide

1 Like
9

Oh and it seems like my button part is not working. My current button code is this:
<button type="submit">sign in</button> But when enter yours in, my whole login page disappears. Do you know how I can alter my current button code to look like yours? For some reason, when I tried, it didn’t work

10

In HTML you need an action for a form on onSubmit or an action on a button on onClick. May I ask please whether you are familiar with HTML (and/or JSX)

11

yes, my button code is in a .JSX file. So, <button type="submit">sign in</button> won’t take an action, right?

12

I would not do that, as it would allow anyone to get knowledge about the credentials you are expecting, making it easier to try to get access.

Just inform when the credentials are incorrect, to check and try again. Just my opinion