General

Responsive Login form in React Js and CSS

by Bankygold7904034

Embarking on your React JS journey can be a thrilling yet daunting experience. With a plethora of concepts to absorb, it’s easy to feel overwhelmed by the numerous tutorials available. However, there’s a more effective way to master React: by building real-world projects.

Hands-on experience allows you to apply theoretical knowledge, identify knowledge gaps, and witness tangible results. Moreover, it’s an enjoyable process! Projects serve as more than just learning tools; they’re an excellent way to bolster your confidence and showcase your skills to potential employers.

Whether you’re designing an elegant UI or integrating robust APIs, each project propels you closer to becoming a React expert. Additionally, every project adds a unique dimension to your portfolio, enabling you to stand out in a competitive job market.

Key takeaways:

  • Build real-world projects to master React JS
  • Hands-on experience helps solidify knowledge and identify gaps
  • Projects boost confidence, showcase skills, and enhance portfolio
  • Each project brings you closer to becoming a React pro
  1. Simple Login Form

Ready to Dive into React JS?

As a beginner, creating a simple yet practical project is an excellent way to get started with React JS. Building a login form is a fantastic project to begin with, allowing you to grasp fundamental concepts such as:

  • Components: Learn how to break down your interface into reusable, modular components.
  • State Management: Understand how to manage user input and interaction with your form.
  • Styling: Discover how to apply CSS styles to create a visually appealing and functional login interface.

By completing this project, you’ll not only gain hands-on experience with React JS and CSS but also end up with a fully functional and stylish login form to showcase your skills.

Getting Started

Create a Project Folder:

  • Make a new folder, for instance, “login-form”.
  • Open this folder in your VS Code editor.

Initialize the Project:

Open your terminal by pressing Ctrl + J and then use Vite to create a new React app with this command:

npm create vite@latest ./ -- --template react
npm install
npm run dev

Project Setup: Modifying Folders and CSS Files

Step 1: Remove Default Assets
Delete the default assets folder and App.css file from your project directory.

Step 2: Add Logos to Public Folder
Download the required logos and place the SVG files directly into your project’s public folder. Make sure to only include the individual SVG logo files, not the containing folder.

Step 3: Update index.css
Replace the entire content of the index.css file with the provided code snippet.

/* Importing Google Fonts - Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #5F41E4;
}

#root {
  width: 100%;
  padding: 0.6rem;
}

.login-container {
  margin: 0 auto;
  max-width: 410px;
  padding: 2rem 1.5rem;
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.login-container .form-title {
  text-align: center;
  font-size: 1.37rem;
  font-weight: 600;
  margin-bottom: 1.87rem;
}

.login-container .social-login {
  display: flex;
  gap: 1.31rem;
}

.social-login .social-button {
  display: flex;
  gap: 0.81rem;
  width: 100%;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.75rem 0;
  border-radius: 0.31rem;
  align-items: center;
  justify-content: center;
  background: #F9F8FF;
  border: 1px solid #D5CBFF;
  transition: 0.3s ease;
}

.social-login .social-button:hover {
  border-color: #5F41E4;
  background: #f1eff9;
}

.social-login .social-button .social-icon {
  width: 23px;
}

.login-container .separator {
  position: relative;
  margin: 1.5rem 0;
  text-align: center;
  background: #fff;
}

.login-container .separator span {
  z-index: 1;
  font-weight: 500;
  color: #6652BE;
  position: relative;
  background: #fff;
  font-size: 1.06rem;
  padding: 0 0.9rem;
}

.login-container .separator::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 1px;
  width: 100%;
  background: #bfb3f2;
}

.login-form .input-wrapper {
  height: 54px;
  width: 100%;
  position: relative;
  margin-bottom: 1.5rem;
}

.login-form .input-field {
  width: 100%;
  height: 100%;
  outline: none;
  font-size: 1.06rem;
  border-radius: 0.31rem;
  border: 1px solid #bfb3f2;
  padding: 0px 1.25rem 0 3.12rem;
  transition: 0.2s ease;
}

.login-form .input-field:focus {
  border-color: #5F41E4;
}

.login-form .input-field::placeholder {
  color: #9284c8;
}

.login-form .input-wrapper i {
  position: absolute;
  top: 50%;
  height: 100%;
  display: flex;
  color: #a395e0;
  align-items: center;
  transform: translateY(-50%);
  transition: 0.2s ease;
}

.login-form .input-wrapper i:not(.eye-icon) {
  left: 0.93rem;
  pointer-events: none;
}

.login-form .input-field:focus ~ i:not(.eye-icon) {
  color: #5F41E4;
}

.login-form .input-wrapper i.eye-icon {
  display: none;
  right: 0.93rem;
  color: #917DE8;
  cursor: pointer;
  font-size: 1.25rem;
}

.login-form .input-wrapper .input-field:valid ~ .eye-icon {
  display: flex;
}

.login-form .forgot-password-link {
  display: block;
  width:fit-content;
  margin-top: -0.44rem;
}

.login-form .login-button {
  border: none;
  outline: none;
  width: 100%;
  height: 54px;
  color: #fff;
  font-size: 1.125rem;
  font-weight: 500;
  cursor: pointer;
  margin-top: 2.19rem;
  border-radius: 0.31rem;
  background: #5F41E4;
  transition: 0.3s ease;
}

.login-form .login-button:hover {
  background: #4320df;
}

.login-container .signup-prompt {
  text-align: center;
  font-size: 1.06rem;
  font-weight: 500;
  margin: 1.75rem 0 0.31rem;
}

.login-container a {
  color: #5F41E4;
  font-weight: 500;
  text-decoration: none;
}

.login-container a:hover {
  text-decoration: underline;
}

Step 1: Create Components Folder

Navigate to the src directory of your project and create a new folder named components. This folder will house the individual components that make up your Login Form.

Step 2: Create Component Files

Inside the components folder, create the following two files:

  • SocialLogin.jsx
  • InputField.jsx

These files will contain the code for rendering social login buttons and input fields, respectively.

Step 3: Add Code to Component Files

Add the respective code to each of the newly created files:

  • In components/SocialLogin.jsx, add the code to render social login buttons for Google and Apple.
  • In components/InputField.jsx, add the code to define the layout and functionality of the input fields.

These components will work together to create a fully functional Login Form.

const SocialLogin = () => {
  return (
    <div className="social-login">
      <button className="social-button">
        <img src="google.svg" alt="Google" className="social-icon" />
        Google
      </button>
      <button className="social-button">
        <img src="apple.svg" alt="Apple" className="social-icon" />
        Apple
      </button>
    </div>
  )
}

export default SocialLogin;

components/InputField.jsx

import { useState } from "react";

const InputField = ({ type, placeholder, icon }) => {
  // State to toggle password visibility
  const [isPasswordShown, setIsPasswordShown] = useState(false);

  return (
    <div className="input-wrapper">
      <input
        type={isPasswordShown ? 'text' : type}
        placeholder={placeholder}
        className="input-field"
        required
      />
      <i className="material-symbols-rounded">{icon}</i>
      {type === 'password' && (
        <i onClick={() => setIsPasswordShown(prevState => !prevState)} className="material-symbols-rounded eye-icon">
          {isPasswordShown ? 'visibility' : 'visibility_off'}
        </i>
      )}
    </div>
  )
}

export default InputField;

Finally, update the content of src/App.jsx with the provided code.

import SocialLogin from "./components/SocialLogin";
import InputField from "./components/InputField";

const App = () => {
  return (
    <div className="login-container">
      <h2 className="form-title">Log in with</h2>
      <SocialLogin />

      <p className="separator"><span>or</span></p>

      <form action="#" className="login-form">
        <InputField type="email" placeholder="Email address" icon="mail" />
        <InputField type="password" placeholder="Password" icon="lock" />

        <a href="#" className="forgot-password-link">Forgot password?</a>
        <button type="submit" className="login-button">Log In</button>
      </form>

      <p className="signup-prompt">
        Don't have an account? <a href="#" className="signup-link">Sign up</a>
      </p>
    </div>
  )
}

export default App;

Related posts

Build A Google Gemini Chatbot with HTML CSS and JavaScript

Bankygold7904

Social Media Chat Application Template

Bankygold7904

Image Editor Application with JavaScript Source Code

Bankygold7904

Leave a Comment

Save my name, email, and website in this browser for the next time I comment.