[TODO] Create Login Modal

[gbowne1]

Should be able to go to the (R) in the top navigation and click on it and go to the Login at the bottom of the drop down, click on it and get a Login modal or something.

This should also be in the initial steps of running the application, perhaps on a cover page of some sort.

There is currently only a Logout button on the (R) dropdown context menu. I created a separate issue #57 to change that icon and label state.

Now that we have a backend and server. I would expect that we might need to install a few packages:

express-session
axios
passport
mongodb (nodejs driver)
mongoose
cookie-parser
ejs
morgan
passport-local
jsonwebtoken
express-validator
multer
helmet
boom
joi

In the login I would have:

• Username or Email: This field allows the user to enter their username or email address associated with their account.

• Password: This field is used for entering the password associated with the username or email. Also use a eye icon from @mui/icons-material to toggle password visibility

• Remember Me: This checkbox allows the user to choose whether they want the system to remember their login credentials for future visits.

• Forgot Password: This link provides a way for users to reset their password if they have forgotten it. This should be a link to something the user can enter their email, etc. to have it send them a email with their password/username.

• Sign In/Log In Button: This button triggers the authentication process and logs the user into the system.

[gbowne1]

@LOGESH-B

I am thinking we do something like:

const express = require('express');
const passport = require('passport');
const LocalStrategy = require('passport-local').Strategy;
const bcrypt = require('bcryptjs');
const User = require('./models/user');

const app = express();

// Configure Passport.js
passport.use(
  new LocalStrategy(async (usernameOrEmail, password, done) => {
    try {
      const user = await User.findOne({
        $or: [{ username: usernameOrEmail }, { email: usernameOrEmail }],
      });
      if (!user) {
        return done(null, false, { message: 'Incorrect username or email.' });
      }
      const isMatch = await bcrypt.compare(password, user.password);
      if (!isMatch) {
        return done(null, false, { message: 'Incorrect password.' });
      }
      return done(null, user);
    } catch (error) {
      return done(error);
    }
  })
);

passport.serializeUser((user, done) => {
  done(null, user.id);
});

passport.deserializeUser(async (id, done) => {
  try {
    const user = await User.findById(id);
    done(null, user);
  } catch (error) {
    done(error);
  }
});

// Initialize Passport.js
app.use(passport.initialize());
app.use(passport.session());

// Define the login route
app.post('/api/login', passport.authenticate('local'), (req, res) => {
  res.sendStatus(200);
});

in the server.

[LOGESH-B]

@gbowne1
Yeah but I think of Bcrypt?

[gbowne1]

bcrypt is ok. Passport is much easier. Using LocalStrategy already takes care of the validation, which is on top of the bcrypt.compare (in the passport.use) which gets awaited if its not correct.

This method actually uses both.. and would be fine with some minor tweaking/mofification.