From 07492e437790374a63f784d9ba8ccc4a6beeb416 Mon Sep 17 00:00:00 2001
From: praptisharma28 <123169861+praptisharma28@users.noreply.github.com>
Date: Mon, 29 Jan 2024 22:20:08 +0530
Subject: [PATCH 1/2] password generator added

closes #228
---
 React-Password-Generator-master/App.js        |  17 +++
 React-Password-Generator-master/README.md     |  15 +++
 React-Password-Generator-master/index.html    |  27 +++++
 React-Password-Generator-master/index.js      |   6 +
 React-Password-Generator-master/main/Main.css |  39 +++++++
 React-Password-Generator-master/main/Main.jsx | 106 ++++++++++++++++++
 React-Password-Generator-master/nav/Nav.css   |  14 +++
 React-Password-Generator-master/nav/Nav.jsx   |  22 ++++
 React-Password-Generator-master/wave.svg      |   1 +
 9 files changed, 247 insertions(+)
 create mode 100644 React-Password-Generator-master/App.js
 create mode 100644 React-Password-Generator-master/README.md
 create mode 100644 React-Password-Generator-master/index.html
 create mode 100644 React-Password-Generator-master/index.js
 create mode 100644 React-Password-Generator-master/main/Main.css
 create mode 100644 React-Password-Generator-master/main/Main.jsx
 create mode 100644 React-Password-Generator-master/nav/Nav.css
 create mode 100644 React-Password-Generator-master/nav/Nav.jsx
 create mode 100644 React-Password-Generator-master/wave.svg
diff --git a/React-Password-Generator-master/App.js b/React-Password-Generator-master/App.js
new file mode 100644
index 000000000..520e138d3
--- /dev/null
+++ b/React-Password-Generator-master/App.js
@@ -0,0 +1,17 @@
+import React from "react";
+import { Client as Styletron } from 'styletron-engine-atomic';
+import { Provider as StyletronProvider } from 'styletron-react';
+import Nav from "./nav/Nav";
+import Main from "./main/Main";
+const engine = new Styletron();
+
+const App = () => {
+    return (
+        <StyletronProvider value={engine} style={{ width: '100%' }}>
+            <Nav />
+            <Main />
+        </StyletronProvider>
+    );
+};
+
+export default App;
\ No newline at end of file
diff --git a/React-Password-Generator-master/README.md b/React-Password-Generator-master/README.md
new file mode 100644
index 000000000..0c4143cab
--- /dev/null
+++ b/React-Password-Generator-master/README.md
@@ -0,0 +1,15 @@
+# React-Password-Generator
+This is React app that generates passwords based on users requirements
+
+<a href="https://ibb.co/7RQm36r"><img src="https://i.ibb.co/8dbZySP/Annotation-2020-08-04-150736.png" alt="Annotation-2020-08-04-150736" border="0" /></a>
+
+## Technologies used
+* React JS
+* Parcel-bundler
+* Base UI 
+
+## How to use?
+* Clone the Repo
+* npm install
+* npm dev (development server)
+* npm build (output in dist folder)
diff --git a/React-Password-Generator-master/index.html b/React-Password-Generator-master/index.html
new file mode 100644
index 000000000..7c3ea48ca
--- /dev/null
+++ b/React-Password-Generator-master/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <style>
+      body {
+        margin: 0px;
+        background-color: #fff;
+        overflow-x: hidden;
+      }
+    </style>
+    <link
+      rel="stylesheet"
+      href="https://cdn.rawgit.com/mfd/09b70eb47474836f25a21660282ce0fd/raw/e06a670afcb2b861ed2ac4a1ef752d062ef6b46b/Gilroy.css"
+    />
+    <meta
+      name="viewport"
+      content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
+    />
+
+    <title>React Password Generator</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/React-Password-Generator-master/index.js b/React-Password-Generator-master/index.js
new file mode 100644
index 000000000..4207ea146
--- /dev/null
+++ b/React-Password-Generator-master/index.js
@@ -0,0 +1,6 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App.js";
+import "@babel/polyfill";
+
+ReactDOM.render(<App />, document.getElementById("root"));
\ No newline at end of file
diff --git a/React-Password-Generator-master/main/Main.css b/React-Password-Generator-master/main/Main.css
new file mode 100644
index 000000000..7a2eaaa11
--- /dev/null
+++ b/React-Password-Generator-master/main/Main.css
@@ -0,0 +1,39 @@
+.left {
+  margin: 20px;
+  width: 40%;
+  border: 1px solid lightgrey;
+}
+
+.box {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  min-height: 200px;
+  padding: 20px;
+  border: 1px solid #ccc;
+}
+
+.right {
+  margin: 20px;
+  width: 40%;
+}
+
+.container {
+  width: 60%;
+  margin: 0px auto;
+  border: 1px solid #ccc;
+  overflow-x: hidden;
+}
+
+.result {
+  width: 60%;
+  margin: 20px auto;
+  color: "blue";
+}
+
+@media (min-width: 320px) and (max-width: 480px) {
+  .container {
+    width: 90%;
+  }
+}
diff --git a/React-Password-Generator-master/main/Main.jsx b/React-Password-Generator-master/main/Main.jsx
new file mode 100644
index 000000000..dc93e94c2
--- /dev/null
+++ b/React-Password-Generator-master/main/Main.jsx
@@ -0,0 +1,106 @@
+import React, { useState, useEffect } from "react";
+import { Slider } from "baseui/slider";
+import { Button, SHAPE } from "baseui/button";
+import generator from "generate-password";
+import { Checkbox, LABEL_PLACEMENT } from "baseui/checkbox";
+import "./main.css";
+
+const Main = () => {
+  const [value, setValue] = useState([10]);
+  const [numbers, setNumbers] = useState(true);
+  const [symbols, setSymbols] = useState(false);
+  const [lower, setLower] = useState(false);
+  const [upper, setUpper] = useState(false);
+  const [similar, setSimilar] = useState(false);
+  const [showResults, setShowResults] = useState(false);
+  const [results, setResults] = useState("");
+
+  const generate = () => {
+    if (symbols || lower || upper || numbers) {
+      var password = generator.generate({
+        length: value,
+        numbers: numbers,
+        uppercase: upper,
+        lowercase: lower,
+        symbols: symbols,
+        excludeSimilarCharacters: similar,
+      });
+      setResults(password);
+      setShowResults(true);
+    } else {
+      alert("Tick atleast one from numbers, symbols, uppercase & lowercase");
+    }
+  };
+
+  return (
+    <div className="container">
+      <h1
+        style={{
+          fontSize: 24,
+          textAlign: "center",
+        }}>
+        Select the length of Password
+      </h1>
+      <Slider
+        value={value}
+        max={20}
+        onChange={({ value }) => value && setValue(value)}
+        onFinalChange={({ value }) => console.log(value)}
+      />
+      <div className="box">
+        <Checkbox
+          checked={numbers}
+          onChange={(e) => setNumbers((prev) => !prev)}
+          labelPlacement={LABEL_PLACEMENT.right}>
+          include numbers
+        </Checkbox>
+        <Checkbox
+          checked={symbols}
+          onChange={(e) => setSymbols((prev) => !prev)}
+          labelPlacement={LABEL_PLACEMENT.right}>
+          include symbols
+        </Checkbox>
+        <Checkbox
+          checked={lower}
+          onChange={(e) => setLower((prev) => !prev)}
+          labelPlacement={LABEL_PLACEMENT.right}>
+          include lowercase
+        </Checkbox>
+        <Checkbox
+          checked={upper}
+          onChange={(e) => setUpper((prev) => !prev)}
+          labelPlacement={LABEL_PLACEMENT.right}>
+          include uppercase
+        </Checkbox>
+        <Checkbox
+          checked={similar}
+          onChange={(e) => setSimilar((prev) => !prev)}
+          labelPlacement={LABEL_PLACEMENT.right}>
+          exclude similar characters
+        </Checkbox>
+      </div>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          width: "100%",
+        }}>
+        <Button
+          style={{ margin: 20, width: "50%", backgroundColor: "#011A31" }}
+          onClick={() => generate()}
+          shape={SHAPE.pill}>
+          Generate
+        </Button>
+      </div>
+      <div className="result">
+        {showResults ? (
+          <p style={{ textAlign: "center", fontSize: 20, width: "100%" }}>
+            {results}
+          </p>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+export default Main;
diff --git a/React-Password-Generator-master/nav/Nav.css b/React-Password-Generator-master/nav/Nav.css
new file mode 100644
index 000000000..64a6408b3
--- /dev/null
+++ b/React-Password-Generator-master/nav/Nav.css
@@ -0,0 +1,14 @@
+.header {
+  padding: 0px;
+  min-height: 300px;
+  color: white;
+  text-align: center;
+  width: 100%;
+  overflow-x: hidden;
+}
+
+@media (min-width: 320px) and (max-width: 480px) {
+  .header {
+    min-height: 250px;
+  }
+}
diff --git a/React-Password-Generator-master/nav/Nav.jsx b/React-Password-Generator-master/nav/Nav.jsx
new file mode 100644
index 000000000..83c5a9fba
--- /dev/null
+++ b/React-Password-Generator-master/nav/Nav.jsx
@@ -0,0 +1,22 @@
+import React from "react";
+import svg from "../wave.svg";
+import "./Nav.css";
+const Nav = () => {
+  return (
+    <div
+      className="header"
+      style={{
+        backgroundImage: `url(${svg})`,
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+      }}>
+      <h1 style={{ fontSize: 24, textAlign: "center" }}>
+        React Password Generator
+      </h1>
+      <p>Simple tool to generate strong passwords</p>
+    </div>
+  );
+};
+
+export default Nav;
diff --git a/React-Password-Generator-master/wave.svg b/React-Password-Generator-master/wave.svg
new file mode 100644
index 000000000..7b79e85c0
--- /dev/null
+++ b/React-Password-Generator-master/wave.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#011A31" fill-opacity="1" d="M0,192L48,192C96,192,192,192,288,176C384,160,480,128,576,138.7C672,149,768,203,864,197.3C960,192,1056,128,1152,117.3C1248,107,1344,149,1392,170.7L1440,192L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path></svg>
\ No newline at end of file

From 3792478151acb8cb2bb9bcea9b55bdf47d99358e Mon Sep 17 00:00:00 2001
From: praptisharma28 <123169861+praptisharma28@users.noreply.github.com>
Date: Thu, 1 Feb 2024 02:05:08 +0530
Subject: [PATCH 2/2] additions

---
 React-Password-Generator-master/README.md | 51 ++++++++++++++++++-----
 1 file changed, 41 insertions(+), 10 deletions(-)

diff --git a/React-Password-Generator-master/README.md b/React-Password-Generator-master/README.md
index 0c4143cab..01e052790 100644
--- a/React-Password-Generator-master/README.md
+++ b/React-Password-Generator-master/README.md
@@ -1,15 +1,46 @@
 # React-Password-Generator
-This is React app that generates passwords based on users requirements
 
-<a href="https://ibb.co/7RQm36r"><img src="https://i.ibb.co/8dbZySP/Annotation-2020-08-04-150736.png" alt="Annotation-2020-08-04-150736" border="0" /></a>
+## Video Demo
 
-## Technologies used
-* React JS
-* Parcel-bundler
-* Base UI 
+[![Video Demo](https://www.youtube.com/watch?v=WEU9jhG0hSE/0.jpg)](https://www.youtube.com/watch?v=WEU9jhG0hSE)
+
+## Tech Stack
+
+- React
+- HTML
+- CSS
+- JavaScript
+- Parcel-bundler
+- Base UI 
+
+## Cloning the Repository
+
+Clone the repository using the command below:
+
+```bash
+git clone https://github.com/Kritika30032002/ReactCreations.git
+```
+
+Move into the directory where we have the project files:
+
+```bash
+cd ReactCreations\React-Password-Generator>
+```
 
 ## How to use?
-* Clone the Repo
-* npm install
-* npm dev (development server)
-* npm build (output in dist folder)
+
+* Install dependencies
+```bash
+npm install
+```
+
+* Start development server
+```bash
+npm run dev
+```
+
+* Build for production (output in dist folder)
+```bash
+npm run build
+```
+⚠ Then, the development server will be started at http://127.0.0.1:5173/
\ No newline at end of file
