From c93821cba78652f49e1f4200edf4a980c8aaec80 Mon Sep 17 00:00:00 2001 From: Mani Date: Tue, 22 Jun 2021 16:51:22 +0200 Subject: [PATCH 1/4] Configured the recover password page Regarding #11 --- .../src/components/login/RecoverPassword.js | 56 ++++++++++++++++ .../components/login/RecoverPasswordStyle.css | 67 +++++++++++++++++++ frontend/src/components/login/loginstyle.css | 4 +- frontend/src/routes/PublicRoutes.js | 3 +- 4 files changed, 126 insertions(+), 4 deletions(-) create mode 100644 frontend/src/components/login/RecoverPassword.js create mode 100644 frontend/src/components/login/RecoverPasswordStyle.css diff --git a/frontend/src/components/login/RecoverPassword.js b/frontend/src/components/login/RecoverPassword.js new file mode 100644 index 00000000..c35f6e6f --- /dev/null +++ b/frontend/src/components/login/RecoverPassword.js @@ -0,0 +1,56 @@ +import './RecoverPasswordStyle.css'; +import { useContext } from 'react'; +import slugs from 'resources/slugs'; +import { GlobalContext } from 'hooks/GlobalContext'; +import React from 'react'; + +function RecoverPassword() { + const [, setState] = useContext(GlobalContext); + + return ( +
+
+
setState({ userIsLoggedIn: true })} + > +
+
+

Forgot Your Password ?

+
+
+ +
+
+

+ Don't fret! Just type in your email and we will send you a code to + reset the password +

+
+ + + + + + +
+
+
+
+ ); +} + +export default RecoverPassword; diff --git a/frontend/src/components/login/RecoverPasswordStyle.css b/frontend/src/components/login/RecoverPasswordStyle.css new file mode 100644 index 00000000..db26381c --- /dev/null +++ b/frontend/src/components/login/RecoverPasswordStyle.css @@ -0,0 +1,67 @@ +/* Stylefile for the RecoverPasswordComponent. */ + +/* Vertically Centering Container */ +.flex-container-recover { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + height: 100%; + overflow: auto; + color: 'white'; + background: radial-gradient(#54386e, #6b26af, #5d0785); +} + +/* Bordered form */ +form.recover { + display: flex; + flex-direction: column; + background-color: #ffffff; + border: 3px solid #cf9bff; + margin: auto; + border-radius: 25px; + max-width: 800px; +} +button { + background-color: #8a00e5; +} + +/* Full-width inputs */ +input[type='text'].recover { + width: 100%; + padding: 12px 20px; + margin: 8px 0; + display: inline-block; + border: 1px solid #cf9bff; + box-sizing: border-box; + border-radius: 10px; +} + +/* Making the selected text field appearance also rounded */ +input.recover:focus { + outline: none; + box-shadow: 0 0 0 2px; +} + +/* Set a style for all buttons */ +button.recover { + color: white; + padding: 14px 20px; + margin: 8px 0; + border: none; + cursor: pointer; + width: 100%; + border-radius: 10px; +} + +/* Add a hover effect for buttons */ +button.recover:hover { + opacity: 0.8; +} + +/* Add padding to containers */ +.recoverpassword-container { + padding: 16px; + max-width: 500px; + margin: auto; +} diff --git a/frontend/src/components/login/loginstyle.css b/frontend/src/components/login/loginstyle.css index 0ebbd157..6e827945 100644 --- a/frontend/src/components/login/loginstyle.css +++ b/frontend/src/components/login/loginstyle.css @@ -9,9 +9,7 @@ height: 100%; overflow: auto; color: 'white'; - background: radial-gradient(circle at top, - #000000,#1b1534,#4d217a,#643082 - );; + background: radial-gradient(circle at top, #000000, #1b1534, #4d217a, #643082); } /* Bordered form */ diff --git a/frontend/src/routes/PublicRoutes.js b/frontend/src/routes/PublicRoutes.js index 38238d21..8d68ee00 100644 --- a/frontend/src/routes/PublicRoutes.js +++ b/frontend/src/routes/PublicRoutes.js @@ -8,13 +8,14 @@ import { Redirect, Route, Router, Switch, useHistory } from 'react-router-dom'; import SLUGS from 'resources/slugs'; import Registration from 'components/login/Registration.js'; import LoginComponent from 'components/login/LoginComponent'; +import RecoverPassword from 'components/login/RecoverPassword'; function PublicRoutes() { return ( -
forgotPassword
} /> + From 4f6359f733697d7dfa2ce38ec744319de84bda32 Mon Sep 17 00:00:00 2001 From: Mani Date: Tue, 22 Jun 2021 18:34:27 +0200 Subject: [PATCH 2/4] Changes made on the naming convention of the func Regarding #11, worked on the reviewed changes --- frontend/src/components/login/RecoverPassword.js | 4 ++-- frontend/src/routes/PublicRoutes.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/login/RecoverPassword.js b/frontend/src/components/login/RecoverPassword.js index c35f6e6f..21dc9ac3 100644 --- a/frontend/src/components/login/RecoverPassword.js +++ b/frontend/src/components/login/RecoverPassword.js @@ -4,7 +4,7 @@ import slugs from 'resources/slugs'; import { GlobalContext } from 'hooks/GlobalContext'; import React from 'react'; -function RecoverPassword() { +function RecoverPasswordComponent() { const [, setState] = useContext(GlobalContext); return ( @@ -53,4 +53,4 @@ function RecoverPassword() { ); } -export default RecoverPassword; +export default RecoverPasswordComponent; diff --git a/frontend/src/routes/PublicRoutes.js b/frontend/src/routes/PublicRoutes.js index 8d68ee00..a653e547 100644 --- a/frontend/src/routes/PublicRoutes.js +++ b/frontend/src/routes/PublicRoutes.js @@ -8,14 +8,14 @@ import { Redirect, Route, Router, Switch, useHistory } from 'react-router-dom'; import SLUGS from 'resources/slugs'; import Registration from 'components/login/Registration.js'; import LoginComponent from 'components/login/LoginComponent'; -import RecoverPassword from 'components/login/RecoverPassword'; +import RecoverPasswordComponent from 'components/login/RecoverPassword'; function PublicRoutes() { return ( - + From 1467987398b239b3fed72e3f42af0767c57572bd Mon Sep 17 00:00:00 2001 From: Mani Date: Tue, 22 Jun 2021 19:53:46 +0200 Subject: [PATCH 3/4] Updating filename Regarding #100, making changes on the reviewed code --- frontend/src/routes/PublicRoutes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/routes/PublicRoutes.js b/frontend/src/routes/PublicRoutes.js index a653e547..a12f14c0 100644 --- a/frontend/src/routes/PublicRoutes.js +++ b/frontend/src/routes/PublicRoutes.js @@ -8,7 +8,7 @@ import { Redirect, Route, Router, Switch, useHistory } from 'react-router-dom'; import SLUGS from 'resources/slugs'; import Registration from 'components/login/Registration.js'; import LoginComponent from 'components/login/LoginComponent'; -import RecoverPasswordComponent from 'components/login/RecoverPassword'; +import RecoverPasswordComponent from 'components/login/RecoverPasswordComponent'; function PublicRoutes() { return ( From 13aaf84f8b36c89881613f45aa18555fc9fee2d2 Mon Sep 17 00:00:00 2001 From: Mani Date: Tue, 22 Jun 2021 20:03:37 +0200 Subject: [PATCH 4/4] Renaming the file --- .../login/{RecoverPassword.js => RecoverPasswordComponent.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename frontend/src/components/login/{RecoverPassword.js => RecoverPasswordComponent.js} (100%) diff --git a/frontend/src/components/login/RecoverPassword.js b/frontend/src/components/login/RecoverPasswordComponent.js similarity index 100% rename from frontend/src/components/login/RecoverPassword.js rename to frontend/src/components/login/RecoverPasswordComponent.js