Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added signup as react component #79

Merged
merged 6 commits into from
Jun 26, 2024
Merged

added signup as react component #79

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a7b11fd
added signup as react component
Pybite Jun 25, 2024
ba565c0
code update
Pybite Jun 25, 2024
b46b505
code update
Pybite Jun 25, 2024
0a5d8d1
code update
Pybite Jun 26, 2024
a89f0c2
updated header in app
Pybite Jun 26, 2024
003eb5e
updated header linked route
Pybite Jun 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions web-client/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@
-->
<title>React App</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
65 changes: 65 additions & 0 deletions web-client/src/pages/signup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import '../components/signup.css';
import '../global.css';

export default function Signup(){
return (
<>
<header className="site-header">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since the header is common to all pages, we should move it to App.js (this is the component that defines the layout for all pages)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Theres probably a header there already but its very simple. You should replace that one with this one here.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok will do :)

<h1><a href="index.html" className="site-header-heading">FSWD</a></h1>
</header>
<main>
<nav aria-label="breadcrumb" className="breadcrumb">
<ul>
<li><a href="index.html">Home</a></li>
<li><span aria-current="page">Sign-up</span></li>
</ul>
</nav>
<div id="main-container">
<form action="https://jsonplaceholder.typicode.com/users" method="POST" id="sign-up-form">
<div className="form-group">
<label for="sign-up-form-name">Name</label>
<input type="text" id="sign-up-form-name" name="name" required/>
</div>
<div className="form-group">
<label for="sign-up-form-email">Email</label>
<input type="email" name="email" required id="sign-up-form-email"/>
</div>
<div className="form-group">
<label for="sign-up-form-password">Password</label>
<input type="password" name="password" id="sign-up-form-password"/>
</div>
<div className="form-group">
<label for="sign-up-form-dob">Date of Birth</label>
<input type="date" name="dateOfBirth" id="sign-up-form-dob"/>
</div>
<div className="form-group">
<label>Notification Preference</label>
<label><input type="radio" name="notificationPreference"/> Email</label>
<label><input type="radio" name="notificationPreference"/> Phone</label>
<label><input type="radio" name="notificationPreference"/> None</label>
</div>

<div className="form-group">
<label for="sign-up-form-bio">Write About Yourself</label>
<textarea name="biography" id="sign-up-form-bio" rows="3"></textarea>
</div>
<div className="form-group">
<div>
<label><input type="checkbox" name="agreeToTerms" value="true"/> I agree to the terms and conditions</label>
</div>
<div>
<label><input type="checkbox" name="subscribeToNewsLetter"/> Subscribe to newsletter</label>
</div>
</div>
<div>
<input type="submit" value="Sign Up"/>
</div>
</form>
</div>
</main>
<footer className="site-footer">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since the footer is common to all pages, we should move it to App.js (this is the component that defines the layout for all pages)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Pybite I want you to test the app as is. If you had done that you would see there is a double footer at the bottom.

You can npm start to see the app running, then you change the URL, add /signup

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

at first I was having a bit of a issue starting it up but I got it working

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Pybite yeah so you make sure no errors appear in npm start and in the browser (check browser console too)

Copyright &copy; Full Stack Web Dev
</footer>
</>
);
}
5 changes: 5 additions & 0 deletions web-client/src/routes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react';
import App from './App';
import ResetPasswordForm from './components/reset-password-form';
import Messages from './pages/messages';
import Signup from './pages/signup';

const routes = [
{
Expand All @@ -19,6 +20,10 @@ const routes = [
{
path: '/messages',
element: <Messages />
},
{
path: '/signup',
element: <Signup/>
}
]
},
Expand Down
Loading