Asset-Borrowing-Website / views / user / user_register.html
user_register.html
Raw
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/public/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/public/css/users/user_register.css" />
    <script src="/public/js/bootstrap.bundle.min.js"></script>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <title>UserRegister</title>
  </head>

  <body class="body text-white">
    <div class="container-fluid content-center">
      <div class="row">
        <div class="left-half">
          <div class="title">
            <h1 class="text-large">REGISTER FOR USERS</h1>
            <p class="text-center">Create your account</p>
          </div>

          <form action="/registerUser" method="post" id="formSignup">
            <div class="input-boxes">
              <div class="input-box">
                <i class="login_icon fa fa-envelope"></i>
                <input
                  type="email"
                  class="form-control"
                  name="email"
                  id="txtEmail"
                  placeholder="Email"
                />
              </div>
              <div class="input-box">
                <i class="login_icon fa fa-user"></i>
                <input
                  type="text"
                  class="form-control"
                  name="username"
                  id="txtUsername"
                  placeholder="Username"
                />
              </div>

              <div class="input-box">
                <i class="login_icon fa fa-lock"></i>
                <input
                  type="password"
                  class="form-control"
                  name="password"
                  id="txtPassword"
                  placeholder="Password"
                />
                <button
                  class="btn btn-password"
                  type="button"
                  onclick="togglePasswordVisibility('txtPassword', 'password-icon')"
                >
                  <i id="password-icon" class="fa fa-eye"></i>
                </button>
              </div>

              <div class="input-box">
                <i class="login_icon fa fa-lock"></i>
                <input
                  type="password"
                  class="form-control"
                  name="repassword"
                  id="txtRePassword"
                  placeholder="Re-Password"
                />
                <button
                  class="btn btn-password"
                  type="button"
                  onclick="togglePasswordVisibility('txtRePassword', 'repassword-icon')"
                >
                  <i id="repassword-icon" class="fa fa-eye"></i>
                </button>
              </div>

              <button class="btnSignup" type="submit" onclick="LoginClick()">
                SIGN UP
              </button>
            </div>
          </form>
          <div class="mt-3">
            <a id="clickable-link" href="#" class="no-underline">
              <i class="fa fa-arrow-left"></i>
              <span class="textback">Back to Login</span>
            </a>
          </div>
        </div>

        <div class="right-half">
          <div>
            <h1 class="text-large">Register to</h1>
            <h1 class="text-large">Asset borrowing</h1>
            <p>Register to access your account</p>
          </div>

          <img
            src="/public/img/Sign_up-bro.png"
            alt="login-img"
            width="500"
            height="auto"
          />
        </div>
      </div>
    </div>

  <script src="/public/js/users/user_register.js"></script>
  </body>
</html>