views/signup.ejs

<!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">
    <link rel="stylesheet" href="signup.css">
    <title>Sign Up</title>
</head>
<body>

    <section class="forms-section">
      <h1 class="section-title">Join Us Today!!</h1>
      <div class="forms">
        <div class="form-wrapper is-active">
          <button type="button" class="switcher switcher-login">
            Sign Up
            <span class="underline"></span>
          </button>
          <form class="form form-login" action="/signup" >
            
              <legend>Please, enter your email and password for login.</legend>
               <div class="input-block">
                <label for="login-email">Name</label>
                <input
                  id="signup-email"
                  name="name"
                  placeholder="Name"
                  type="name"
                  required
                />
              </div> 
              <div class="input-block">
                <label for="email">E-mail</label>
                <input
                  id="signup-email"
                  name="email"
                  placeholder="email"
                  type="text"
                  required
                />
                <div class="email error"></div>
              </div>
              
              <div class="input-block">
                <label for="password">Password</label>
                <input
                  id="signup-password"
                  name="password"
                  placeholder="password"
                  type="password"
                  required
                />
                <div class="password error"></div>
              </div>
               <div class="input-block">
                <label for="login-password">Phone No.</label>
                <input
                  id="signup-password-confirm"
                  type="phno"
                  name="phno"
                  required
                />
              </div>
              <div class="form-control">
                <label class="header">Profile Photo:</label>
                
                <input id="image" type="file" name="profile_photo" placeholder="Photo" required="" capture>
            </div> 
            
            <button type="submit" class="btn-login">
              Sign Up
            </button>
          </form>
        </div>
        <div class="form-wrapper">
          
          
          <script>
            const form = document.querySelector('form');
            const emailError = document.querySelector('.email.error');
            const passwordError = document.querySelector('.password.error');
            form.addEventListener('submit', async (e) => {
              e.preventDefault();
              // reset errors
              emailError.textContent = '';
              passwordError.textContent = '';
              // get values
              const email = form.email.value;
              const password = form.password.value;
              try {
                const res = await fetch('/signup', { 
                  method: 'POST', 
                  body: JSON.stringify({ email, password }),
                  headers: {'Content-Type': 'application/json'}
                });
                const data = await res.json();
                console.log(data);
                if (data.errors) {
                  emailError.textContent = data.errors.email;
                  passwordError.textContent = data.errors.password;
                }
                if (data.user) {
                  location.assign('/');
                }
              }
              catch (err) {
                console.log(err);
              }
            });
          </script>
    
</body>
</html>