@byk1tty/loginregister v1.0.4

loginregister

loginregister is a Node.js based login and registration system module. With this module, you can quickly implement user login and registration functionalities in your application.

Installation

To use the loginregister module, you need to have Node.js and npm installed on your system. Then, you can add the loginregister module to your project by running the following command:

npm install loginregister

Usage

To create a login and registration system using the loginregister module, you can follow these steps:

1. Require the loginregister module in your Node.js application.
2. Set up the necessary configuration options such as the login page name, register page name, database URL, and login redirect URL.
3. Customize the CSS styles for the login and registration pages, if desired.
4. Use the provided methods to handle user login and registration actions.
5. Customize the UI templates as needed using the provided EJS templates.

Here's an example code snippet:

const loginregister = require('loginregister');

// Set up configuration options
loginregister.loginRegister({
  loginPageName: 'login',
  registerPageName: 'register',
  databaseURL: 'mongodb://localhost/myapp',
  loginToPage: 'dashboard',
  loginPageCss: 'path/to/login-page-styles.css',
  registerPageCss: 'path/to/register-page-styles.css'
});

// Handle user login
app.post('/login', (req, res) => {
  // Retrieve login form data
  const { username, password } = req.body;

  // Use loginregister methods to handle the login process
  loginregister.login(username, password)
    .then(user => {
      // Redirect the user to the specified page after successful login
      res.redirect('/dashboard');
    })
    .catch(error => {
      // Handle login error
      res.render('login', { error });
    });
});

// Handle user registration
app.post('/register', (req, res) => {
  // Retrieve registration form data
  const { username, password, email } = req.body;

  // Use loginregister methods to handle the registration process
  loginregister.register(username, password, email)
    .then(user => {
      // Redirect the user to the specified page after successful registration
      res.redirect('/dashboard');
    })
    .catch(error => {
      // Handle registration error
      res.render('register', { error });
    });
});

Customizing CSS Styles The login and registration pages can be customized by applying CSS styles to different elements. Here's a list of some common CSS selectors that you can use to target specific elements:

Form Fields:

inputtype=text: Selects text input fields. inputtype=password: Selects password input fields. inputtype=email: Selects email input fields. inputtype=submit: Selects submit buttons. select: Selects dropdown/select fields. textarea: Selects text area fields. Labels:

label: Selects all labels associated with form fields. Buttons:

.login-button: Selects the login button. .register-button: Selects the register button. Error Messages:

.error-message: Selects error messages displayed on the login and registration pages. Containers/Sections:

.login-container: Selects the container element for the login page. .register-container: Selects the container element for the registration page. Page Title:

.login-title: Selects the title element on the login page. .register-title: Selects the title element on the registration page. These are just a few examples of CSS selectors that you can use to target specific elements on the login and registration pages. You can apply various CSS properties such as color, font-size, background-color, padding, margin, etc., to customize the appearance of these elements.

To apply custom styles, create a CSS file and define the styles using the appropriate selectors mentioned above. Then, include the CSS file as mentioned in the previous section.

Here's an example of how you can style the form labels:

label {
  color: #333;
  font-weight: bold;
}

In this example, all labels associated with form fields will have a color of #333 and a bold font weight.

Feel free to experiment and apply different styles to achieve the desired visual design for your login and registration pages.

Note: It's recommended to use specific class names or IDs for elements to avoid conflicts with other styles in your application.

For more advanced styling techniques and tips, refer to the CSS documentation and resources available online.

That's it! You now have the flexibility to customize the CSS styles for different elements on the login and registration pages using the provided CSS selectors.

Hope this clarifies how to apply CSS styles to different elements!

For more information on available methods and customization options, please refer to the documentation provided with the mongodblogin module.

Contributing

Contributions to the mongodblogin module are welcome! If you find any issues or have suggestions for improvements, please create a GitHub issue or submit a pull request.

License

This project is licensed under the MIT License.