Fixes #38 Convert UpdatePassword Page from HTML to React

Fixes Convert UpdatePassword Page from HTML to React #40

PR #95

src/webapp/src/pages/user/ResetPasswordPage.jsx

@@ -1,7 +1,37 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
+import { Form, Button, Container, Row, Col, Card } from 'react-bootstrap';
 
 const ResetPasswordPage = () => {
-  return <div>ResetPasswordPage</div>;
+  return (
+    <Container className="mt-5">
+      <Row className="justify-content-center">
+        <Col md={8}>
+          <Card className="bg-white py-2 px-4">
+            <Card.Body>
+              <Link to="/login">Back to login</Link>
+
+              <h1 className="mb-2">Reset Password</h1>
+              <p className="mb-3">Use this form to reset your password using the registered email address.</p>
+
+              <Form>
+                {/* Email Input Section*/}
+                <Form.Group controlId="formEmail" className="mb-3">
+                  <Form.Label>Enter Email</Form.Label>
+                  <Form.Control type="email" name="email" placeholder="Email address" />
+                </Form.Group>
+
+                {/* Submit Button */}
+                <Button variant="success" type="submit" className="w-100">
+                  Reset Password
+                </Button>
+              </Form>
+            </Card.Body>
+          </Card>
+        </Col>
+      </Row>
+    </Container>
+  );
 };
 
 export default ResetPasswordPage;

src/webapp/src/pages/user/UpdatePasswordPage.jsx

@@ -1,7 +1,46 @@
 import React from 'react';
+import { Form, Button, Container, Row, Col, Card } from 'react-bootstrap';
 
 const UpdatePasswordPage = () => {
-  return <div>UpdatePasswordPage</div>;
+  return (
+    <Container className="mt-5">
+      <Row className="justify-content-center">
+        <Col md={8}>
+          <Card className="bg-white py-2 px-4">
+            <Card.Body>
+              <h1 className="mb-2">Update Password</h1>
+              <Form>
+                {/* Current Password */}
+                <Form.Group controlId="currentPassword" className="mb-3">
+                  <Form.Label>Current Password</Form.Label>
+                  <Form.Control type="password" name="password" placeholder="Current Password" />
+                </Form.Group>
+
+                {/* New Password */}
+                <Form.Group controlId="newPassword" className="mb-3">
+                  <Form.Label>New Password</Form.Label>
+                  <Form.Control type="password" name="newPassword" placeholder="New Password" />
+                </Form.Group>
+
+                {/* Confirm New Password */}
+                <Form.Group controlId="confirmNewPassword" className="mb-3">
+                  <Form.Label>Confirm New Password</Form.Label>
+                  <Form.Control type="password" name="newPassword2" placeholder="Confirm New Password" />
+                </Form.Group>
+
+                {/* Submit Button */}
+                <Form.Group>
+                  <Button variant="success" type="submit" className="w-100">
+                    Update Password
+                  </Button>
+                </Form.Group>
+              </Form>
+            </Card.Body>
+          </Card>
+        </Col>
+      </Row>
+    </Container>
+  );
 };
 
 export default UpdatePasswordPage;