From f09a56d407647fbed13ffd1f7112667cb85a1ba6 Mon Sep 17 00:00:00 2001
From: Sarthak Shrivastava <sarthaks@vt.edu>
Date: Wed, 29 Nov 2023 17:08:46 -0500
Subject: [PATCH] login and account updating working correctly
---
.../src/components/user/Register.css | 32 ++++++
.../src/components/user/Register.jsx | 107 ++++++++++--------
2 files changed, 91 insertions(+), 48 deletions(-)
create mode 100644 inventory-manager/src/components/user/Register.css
diff --git a/inventory-manager/src/components/user/Register.css b/inventory-manager/src/components/user/Register.css
new file mode 100644
index 0000000..b445300
--- /dev/null
+++ b/inventory-manager/src/components/user/Register.css
@@ -0,0 +1,32 @@
+.register-form-container {
+ max-width: 400px;
+ margin: 0 auto;
+ padding: 20px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+}
+
+.register-form {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.form-group {
+ display: flex;
+ flex-direction: column;
+}
+
+button {
+ width: 100%;
+ padding: 10px;
+ background-color: #007bff;
+ color: #fff;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+}
+
+button:hover {
+ background-color: #0056b3;
+}
diff --git a/inventory-manager/src/components/user/Register.jsx b/inventory-manager/src/components/user/Register.jsx
index 83f7abd..1dcee50 100644
--- a/inventory-manager/src/components/user/Register.jsx
+++ b/inventory-manager/src/components/user/Register.jsx
@@ -1,3 +1,4 @@
+import './Register.css'
import React, { useState } from "react";
import Axios from "axios";
@@ -22,59 +23,69 @@ export const Register = (props) => {
};
return (
- <div className="auth-form-container">
- <h2>Register</h2>
- <form className="register-form" onSubmit={handleSubmit}>
- <label htmlFor="fname">First name</label>
- <input
- value={fname}
- onChange={(e) => setFname(e.target.value)}
- name="fname"
- id="fname"
- placeholder="First Name"
- />
+ <div className="register-form-container">
+ <h2>Register</h2>
+ <form className="register-form" onSubmit={handleSubmit}>
+ <div className="form-group">
+ <label htmlFor="fname">First name</label>
+ <input
+ value={fname}
+ onChange={(e) => setFname(e.target.value)}
+ name="fname"
+ id="fname"
+ placeholder="First Name"
+ />
+ </div>
- <label htmlFor="lname">Last name</label>
- <input
- value={lname}
- onChange={(e) => setLname(e.target.value)}
- name="lname"
- id="lname"
- placeholder="Last Name"
- />
+ <div className="form-group">
+ <label htmlFor="lname">Last name</label>
+ <input
+ value={lname}
+ onChange={(e) => setLname(e.target.value)}
+ name="lname"
+ id="lname"
+ placeholder="Last Name"
+ />
+ </div>
- <label htmlFor="email">Email</label>
- <input
- value={email}
- onChange={(e) => setEmail(e.target.value)}
- name="email"
- id="email"
- placeholder="pid@vt.edu"
- type="email"
- />
+ <div className="form-group">
+ <label htmlFor="email">Email</label>
+ <input
+ value={email}
+ onChange={(e) => setEmail(e.target.value)}
+ name="email"
+ id="email"
+ placeholder="pid@vt.edu"
+ type="email"
+ />
+ </div>
- <label htmlFor="phoneNumber">Phone Number</label>
- <input
- value={phoneNumber}
- onChange={(e) => setPhoneNumber(e.target.value)}
- id="phoneNumber"
- name="phoneNumber"
- placeholder="###-###-####"
- />
+ <div className="form-group">
+ <label htmlFor="phoneNumber">Phone Number</label>
+ <input
+ value={phoneNumber}
+ onChange={(e) => setPhoneNumber(e.target.value)}
+ id="phoneNumber"
+ name="phoneNumber"
+ placeholder="###-###-####"
+ />
+ </div>
- <label htmlFor="password">Password</label>
- <input
- value={pass}
- onChange={(e) => setPass(e.target.value)}
- id="password"
- name="password"
- placeholder="********"
- type="password"
- />
+ <div className="form-group">
+ <label htmlFor="password">Password</label>
+ <input
+ value={pass}
+ onChange={(e) => setPass(e.target.value)}
+ id="password"
+ name="password"
+ placeholder="********"
+ type="password"
+ />
+ </div>
- <button type="submit">Log In</button>
- </form>
- </div>
+ <button type="submit">Register</button>
+ </form>
+ </div>
);
};
--
GitLab