Log in and Signup pages added #142

Siddhesh777 · 2022-04-06T09:41:34Z

Issue that this pull request solves

Closes: #117

Proposed changes

Added Login and Signup pages.

Types of changes

Put an x in the boxes that apply

Bugfix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Documentation update (Documentation content changed)
Other (please describe):

Checklist

Put an x in the boxes that apply

My code follows the style guidelines of this project
I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas
I have made corresponding changes to the documentation
My changes generate no new warnings

Screenshots

Please attach the screenshots of the changes made in case of change in user interface

Siddhesh777 · 2022-04-06T09:43:39Z

hey @praveenscience
I have made Login and Signup Pages
Now we can successfully turn to Firebase authentication.
If you think there is a need to change UI, you can create issue for that.

I have added Login and Signup Pages.
I also used react-routers to load them.

praveenscience

Excellent, but can we please please have the code formatted with Prettier & ES Lint? 😁 We're using this config: My Visual Studio Code Settings

Siddhesh777 · 2022-04-06T10:15:57Z

yeah sure @praveenscience

praveenscience · 2022-04-06T10:24:36Z

src/App.js

+
+export default function App() {
+  return (
+    <>


No need of this. :)

praveenscience · 2022-04-06T10:24:49Z

src/components/Header/Header.js

@@ -15,6 +16,9 @@ const Header = ({ ChangePage, CurrentPage, Resume }) => {
          />
        ))}
      </ul>
+      <Link to="/login" className="btn btn-primary btn-sm col-1">
+          Login


Prettier 2 space indentation, please?

Sorry I didn't git this one @praveenscience

praveenscience · 2022-04-06T10:25:11Z

src/pages/LoginPage/index.js

@@ -0,0 +1,41 @@
+import React from "react";
+import "./index.css";


Convert to SCSS, and add it there.

Siddhesh777 · 2022-04-06T10:38:22Z

@praveenscience
I think I have made all the requested changes.
If there's more, let me know.

praveenscience · 2022-04-06T10:40:30Z

There are still couple of changes, I'll take care of them... Will do a check and merge this, alright?

Siddhesh777 · 2022-04-06T10:42:49Z

Yeah fine @praveenscience
I will raise issue for implementing firebase auth ,fine ?

praveenscience · 2022-04-06T10:46:15Z

@Siddhesh777 yea, go for it.

Siddhesh777 · 2022-04-07T03:39:33Z

hey @praveenscience
It will be great help if you add level3 label
As I have created two react pages with good css and also linked them in projects with react routers.
Still its totally your wish😅

Siddhesh777 · 2022-04-09T05:40:23Z

hey @praveenscience and @code-reaper08
Can you please merge this PR?
If there are any changes supposed to be made please let me know.
I want to work on issues #145 #144 and #143 those need this PR to be merged.
If any changes are required, let me know,I will be more than happy to resolve them 😁

praveenscience · 2022-04-10T08:22:08Z

Yea, I am giving priorities to this before merging any....

AbhipsaGuru1012 · 2022-04-10T17:09:02Z

hey @praveenscience and @code-reaper08 Can you please merge this PR? If there are any changes supposed to be made please let me know. I want to work on issues #145 #144 and #143 those need this PR to be merged. If any changes are required, let me know,I will be more than happy to resolve them 😁

@Siddhesh777 can you please add validations to the forms if possible?

Siddhesh777 · 2022-04-10T17:11:02Z

hey @AbhipsaGuru1012
I have created a new issue for the validation.
Else It would have been very tedious work for me.

AbhipsaGuru1012 · 2022-04-10T17:50:58Z

hey @AbhipsaGuru1012 I have created a new issue for the validation. Else It would have been very tedious work for me.

Okay, you can take that up in the authentication issue that you have created.

You can add this type of custom validation

Siddhesh777 · 2022-04-11T04:38:34Z

hey @AbhipsaGuru1012
I don't know how to validate the form.
We can create a issue for it .

code-reaper08 · 2022-04-11T05:21:34Z

hey @AbhipsaGuru1012 I don't know how to validate the form. We can create a issue for it .

You can work on form validation in this PR itself to make it a complete thing, since form validation is a pretty small piece of work.

What you say @praveenscience @AbhipsaGuru1012 ?

Siddhesh777 · 2022-04-11T06:35:19Z

hey @AbhipsaGuru1012 @code-reaper08
I have added validation too.
Please review.

AbhipsaGuru1012 · 2022-04-11T13:50:28Z

hey @AbhipsaGuru1012 @code-reaper08 I have added validation too. Please review.

@Siddhesh777 please add the validations in the Sign-Up page as well. Everything else looks fine!

Siddhesh777 · 2022-04-11T14:10:40Z

hey @praveenscience @AbhipsaGuru1012 @code-reaper08
Added validation in signup page too.

praveenscience · 2022-04-11T14:45:24Z

src/pages/SignupPage/index.js

+  const [email,setEmail] = React.useState("");
+  const [password,setPassword] = React.useState("");
+  const [confirmPassword,setConfirmPassword] = React.useState("");
+  const [emailError, setEmailError] = React.useState("");
+  const [passwordError, setPasswordError] = React.useState("");
+  const [confirmPasswordError, setConfirmPasswordError] = React.useState("");
+
+  function handleSubmit() {
+    if (email === "") {
+      setEmailError("Required");
+    } else {
+      setEmailError("");
+    }
+    if (password === "") {
+      setPasswordError("No password provided");
+    } 
+    else {
+      setPasswordError("");
+    }
+    if(confirmPassword === "")
+    {
+      setConfirmPasswordError("No confirm password provided");
+    }
+    else
+    {
+      setConfirmPasswordError("");
+    }
+  }


Can we have one form? And where's the prettier formatting?

praveenscience · 2022-04-11T14:45:58Z

src/pages/SignupPage/index.js

+            className="inputEmail"
            type="email"
            placeholder="Email"
            autocomplete="off"
+            onChange={(e)=> setEmail(e.target.value)}
            required
          />
+          <div className="alert">{emailError}</div>
        </div>
        <div>
          <input
-            className="input"
+            className="inputPassword"
            type="password"
            placeholder="Password"
            autocomplete="off"
+            onChange={(e)=>setPassword(e.target.value)}
            required
          />
+          <div className="alert">{passwordError}</div>
        </div>
        <div>
          <input
-            className="input"
+            className="inputPassword"
            type="password"
            placeholder="Confirm Password"
            autocomplete="off"
+            onChange ={(e)=> setConfirmPassword(e.target.value)}
            required
          />
+          <div className="alert">{confirmPasswordError}</div>
        </div>
        <div className="Submit-form">
          <div>
-            <input className="inputSubmit" type="submit" value="Signup" />
+            <input className="inputSubmit" type="submit" value="Signup" onClick={handleSubmit}/>
          </div>
          <div>


Don't use classless divs and also can we automate this instead of repeating?

praveenscience · 2022-04-11T14:46:22Z

src/pages/SignupPage/index.scss

+.alert {
+  color: red;
+  text-align: left;
+  margin: 0px;
+  margin-left: 12rem;
+  padding: 0px;
+}
+
+.inputEmail {
+  margin-bottom: 0px;
+  border-radius: 10px;
+  outline-width: 0;
+  width: 350px;
+  padding: 0.4rem;
+}
+.inputPassword {
+  margin-bottom: 0px;
+  border-radius: 10px;
+  outline-width: 0;
+  width: 350px;
+  padding: 0.4rem;
+  margin-top: 20px;
+}


We're using CSS. Make sure the entire code is less than 6 lines.

Siddhesh777 · 2022-04-11T15:03:58Z

@praveenscience
Did the changes.
Please review.

praveenscience · 2022-04-12T14:17:13Z

src/components/App.js

@@ -38,7 +38,7 @@ const App = () => {
  const SetSection = (Section, Content) => {
    setAppState({
      ...appState,
-      Resume: { ...appState.Resume, [Section]: Content }
+      Resume: { ...appState.Resume, [Section]: Content },


Configure prettier to not have trailing commas.

praveenscience · 2022-04-12T14:17:21Z

src/components/App.js

+            Set: !appState.Resume.About.ProfilePicture.Set,
+          },
+        },
+      },
+    });


Configure prettier to not have trailing commas.

praveenscience · 2022-04-12T14:17:43Z

src/components/App.js

+                ProfileImage: reader.result,
+              },
+            },
+          },


Configure prettier to not have trailing commas.

praveenscience · 2022-04-12T14:18:14Z

src/components/Header/Header.js


 const Header = ({ ChangePage, CurrentPage, Resume }) => {
  return (
    <nav className="navbar navbar-expand navbar-dark justify-content-between rezume-header">
      <span className="navbar-brand mb-0 h1 col-1">Rezume</span>
      <ul className="navbar-nav">
-        {Object.keys(Resume).map(NavItem => (
+        {Object.keys(Resume).map((NavItem) => (


Configure prettier to not have extra parentheses.

praveenscience · 2022-04-12T14:18:40Z

src/index.js

+      <Route exact path="/" element={<App />}></Route>
+      <Route path="/login" element={<Login />}></Route>
+      <Route path="/signup" element={<Signup />}></Route>


Can we use component instead of element and self close the <Route />?

praveenscience · 2022-04-12T14:20:00Z

src/pages/LoginPage/index.scss

+.inputEmail {
+  margin-bottom: 0px;
+  border-radius: 10px;
+  outline-width: 0;
+  width: 350px;
+  padding: 0.4rem;
+}
+.inputPassword {
+  margin-bottom: 0px;
+  border-radius: 10px;
+  outline-width: 0;
+  width: 350px;
+  padding: 0.4rem;
+  margin-top: 20px;
+}


Better CSS?

praveenscience · 2022-04-12T14:20:19Z

src/pages/LoginPage/index.scss

+  margin-left: 1rem;
+  border-radius: 10px;
+  width: 100px;
+  outline-width: 0;
+  margin-right: 20px;
+  margin-top: 20px;


Better and concise CSS?

praveenscience · 2022-04-12T14:20:48Z

src/pages/SignupPage/index.scss

+.loginform {
+  background-color: #003100;
+  justify-content: center;
+  padding: 2rem;
+  text-align: center;
+  align-items: center;
+  height: 400px;
+  margin: 10rem;
+}


Put the SCSS in the right directory.

praveenscience · 2022-04-12T14:20:58Z

src/pages/SignupPage/index.js

@@ -0,0 +1,73 @@
+import React from "react";
+import "./index.scss";


Put the SCSS in the right directory and do not import it this way.

praveenscience · 2022-04-12T14:21:05Z

src/pages/LoginPage/index.js

@@ -0,0 +1,58 @@
+import React from "react";
+import "./index.scss";


Put the SCSS in the right directory and do not import it this way.

Siddhesh777 · 2022-04-15T05:40:50Z

hey @praveenscience
Can you please merge the PR?
I want to contribute on some more functionalities.

Siddhesh777 · 2022-04-22T16:10:55Z

hey @praveenscience ?

Log in and Signup pages added

c4c4b43

praveenscience added GSSoC22 GirlScript Summer of Code 2022 Level2 Okay, this is a bit ... good work? labels Apr 6, 2022

praveenscience requested changes Apr 6, 2022

View reviewed changes

formatter used

79bf3e5

praveenscience requested changes Apr 6, 2022

View reviewed changes

modified

8fe7b57

praveenscience added Level3 Yep, it's too tough! and removed Level2 Okay, this is a bit ... good work? labels Apr 8, 2022

Validation added

0d7af4d

praveenscience requested a review from AbhipsaGuru1012 April 11, 2022 11:54

validation added in signup page

53862dd

praveenscience requested changes Apr 11, 2022

View reviewed changes

all modifications done

179f92a

praveenscience requested changes Apr 12, 2022

View reviewed changes

Merge branch 'master' into myBranch

eb361bf

praveenscience merged commit 560967f into CatsInTech:master May 30, 2022

		@@ -0,0 +1,41 @@
		import React from "react";
		import "./index.css";

		@@ -0,0 +1,73 @@
		import React from "react";
		import "./index.scss";

		@@ -0,0 +1,58 @@
		import React from "react";
		import "./index.scss";

Log in and Signup pages added #142

Log in and Signup pages added #142

Conversation

Siddhesh777 commented Apr 6, 2022

Issue that this pull request solves

Proposed changes

Types of changes

Checklist

Screenshots

Siddhesh777 commented Apr 6, 2022

praveenscience left a comment

Choose a reason for hiding this comment

Siddhesh777 commented Apr 6, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Siddhesh777 commented Apr 6, 2022

praveenscience commented Apr 6, 2022

Siddhesh777 commented Apr 6, 2022

praveenscience commented Apr 6, 2022

Siddhesh777 commented Apr 7, 2022

Siddhesh777 commented Apr 9, 2022 • edited Loading

praveenscience commented Apr 10, 2022

AbhipsaGuru1012 commented Apr 10, 2022

Siddhesh777 commented Apr 10, 2022 • edited Loading

AbhipsaGuru1012 commented Apr 10, 2022

Siddhesh777 commented Apr 11, 2022

code-reaper08 commented Apr 11, 2022

Siddhesh777 commented Apr 11, 2022

AbhipsaGuru1012 commented Apr 11, 2022

Siddhesh777 commented Apr 11, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Siddhesh777 commented Apr 11, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Siddhesh777 commented Apr 15, 2022

Siddhesh777 commented Apr 22, 2022

Siddhesh777 commented Apr 9, 2022 •

edited

Loading

Siddhesh777 commented Apr 10, 2022 •

edited

Loading

Siddhesh777 commented Apr 11, 2022 •

edited

Loading