Skip to content

added basic form authentication and About page also #26

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

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

added basic form authentication and About page also #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
94e12ec
Reform the About page
Oct 22, 2023
6ca0e02
Merge branch 'main' into formDev
harshkas4na Oct 29, 2023
7555917
added basic authentication to form and About page also
Oct 29, 2023
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
145 changes: 144 additions & 1 deletion frontend/src/pages/About.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,146 @@

.main {
display: flex;
flex-direction: column;
align-items: center;
width: 99vw;
background:radial-gradient(rgb(54, 135, 141),rgb(79, 110, 167));
padding: 10px;
}


/* Add these styles for the improved navbar */
.navbar {
background:linear-gradient(to left,rgb(74, 74, 155),rgb(74, 140, 167));
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
}
.navbar ul{
display: flex;
}

.navbar ul li{
list-style: none;
}

.navbar .logo-img {
display: flex;
margin-right: 20px;
}

.navbar .logo-img img {
width: 60px;
height: 60px;
margin-right: 20px;

}

.navbar h1 {
color: #fff;
font-size: 1.5rem;
align-self:center;
margin: 0;
}

.navbar {
list-style: none;
display: flex;
align-items: center;
margin: 0;
padding: 0;
}



.navbar a {
text-decoration: none;
color: #fff;
font-size: 1rem;
font-weight: 500;
}

/* Add these styles to enhance the hover effect */
.navbar a:hover {
color: #1f4a99;
}


.social-links {
list-style: none;
display: flex;
justify-content: space-evenly;
align-items: center;

}

.social-links {
padding: 10px;
}

.social-links a {
color: black;
margin: 0px 6px;
text-decoration: none;
font-size: 1.2rem;
}


.what-is-gfi{
padding-top:3rem;
}
.what-is-gfi,
.motivation,
.how-to-contribute {

margin: 20px;
text-align: center;
}

.what-is-gfi h2,
.motivation h2,
.how-to-contribute h2 {
font-size: 2rem;
color: #3c30a8f3;
}

.what-is-gfi p,
.motivation p,
.how-to-contribute p {
font-size: 1rem;
line-height: 1.5;
}

.footer {
background: linear-gradient(to left, rgb(74, 74, 155), rgb(74, 140, 167));
padding: 20px;
text-align: center;
/* position: fixed;
*/
position: relative;
width: 99vw;
color: #fff;
/* margin-top: 20px; */
margin-bottom: -20px;
bottom: 0;
}

.footer a {
color: #ffcc00;
text-decoration: none;
font-size: 1.2rem;
}

.footer a:hover {
color: #ff9900;
}

.about-container {
padding: 2rem 12rem;
background: #f3ebeb;
Expand Down Expand Up @@ -39,4 +182,4 @@
.about-container hr {
border-width: 5px;
}
}
}
96 changes: 74 additions & 22 deletions frontend/src/pages/About.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,84 @@ import "./About.css";
import {logo} from './index'



import { FaGithub, FaTwitter } from "react-icons/fa";
import { GoRepo, GoPerson } from "react-icons/go";
import { HiUserGroup } from "react-icons/hi";

const About = () => {
return (
<div className="about-container">
<div className="about-bg">
<img src={logo} className="About-logo" alt="logo" />
<h2>About Club Gamma</h2>
<p>Empowering Student Tech Community</p>
</div>
<hr />
<div className="what-gfi">
<h2>What is GFI</h2>
<p>GitHub advises the usage of "good first issue" (GFI) labels to identify issues that are feasible for newcomers to handle in order to speed up beginner onboarding. However, prior research demonstrates the scarcity and inappropriateness of manually classified GFIs, demonstrating the need for automated suggestions. In this project, we propose <strong>GFI-Web-app</strong>, a <strong>proof-of-concept</strong> for automatic GFI recommendation in reality (available at <a href="https://pending.com">https://pending.com</a>). Project administrators can set up GFI-app to find and tag potential GFIs so that beginners can quickly find issues to fix when submitting their first contributions.</p>
</div>
<hr />
<div className="why-gfi">
<h2>Why GFI</h2>
<p>This website is primarily intended for developers who wish to contribute to open source software but are unsure of where or how to begin. This website gives developers filters so they may search and choose issues and repositories based on the programming languages they are most familiar with. Additionally, they have a choice in the issues they choose to address.</p>
</div>
<hr />

<div className="contribution">
<h2>Contribution Guidelines</h2>
<p>Welcome hackers it is really awesome have you here! Before start contributing with this project make sure you read our <a href="https://github.com/clubgamma/Good_First_Issue_Web_App/blob/main/CODE_OF_CONDUCT.md">Code Of Conduct</a>, it is really important to make this inclusive and open to everyone, otherwise, it would not be awesome to have you here</p>
</div>
<div className="main">
{/* <header className="header navbar">
<div className="logo-img">
<img src={logo} alt="Club Gamma Logo" className="About-logo" />
<div>
<h1>Club Gamma</h1>
<p>Empowering Student Tech Community</p>
</div>
</div>
<div className="social-links">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/form">Add Repo</a></li>
</ul>
<a href="https://github.com/clubgamma">
<FaGithub />
</a>
<a href="https://twitter.com/club_gamma">
<FaTwitter />
</a>
</div>
</header> */}
<section className="what-is-gfi">
<h2>What is GFI?</h2>
<p>
GitHub advises the usage of "good first issue" (GFI) labels to identify
issues that are feasible for newcomers to handle in order to speed up
beginner onboarding. However, prior research demonstrates the scarcity
and inappropriateness of manually classified GFIs, demonstrating the
need for automated suggestions. In this project, we propose
GFI-Web-app, a proof-of-concept for automatic GFI recommendation in
reality. Project administrators can set up GFI-app to find and tag
potential GFIs so that beginners can quickly find issues to fix when
submitting their first contributions.
</p>
</section>
<section className="motivation">
<h2>Motivation for the Project</h2>
<p>
This website is primarily intended for developers who wish to
contribute to open source software but are unsure of where or how to
begin. This website gives developers filters so they may search and
choose issues and repositories based on the programming languages they
are most familiar with. Additionally, they have a choice in the issues
they choose to address.
</p>
</section>
<section className="how-to-contribute">
<h2>How to Contribute</h2>
<ol>
<li>Visit our GitHub repository: <a href="https://github.com/clubgamma/Good_First_Issue_Web_App">Good_First_Issue_Web_App</a></li>
<li>Explore open issues and select a good first issue.</li>
<li>Fork the repository and create a branch for your work.</li>
<li>Make the necessary changes and commit them.</li>
<li>Create a pull request to propose your changes.</li>
<li>Participate in discussions and complete the assigned tasks.</li>
</ol>
</section>
{/* <footer className="footer">
<p>Find us on GitHub: <a href="https://github.com/clubgamma/Good_First_Issue_Web_App">clubgamma/Good_First_Issue_Web_App</a></p>
</footer> */}


</div>
);
};

export default About;






104 changes: 72 additions & 32 deletions frontend/src/pages/Form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,56 @@ const options = [

function Form() {
const [selected, setSelected] = useState();

const [repoName, setRepoName] = useState("");
const [repoLink, setRepoLink] = useState("");
const [description, setDescription] = useState("");
//Fuction handling the tech-stack options
function handleSelect(data) {
setSelected(data);
}

// Function to handle form submission
function handleSubmit(e) {
e.preventDefault();
// Basic client-side validation

let authenticated=true;
// Check if the repoName is empty
if (!repoName) {
alert("Repo Name cannot be empty");
authenticated=false;
}

// Check if the repoLink is empty
if (!repoLink) {
alert("Repo Link cannot be empty");
authenticated=false;
}
const githubRepoPattern = /^https:\/\/github.com\/\w+\/\w+$/;
if (!githubRepoPattern.test(repoLink)) {
alert("Please enter a valid GitHub repository link (e.g., 'https://github.com/username/repo').");
authenticated=false;
}
// Check if description is empty
if (!description) {
alert("Description cannot be empty");
authenticated=false;
}

// Check if a tech stack is selected
if (!selected || selected.length === 0) {
alert("Tech Stack cannot be empty");
authenticated=false;
}

// If the user is authenticated, you can proceed with the form submission
if(authenticated){
return;
}
// Add your form submission logic here
}


return (
<>
{/* HTML for Form */}
Expand All @@ -61,43 +106,38 @@ function Form() {
</div>
<div class="form-container">
<form action="#" autocomplete="off">
<div class="input-group">
<label htmlFor="repoName">Repo Name</label>
<input
type="text"
id="repoName"
placeholder="Repo Name"
required
/>
{/* <img
src="images/icon-error.svg"
class="error-icon no-error"
alt=""
/> */}
<p class="error-text no-error">Repo Name cannot be empty</p>
</div>
<div class="input-group">
<label htmlFor="repoLink">Repo Link</label>
<input
type="text"
id="repoLink"
placeholder="Repo Link"
required
/>
{/* <img
src="images/icon-error.svg"
class="error-icon no-error"
alt=""
/> */}
<p class="error-text no-error">Repo Link cannot be empty</p>
</div>
<div className="input-group">
<label htmlFor="repoName">Repo Name</label>
<input
type="text"
id="repoName"
placeholder="Repo Name"
required
value={repoName}
onChange={(e) => setRepoName(e.target.value)}
/>
</div>
<div className="input-group">
<label htmlFor="repoLink">Repo Link</label>
<input
type="text"
id="repoLink"
placeholder="Repo Link"
required
value={repoLink}
onChange={(e) => setRepoLink(e.target.value)}
/>
</div>


<div class="input-group">
<label for="description">description</label>
<textarea
name="description"
rows="5"
cols="60"
placeholder="Add small description for the Good first Issue"
onChange={(e) => setDescription(e.target.value)}
></textarea>
{/* <img
src="images/icon-error.svg"
Expand Down Expand Up @@ -133,7 +173,7 @@ function Form() {
<p class="error-text no-error">Tech Stack cannot be empty</p>
</div>

<button type="submit" class="">
<button onClick={()=>handleSubmit()}>
Submit
</button>
<p class="form-footer">
Expand Down