Tips on inline password field placement for a better user interface experience?

While creating a registration form, I ran into a user interface problem.

There are two specific changes I'd like to make:

  • The label for Confirm Password should be inline on the same line.
  • The password input should have an eye icon embedded within it.

Current Design

https://i.sstatic.net/DM2X8.png

Proposed Design

  • The first change is already described above.
  • For the second modification, I want to include an @ (replaced with the eye icon) at the end of the password field.

https://i.sstatic.net/n72Id.png

Code

This issue pertains solely to the user interface, so feel free to skip the backend code. Bootstrap classes have been used in this implementation.

import { useNavigate } from "react-router-dom";

const SignupPage = (props) => {

  // Functionality and state management logic
  
};

export default SignupPage;

Answer №1

Find a solution for your initial inquiry: Ensure the 'label' has adequate width to fit within the same line.

For your second question: Enclose both the input field and eye icon in a div container -> eliminate the borders and outlines of the input tag, set the width to 100% -> Utilize flex properties within the wrapper such as aligning items at the center and applying a gray-colored 1px border. Your implementation for addressing the confirm password dilemma could resemble the following:

<div style={{border:1px solid "gray",
     display:flex,
     align-items:center;}}  >
   ​<input
         ​type={showConfmPassword ? "text":"password"}
         ​className="form-control mx-3"
         ​id="confmpassword"
         ​name="confmpassword"
         ​value={credentials.confmpassword}
         ​onChange={(e) => onChange(e, "confmpassword")}
         ​minLength={5}
         ​required
         style={{border:0,outline:none;width:100%;}}
       ​/>
       ​<i className={ showConfmPassword ?"fas fa-eye-slash mx-2"
            :"fas fa-eye mx-2"} title={ showConfmPassword?"Hide 
            Confirmed Password":"Show Confirmed Password"} onClick= 
           {toggleConfmPasswordVisibilty}>
       </i>
</div>

Answer №2

Resolved the issue by implementing the solution provided above, here is the updated code snippet.

import React, { useState } from "react";
import { useNavigate } from "react-router-dom";

const SignupPage = (props) => {
  const navigate = useNavigate();
  const [showPassword, setShowPassword] = useState(false);
  const [showConfmPassword, setShowConfmPassword] = useState(false);

  const goToLogin = () => {
    navigate("/login");
  };

  const [credentials, setCredentials] = useState({
    name: "",
    email: "",
    password: "",
    confmpassword: "",
    role: "guest",
    forgetQues: "",
    forgetAns: "",
  });

  const onChange = (e, key) => {
    setCredentials((prevCredentials) => ({
      ...prevCredentials,
      [key]: e.target.value,
    }));
    //console.log(credentials);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    const response = await fetch("http://localhost:5000/api/signup", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        name: credentials.name,
        email: credentials.email,
        password: credentials.password,
        role: credentials.role,
        forgetQues: credentials.forgetQues,
        forgetAns: credentials.forgetAns,
      }),
    });

    const json = await response.json();
    //console.log(json);

    if (json.success === true) {
      localStorage.setItem("token", json.authToken);
      navigate("/");
      props.showAlert("User Registered Successfully !", "info");
    } else {
      props.showAlert("Invalid Credentials", "danger");
    }
  };

  function togglePasswordVisibilty() {
    setShowPassword(!showPassword ? true : false);
  }

  function toggleConfmPasswordVisibilty() {
    setShowConfmPassword(!showConfmPassword ? true : false);
  }

  return (
    <>
      <div className="container my-3">
        <div id="loginbody">
          <div className="mt-3">
            <h2 className="my-3 display-3">Set up your account now </h2>
            <form className="login-form p-5" onSubmit={handleSubmit}>
              <div className="mb-3">
                <label htmlFor="name" className="form-label">
                  Name
                </label>
                <input
                  type="text"
                  className="form-control"
                  id="name"
                  name="name"
                  value={credentials.name}
                  onChange={(e) => onChange(e, "name")}
                  aria-describedby="emailHelp"
                />
              </div>>
              ...
                  Login Here!
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </>
  );
};

export default SignupPage;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the most effective method for troubleshooting the html5lib.html5parser.ParseError that occurs due to an unexpected character following an attribute value

Currently, I am engaged in a personal project that involves using the chessdotcom Public API Package. My goal is to retrieve the PGN (Portable Game Notation) from the daily puzzle and store it in a variable, as this is required input for creating a chess g ...

I would like to retrieve my data using my personal API and have them displayed as checkboxes

https://i.sstatic.net/qPSqe.jpgHere is an excerpt of the progress I have made main.html (it's actually a form) <div class="form-group form-check-inline"> <input class="form-check-input" type="radio" name=& ...

Tips for displaying data by using the append() function when the page is scrolled to the bottom

How can I use the append() function to display data when scrolling to the bottom of the page? Initially, when you load the page index.php, it will display 88888 and more br tags When you scroll to the bottom of the page, I want to show 88888 and more br ...

Populate the div with an image that stretches to the full height

I'm facing an issue with my website's front page design, where a div is divided into two sections using the Twitter Bootstrap grid system. When the second grid (span9) is taller than the first (span3), the image perfectly fills up the span9 area ...

Tips for personalizing text and icon colors in the TableSortText element of Material-ui

My Goal: I aim to empower users with the ability to apply customized styles to my EnhancedTable component by utilizing a styles object containing properties like headCellColor, headCellBackgroundColor, bodyCellColor, bodyCellBackgroundColor, and more. The ...

Introduce a default value feature within the select tag

Within my application, I've implemented a select tag with the following code snippet: <Select showSearch={false} defaultValue={["Lucy"]} mode="multiple" style={{ width: 200 }} placeholder="Select a person" optionFilterProp=" ...

Can we dynamically adjust font size based on the width of a div using CSS?

My div is set to 70% width and I have a specific goal in mind: To fill that div with text To adjust the font size so that it takes up the entire width of the div https://i.stack.imgur.com/goVuj.png Would it be possible to achieve this using only CSS? B ...

Troubleshooting: Android compatibility issues with dynamic source for HTML 5 video

My HTML5 video with dynamic source loaded using JavaScript is functioning properly in a web browser but encountering issues within an Android PhoneGap build application. Take a look at the code snippet below: JavaScript code: $('#video_player' ...

What is the process for retrieving the address of the connected wallet using web3modal?

I've been working on an application using next.js and web3. In order to link the user's wallet to the front-end, I opted for web3modal with the following code: const Home: NextPage = () => { const [signer, setSigner] = useState<JsonRpcSig ...

When using nextjs rewrites, encountering a 404 error may occur

When attempting to access the development server on from my local environment, I encountered a CORS error while making a call from my nextjs/reactjs app. To resolve this issue, I implemented a reverse proxy in Next.js as shown below: /** @type {import(&ap ...

Is it possible to trigger a mouseover event on a background div that is obscured by a foreground tooltip in jQuery?

I created a unique effect where a background div fades in when moused over, followed by the foreground div fading in. However, I encountered an issue where the tooltip ends up "flashing" as the foreground steals focus from the background. For reference, h ...

Changing Tailwind CSS variables for customization

Using Variables in index.css : :root { --property: 1; } A Different Approach to Changing it with CSS on Hover: img{ transform: scale(var(--property));; } .another-element:has(:hover, :focus) { --property: 1.1; } There's a way to inclu ...

The image will come to life with animation as the background position is adjusted using Skrollr

Trying to create a div that switches the background image every X pixels scrolled. Initially experimented with changing the background-image, including using sprites and adjusting background position, but encountered a distracting "flickering" effect. Exa ...

Could Enzyme testing be implemented with Next.js (SSR)?

Embarking on my inaugural Next.js project with SSR. Encountering issues when attempting to incorporate Enzyme for ReactJS UI testing. It fails to run, displaying the error message: "React' refers to a UMD global, but the current file is a module ...

Define the term "Parse Error" as it pertains to CSS

i'm encountering an issue while attempting to validate my CSS. Despite trying to validate using direct input (copy and paste), the error persists. In my pursuit to find a solution, I researched on Google only to discover that it could be related to sp ...

Trigger the callback function once the datatables DOM element has finished loading entirely

Hello there! I have a question regarding datatables. Is there any callback function available that is triggered after the datatables DOM element has finished loading? I am aware of the callbacks fnInitComplete, but they do not serve my purpose. Specificall ...

"Enhance Your Webpage with Textual Links that Display Background

A div with a background image is causing issues when links are placed on top of it. The links do not display the underline when hovering over them, unlike other links on the page. Below is the code snippet causing the problem: <div style="min-height:2 ...

Struggling to connect CSS files to an HTML document

Could someone lend a hand in figuring out why this link isn't working as expected? I've attempted to adjust margins within the .banner class, but it doesn't seem to be making any difference. I'm also worried because Atom doesn't s ...

Cut out a passage by using a polyline shape

I am looking to create a unique effect by clipping a text like a heading1 using an svg polyline. The concept is to place the H1 text behind the polyline background and make it appear frosted or blurred. I have successfully achieved this in the past but see ...

Tips on utilizing a local file as a background image URL

How can I modify my CSS to link to a local file path like C:\xampp\htdocs\Folder instead of the URL https://source.unsplash.com/1600x1050/?nature. I am currently using Bootstrap 4 and below is my CSS code: .jumbotron{ background: ...