password modal

thoughtlessnerd · May 8, 2023 · 42b0acb · 42b0acb
1 parent 62f6c8b
commit 42b0acb
Show file tree

Hide file tree

Showing 2 changed files with 180 additions and 0 deletions.
diff --git a/client/src/css/ProfileInfo.css b/client/src/css/ProfileInfo.css
@@ -165,3 +165,77 @@
   cursor: pointer;
   color: var(--white);
 }
+
+.profileInfo-section-password-modal {
+  position: absolute;
+  top: 50%;
+  z-index: 101;
+  left: 50%;
+  background-color: var(--white);
+  transform: translate(-50%, -50%);
+  padding: 2rem;
+  border-radius: 1rem;
+  width: 28rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
+}
+
+.profileInfo-section-modal-label {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--black);
+}
+
+.profileInfo-section-modal-element {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.profileInfo-section-modal-input {
+  border: none;
+  background-color: var(--secondary);
+  padding: 0.6rem 1.2rem;
+  border-radius: 0.8rem;
+  font-size: 0.8rem;
+  color: var(--gray);
+}
+
+.profileInfo-section-modal-input:focus {
+  outline: none;
+}
+
+.profileInfo-section-password-modal div.row {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  gap: 1rem;
+}
+
+.profileInfo-section-modal-cancel,
+.profileInfo-section-modal-save {
+  border: none;
+  background-color: var(--primary);
+  color: var(--white);
+  padding: 0.6rem 1.2rem;
+  border-radius: 0.8rem;
+  font-size: 0.8rem;
+  cursor: pointer;
+}
+
+.profileInfo-section-modal-cancel {
+  background-color: var(--gray);
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 100;
+}
diff --git a/client/src/ui/ProfileInfo.tsx b/client/src/ui/ProfileInfo.tsx
@@ -30,6 +30,9 @@ const ProfileInfo = (props: ProfileInfoProps) => {
   const [professionDropdownSelected, setProfessionDropdownSelected] =
     React.useState<number>(0);
 
+  const [editPass, setEditPass] = React.useState<boolean>(false);
+  const [changePass, setChangePass] = React.useState<boolean>(false);
+
   useEffect(() => setAboutValue(props.user.about), [props.user.about]);
   useEffect(() => {
     setLinks(props.user.links || {});
@@ -428,6 +431,109 @@ const ProfileInfo = (props: ProfileInfoProps) => {
           </LabeledElement>
         </div>
       </section>
+      <span className="profileInfo-section-split"></span>
+      <section className="profileInfo-section">
+        <div
+          className="row"
+          style={{
+            justifyContent: "space-between",
+          }}
+        >
+          <h1 className="profileInfo-section-label">Password & Security</h1>
+          <button
+            className="profileInfo-section-edit"
+            onClick={() => {
+              if (!editPass) {
+                setChangePass(true);
+                setEditPass(true);
+              } else {
+                setEditPass(false);
+              }
+            }}
+          >
+            {editPass ? "Save" : "Change password"}
+          </button>
+        </div>
+        <div className="profileInfo-section-password">
+          <LabeledElement
+            className="profileInfo-section-links-element"
+            label="Password"
+            labelClass="profileInfo-section-links-label"
+          >
+            <textarea
+              className="profileInfo-section-aboutme"
+              style={{
+                width: "100%",
+                height: "min-content",
+                maxLines: 1,
+                resize: "none",
+              }}
+              readOnly={true}
+              value="**********"
+            />
+          </LabeledElement>
+        </div>
+        {changePass ? (
+          <>
+            <div className="profileInfo-section-password-modal">
+              <LabeledElement
+                className="profileInfo-section-modal-element"
+                label="Old Password"
+                labelClass="profileInfo-section-modal-label"
+              >
+                <input
+                  className="profileInfo-section-modal-input"
+                  placeholder="Old Password"
+                  type="password"
+                />
+              </LabeledElement>
+              <LabeledElement
+                className="profileInfo-section-modal-element"
+                label="New Password"
+                labelClass="profileInfo-section-modal-label"
+              >
+                <input
+                  className="profileInfo-section-modal-input"
+                  placeholder="New Password"
+                  type="password"
+                />
+              </LabeledElement>
+              <LabeledElement
+                className="profileInfo-section-modal-element"
+                label="Confirm Password"
+                labelClass="profileInfo-section-modal-label"
+              >
+                <input
+                  className="profileInfo-section-modal-input"
+                  placeholder="Confirm Password"
+                  type="password"
+                />
+              </LabeledElement>
+              <div className="row">
+                <button
+                  className="profileInfo-section-modal-cancel"
+                  onClick={() => {
+                    setChangePass(false);
+                    setEditPass(false);
+                  }}
+                >
+                  Cancel
+                </button>
+                <button
+                  className="profileInfo-section-modal-save"
+                  onClick={() => {
+                    setChangePass(false);
+                    setEditPass(false);
+                  }}
+                >
+                  Save
+                </button>
+              </div>
+            </div>
+            <div className="overlay"></div>
+          </>
+        ) : null}
+      </section>
     </div>
   );
 };