How to manipulate html dynamically through servlet

Hello, I am working on a project to develop an online food ordering website.
I am using HTML, CSS and JavaScript for frontend and Java ( Servlets ) for backend and PostgreSQL as my database.
I am also using Apache Tomcat server for deploying the website on localhost.
I have created a login page for admin ( photos available below ) and I have a servlet called as AdminPage which checks for username and password in database and if it matches correctly it logs user in ( Displays Admin Page to Admin) .
My problem is that when the login fails ( user enters wrong username or password ) the Login page should itself display the error ( sort of like how forum.freecodecamp.org does when we enter wrong credentials ) but I don’t know how to do it.
Currently what I do is I use RequestDispatcher to forward the request to another page if login fails ( photos available below ) and that page has a “Try Again” button which takes user back to login page.
But I don’t want this I want the current page ( Login Page ) to itself display the error message to user that their username or password is invalid.

Login Page Photo -

Login Failed Page Photo -

Login Page HTML Code :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Card</title>
    <link rel="stylesheet" href="./LoginCard.css">
</head>
<body>
    <div class="container">
        <form action="AdminPage" method="post">
            <h3>Admin Login</h3>
            <label for="username">Username</label>
            <input type="text" placeholder="Username" name="username">
            <label for="password">Password</label>
            <input type="password" placeholder="Password" name="password">
            <button>Login</button>
            <p class="login-failed">Invalid Username or password, please try again.</p>
        </form>
    </div>
</body>
</html>

Login Page CSS Code :

*,
*:before ,
*:after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.container {
    width: 430px;
    height: 520px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
}

form {
    height: 520px;
    width: 400px;
    background-color: rgba(255, 255, 255, 0.13);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    box-shadow: 0 0 40px rgba(8, 7, 16, 0.6);
    padding: 50px 35px;
}

body {
    background: url(./res-img-small\ cropped.jpg);
    background-size: cover;
}

form *{
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
    letter-spacing: 0.5px;
    outline: none;
    border: none;
}

form h3 {
    font-size: 32px;
    font-weight: 500;
    line-height: 42px;
    text-align: center;
}

label {
    display: block;
    margin-top: 30px;
    font-size: 16px;
    font-weight: 500;
}

input {
    display: block;
    height: 50px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.07);
    border-radius: 3px;
    padding: 0 10px;
    margin-top: 8px;
    font-weight: 300;
}

::placeholder {
    color: #080710;
}

button {
    margin-top: 50px;
    width: 100%;
    background-color: #ffffff;
    color: #080710;
    padding: 15px 0;
    font-size: 18px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
}

.login-failed {
    display: none;
}

AdminPage.java code ( Servlet which I use to verify username and password from database )



import java.sql.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;



public class AdminPage extends HttpServlet {

		public void doPost(HttpServletRequest req, HttpServletResponse res) throws IOException, 
		ServletException
		{
				try {
					PrintWriter out = res.getWriter();
					res.setContentType("text/html");
					Class.forName("org.postgresql.Driver");
					String user, pass;
					user = req.getParameter("username");
					pass = req.getParameter("password");
					Connection conn = DriverManager.getConnection("jdbc:postgresql://localhost:5432/Online_Food_Ordering_System",
							"postgres", "password");
					String sql = "SELECT * FROM admin_login WHERE username = ? and password = ? ";
					PreparedStatement myStmt = conn.prepareStatement(sql);
					myStmt.setString(1,user);
					myStmt.setString(2,pass);
					ResultSet rs = myStmt.executeQuery();
					if(rs.next())
					{
						out.println("<html>");
						out.println("<body>");
						out.println("<h1>Login Successfull</h1>");
						out.println("</body>");
						out.println("</html>");
					}
					else
					{
						RequestDispatcher rd = req.getRequestDispatcher("LoginFailed.html");  
						rd.forward(req, res);  
					}

				}
				catch (Exception ex)
				{
					System.out.println(ex);
				}
		}
}

When the Login Fails i want to achieve something like this -

Also a slight animation of the error message ( moving a little left and right for few seconds so as to capture attention would be quite nice [ I don’t know how to implement it though :frowning_face: ] )

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.