From 76464bafaf873d18068fd824b40f5669fdde6569 Mon Sep 17 00:00:00 2001
From: Akash Jha <akashjha412@gmail.com>
Date: Mon, 6 Mar 2023 21:11:15 +0530
Subject: [PATCH] Adding Forgot Password page

---
 com-dict-client/.env.sample                   |  4 -
 .../ForgotPassword/ForgotPassword.css         | 87 +++++++++++++++++++
 .../ForgotPassword/ForgotPassword.js          | 17 ++++
 .../src/components/Login/loginForm.js         |  2 +-
 com-dict-client/src/routes.js                 |  2 +
 5 files changed, 107 insertions(+), 5 deletions(-)
 delete mode 100644 com-dict-client/.env.sample
 create mode 100644 com-dict-client/src/components/ForgotPassword/ForgotPassword.css
 create mode 100644 com-dict-client/src/components/ForgotPassword/ForgotPassword.js

diff --git a/com-dict-client/.env.sample b/com-dict-client/.env.sample
deleted file mode 100644
index 50c326a..0000000
--- a/com-dict-client/.env.sample
+++ /dev/null
@@ -1,4 +0,0 @@
-REACT_APP_FIREBASE_API_KEY = 
-REACT_APP_FIREBASE_PROJECT_ID = 
-REACT_APP_FIREBASE_MESSAGING_SENDER_ID = 
-REACT_APP_FIREBASE_APP_ID = 
\ No newline at end of file
diff --git a/com-dict-client/src/components/ForgotPassword/ForgotPassword.css b/com-dict-client/src/components/ForgotPassword/ForgotPassword.css
new file mode 100644
index 0000000..104fd2d
--- /dev/null
+++ b/com-dict-client/src/components/ForgotPassword/ForgotPassword.css
@@ -0,0 +1,87 @@
+* {
+    margin: 0;
+    box-sizing: border-box;
+    font-family: "CustomFont";
+}
+.page {
+    height: 60vh;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 0.15em;
+}
+
+.cover {
+    background-color: white;
+    width: 70%;
+    height: 50%;
+    position: relative;
+    border-radius: 1em;
+    box-shadow: 0 0.188em 1.550em rgb(156, 156, 156);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+}
+
+input {
+    border: none;
+    background-color: rgb(229, 226, 226);
+    width: 80%;
+    height: 3em;
+    border-radius: 0.9em;
+    text-align: center;
+    padding: 1em;
+    font-size: 0.75em;
+}
+
+input:focus {
+    outline-color: rgb(32, 177, 255);
+}
+
+.login-btn {
+    width: 40%;
+    height: 2em;
+    background-color: rgb(32, 177, 255);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: 0.5s;
+    border-radius: 0.9em;
+    cursor: pointer;
+}
+
+.login-btn:hover { transform: scale(1.25);}
+
+.text {
+    position: relative;
+    bottom: 0.5%;
+}
+
+.hide {
+    position: absolute;
+    transform: scale(0);
+}
+
+@media only screen and (min-device-width: 37em) {
+    .page {
+        font-size: 1em;
+    }
+
+    .cover {
+        width: 60%;
+        height: 70%;
+    }
+}
+
+@media only screen and (min-device-width: 64em) {
+    .page {
+        font-size: 1.25em;
+    }
+
+    .cover {
+        width: 25%;
+        height: 65%;
+    }
+}
diff --git a/com-dict-client/src/components/ForgotPassword/ForgotPassword.js b/com-dict-client/src/components/ForgotPassword/ForgotPassword.js
new file mode 100644
index 0000000..9f71a47
--- /dev/null
+++ b/com-dict-client/src/components/ForgotPassword/ForgotPassword.js
@@ -0,0 +1,17 @@
+import React, {useEffect, useState} from "react";
+import "./ForgotPassword.css"
+
+const ForgotPassword = () => {
+
+    return (
+        <div className="cover">
+            <h1>Password Reset</h1>
+            <input type="emailId" placeholder="Register Email" />
+
+            <div className="login-btn" >Submit</div>
+            
+        </div>
+    )
+}
+
+export default ForgotPassword
\ No newline at end of file
diff --git a/com-dict-client/src/components/Login/loginForm.js b/com-dict-client/src/components/Login/loginForm.js
index aa8be62..bf410c4 100644
--- a/com-dict-client/src/components/Login/loginForm.js
+++ b/com-dict-client/src/components/Login/loginForm.js
@@ -58,7 +58,7 @@ const NormalLoginForm = () => {
           <Checkbox>Remember me</Checkbox>
         </Form.Item>
 
-        <a href="#1" className="login-form-forgot">
+        <a href="/ForgotPassword" className="login-form-forgot">
           Forgot password
         </a>
       </Form.Item>
diff --git a/com-dict-client/src/routes.js b/com-dict-client/src/routes.js
index 10a0924..a3b0911 100644
--- a/com-dict-client/src/routes.js
+++ b/com-dict-client/src/routes.js
@@ -3,6 +3,7 @@ import React from "react";
 import { BrowserRouter as Router, Route, Redirect } from "react-router-dom";
 import HomePage from "./containers/home/home";
 import SignUp from "./containers/signup/signup";
+import ForgotPassword from "./components/ForgotPassword/ForgotPassword"
 import AddWord from "./containers/addWord/addWord";
 import LetterBased from "./containers/dictionary/letterDict";
 import Browse from "./containers/browse/browse";
@@ -18,6 +19,7 @@ export default function Routes() {
     <Router>
       <Route exact path="/" component={HomePage} />
       <Route exact path="/signup" component={SignUp} />
+      <Route exact path="/ForgotPassword" component={ForgotPassword} />
       <Route exact path="/browse" component={Browse} />
       <Route path="/search/:language/:keyword" component={Search} />
       <Route exact path="/Categories" component={Categories} />