/Forms

a small project including nestJS, mySQL, React and Redux Toolkit to sign in and sign up new users can be a good start for any website

Primary LanguageJavaScript

Forms

This Project Include:
  • MySQL
  • React
  • Redux/Toolkit
  • Redux/Persist
  • NestJS
  • TypeORM //connecting to mysql//
  • Bootstrap
  • Bcrypt
  • NodeMailer
  • React-phone-input-2

Which Forms?

  • Sign in
  • Sign up
Forms for forgot password
  • Email code confirmation //sent code in email//
  • Change password

How To Connect Your MySQL?

Go to the web-server folder = > src folder = > config folder => config file image

How To Connect Your Business Email?

Go to the web-server folder = > src folder = > users folder => users.service.ts file => sendMail function image the email I posted is fake and only in use for those projects you can keep it as it is just keep in mind you won't be able to log in to this email
if you do change
please change the email in both transporter AND mailOptions

How To Get The Pass NodeMailer Ask For?

Gmail instructions
  • Enter the security on your account
  • Find the 2 step verification
  • After approving that you'll get a other apps passwords
  • Enter for another write nodeMailer and you'll recive a password
  • Enter that password as your pass
  • Send a mail to check connection :)

How to add/change validation?

What is already optional?

Five validations already exsist:
  • require checks if any input was added also if a line is required there's a red star next to it
  • email checks if the input is the correct format for an email using regax
  • minLen checks if the input lengths is at least the amount you asked for
  • numbers checks if the input has at least 1 number
  • maxDate checks if the input date is lower the the maxDate you asked to check

    • How to add a new validation?

    Go to the validation file (website folder => src folder => common folder => validation) add your if statement to check your validation

    How to add a validation to a field?

    To add them simply go to the api file (website folder => src folder => DAL folder => api) and change the data object

    for example

    Pictures

    Log in form
    • image of the Log in form
    Sign up form
    • image of the Sign up form
    Forgot Password Process
    • image of the enter code form
    • image of the code email
    • image of the change password form
    • phone mode - image of the password on phone mode
    Home page
      before login in

      • a click on the light blue text would take the user back to the log in form and a click on the sign up button would take the user to the sign up form

      after login in

      • after pressing enter in the login form the user would be transfered to the home page and the user first name would be used, a click onthe log out button will changed the page back to its state before login in

    More

    please read the inside README of both web-server and website files
    web-server is more information about nestJS
    and website is more information about react
    #also if you'll like to change the phone input in the formGroupType file please read :
    react-phone-input-2 npm or react-phone-input-2 git