User profile

cloud-haven-react-app/src/components/TabSystem/TabSystem.js

@@ -4,15 +4,16 @@ import profile from "../../images/profile-user.png";
 import chatBubble from "../../images/chat.png";
 import calendar from "../../images/calendar.png";
 import "./TabSystem.css";
+import UserProfile from "../UserProfile/UserProfile";
 
 const TabSystem = () => {
     return (
         <Tabs defaultActiveKey="UserProfile" id="uncontrolled-tab-example" className="Tabs">
             <Tab eventKey="UserProfile" title={<span> <img className="TabIcon" src={profile} height="30"/> User Profile </span>}>
-                User profile goes here.
+                <UserProfile/>
             </Tab>
             <Tab eventKey="Messages" title={<span> <img className="TabIcon" src={chatBubble} height="30"/> Messages </span>}>
-                Messages goes here. 
+                Messages goes here.
             </Tab>
             <Tab eventKey="Calendar" title={<span> <img className="TabIcon" src={calendar} height="30"/> Calendar </span>}>
                 Calendar goes here.

cloud-haven-react-app/src/components/UserProfile/UserProfile.css

@@ -0,0 +1,69 @@
+.UserProfileWrapper {
+    margin-top: 2%;
+}
+
+.EditButton {
+    background-color: #EDEDED;
+    color: #000000;
+    width: 6em;
+    height: 3em;
+    border-color: #EDEDED;
+}
+
+.EditButton:hover {
+    background-color: #E5E5E5;
+    color: #000000;
+    border-color: #EDEDED;
+    outline: none;
+}
+
+.InfoAccordion {
+    margin-top: 0.5%;
+    margin-bottom: 3%;
+    width: 100%;
+}
+
+.AccordionCard {
+    background-color: #e5e5e5;
+}
+
+.AccordionHeaderText {
+    margin-top: 2%;
+    font-weight: bold;
+    color: #254e70;
+}
+
+.AccordionHeader {
+    margin-top: 2em;
+    font-size: 18px;
+    color: #254E70;
+    font-weight: bold;;
+    text-align: start;
+}
+
+.SettingsIcon {
+    margin-top: 0.7em;
+}
+
+.ManageDataText {
+    font-size: 22px;
+    color: #254E70;
+}
+
+.Caret {
+    float: right;
+}
+
+.card-body {
+    padding: .5em;
+}
+
+.collapse {
+    padding: 1em;
+    padding-top: 0;
+}
+
+.collapsing {
+    padding: 1em;
+    padding-top: 0;
+}

cloud-haven-react-app/src/components/UserProfile/UserProfile.js

@@ -0,0 +1,194 @@
+import React from "react";
+import { Container, Row, Col, Button, Nav } from 'react-bootstrap';
+import Accordion from 'react-bootstrap/Accordion'
+import Card from 'react-bootstrap/Card'
+import Form from 'react-bootstrap/Form'
+import profile from "../../images/profile-user.png";
+import settings from "../../images/settings.png"
+import invisible from "../../images/invisible.png";
+import caretDown from "../../images/caretDown.png";
+import './UserProfile.css'
+
+const UserProfile = () => {
+
+    const [ editing, setEditing ] = React.useState(false);
+
+    // TO DO: pull user info from passport/backend
+    const [ firstName, setFirstName ] = React.useState('Johnald');
+    const [ lastName, setLastName ] = React.useState('Testman');
+    const [ email, setEmail ] = React.useState('[email protected]');
+    const [ phoneNumber, setPhoneNumber ] = React.useState('555-555-5555');
+    const [ birthDate, setBirthDate ] = React.useState('2021-01-01');
+    const [ buttonText, setButtonText ] = React.useState("Edit")
+
+    const [ firstNameFormData, setFirstNameFormData ] = React.useState({
+        controlId: 'formFirstName',
+        label: 'First Name',
+        type: 'name',
+        focus: null
+    })
+    const [ lastNameFormData, setlastNameFormData ] = React.useState({
+        controlId: 'formlastName',
+        label: 'Last Name',
+        type: 'name',
+        focus: null
+    })
+    const [ emailFormData, setEmailFormData ] = React.useState({
+        controlId: 'formEmail',
+        label: 'Email Address',
+        type: 'email',
+        focus: null
+    })
+    const [ phoneFormData, setPhoneFormData ] = React.useState({
+        controlId: 'formPhone',
+        label: 'Phone Number',
+        type: 'tel',
+        focus: null
+    })
+    const [ birthFormData, setBirthFormData ] = React.useState({
+        controlId: 'formBirth',
+        label: 'Date of Birth',
+        type: 'date',
+        focus: null
+    })
+
+    const toggleEditing = () => {
+        setEditing(!editing);
+
+        if (!editing) {
+            setButtonText("Save")
+        }
+        else {
+            setButtonText("Edit")
+        }  
+    };
+
+    const ProfileHeader = () => {
+        return (
+            <Container className='d-flex align-items-start justify-content-between'>
+                <img src={invisible} height="130" />
+                <img src={profile} height="150" />
+                <EditButton/>
+            </Container>
+        )
+    }
+
+    const EditButton = () => {
+        return (
+            <Button className='EditButton' onClick={toggleEditing}>{buttonText}</Button>
+        )
+    }
+
+    const ManageDataButton = () => {
+        return (
+            <Nav
+                className="justify-content-center"
+                activeKey="/home"
+                onSelect={(selectedKey) => alert(`${selectedKey} goes here`)}
+            >
+                <img className="SettingsIcon" src={settings} height="30" />
+                <Nav.Link className="ManageDataText" eventKey="ManageDataPopup"> <u>Manage Data</u></Nav.Link>
+            </Nav>
+        )
+    }
+
+
+    return (
+        <Container className='UserProfileWrapper'>
+            <ProfileHeader/>
+                <header className="AccordionHeader">Personal Information</header>
+            <Accordion className='InfoAccordion'>
+                <Card className='AccordionCard'>
+                    <Accordion.Toggle as={Card.Body} eventKey="0" >
+                        <img className="Caret" src={caretDown} height="30" />
+                    </Accordion.Toggle>
+
+                    <Accordion.Collapse eventKey="0">
+                        <Form>
+                            <Row>
+                                <Col>
+                                    <Form.Group controlId={firstNameFormData.controlId}>
+                                        <Form.Label>{firstNameFormData.label}</Form.Label>
+                                        <Form.Control
+                                            type={firstNameFormData.type}
+                                            value={firstName}
+                                            onChange={e => setFirstName(e.target.value)}
+                                            disabled={!editing} />
+                                    </Form.Group>
+                                </Col>
+
+                                <Col>
+                                    <Form.Group controlId={lastNameFormData.controlId}>
+                                        <Form.Label>{lastNameFormData.label}</Form.Label>
+                                        <Form.Control
+                                            type={lastNameFormData.type}
+                                            value={lastName}
+                                            onChange={e => setLastName(e.target.value)}
+                                            disabled={!editing} />
+                                    </Form.Group>
+                                </Col>
+                            </Row>
+
+                            <Row>
+                                <Col>
+                                    <Form.Group controlId={emailFormData.controlId}>
+                                        <Form.Label>{emailFormData.label}</Form.Label>
+                                        <Form.Control
+                                            type={emailFormData.type}
+                                            value={email}
+                                            onChange={e => setEmail(e.target.value)}
+                                            disabled={!editing} />
+                                    </Form.Group>
+                                </Col>
+
+                                <Col>
+                                    <Form.Group controlId={phoneFormData.controlId}>
+                                        <Form.Label>{phoneFormData.label}</Form.Label>
+                                        <Form.Control
+                                            type={phoneFormData.type}
+                                            value={phoneNumber}
+                                            onChange={e => setFirstName(e.target.value)}
+                                            disabled={!editing} />
+                                    </Form.Group>
+                                </Col>
+
+                                <Col>
+                                    <Form.Group controlId={birthFormData.controlId}>
+                                        <Form.Label>{birthFormData.label}</Form.Label>
+                                        <Form.Control
+                                            type={birthFormData.type}
+                                            value={lastName}
+                                            onChange={e => setFirstName(e.target.value)}
+                                            disabled={!editing} />
+                                    </Form.Group>
+                                </Col>
+                            </Row>
+                        </Form>
+                    </Accordion.Collapse>
+                </Card>
+            </Accordion>
+
+            <header className="AccordionHeader">Other Information</header>
+            <Accordion className='InfoAccordion'>
+                <Card className='AccordionCard'>
+                    <Accordion.Toggle as={Card.Body} eventKey="0" >
+                        <img className="Caret" src={caretDown} height="30" />
+                    </Accordion.Toggle>
+                    <Accordion.Collapse eventKey="0">
+                        <Card.Body>
+                            Other information goes here.
+                        </Card.Body>
+                    </Accordion.Collapse>
+                </Card>
+            </Accordion>
+
+            <ManageDataButton/>
+
+        </Container>
+
+
+
+    )
+}
+
+export default UserProfile;