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

Create signin.html #110

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Create signin.html #110

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
233 changes: 233 additions & 0 deletions signin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,233 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>codeX100 - Learn Programming</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
/>
<style>
/* styles.css content */

body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
}

/* Navigation Bar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #3498db;
padding: 10px 20px;
}

.logo img {
height: 50px;
}

.hamburger {
display: none;
}

.nav-links {
display: flex;
list-style-type: none;
}

.nav-links li {
margin-right: 20px;
}

.nav-links a {
text-decoration: none;
color: white;
font-weight: bold;
}

.btn {
background-color: #2ecc71;
color: white;
padding: 10px 20px;
border-radius: 5px;
}

/* Register Form Styles */
.register-section {
text-align: center;
padding: 50px;
}

.register-form {
display: inline-block;
text-align: left;
max-width: 400px;
width: 100%;
margin: auto;
}

.register-form input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
}

.btn-primary {
background-color: #3498db;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
}

.oauth-buttons {
display: flex;
justify-content: center;
gap: 10px;
}

.btn-oauth {
text-decoration: none;
color: white;
padding: 10px 20px;
border-radius: 4px;
}

.btn-oauth.google {
background-color: #db4437;
}

.btn-oauth.github {
background-color: #333;
}

@media (max-width: 768px) {
.hamburger {
display: block;
}

.nav-links {
display: none;
}
}
</style>
</head>

<body>
<!-- Navigation Bar -->
<nav class="navbar">
<div class="logo">
<a href="index.html">
<img src="./Images/codex100-logo.png" alt="codeX100 logo" />
</a>
</div>
<div class="hamburger" id="hamburger">
<i class="fas fa-bars"></i>
</div>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="course.html">Courses</a></li>
<li><a href="#">Notes</a></li>
<li><a href="IDE.html">IDE</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="register.html" class="btn">Sign Up</a></li>
<li><a href="#" class="btn">Login</a></li>
</ul>
</nav>

<!-- Registration Form -->
<section class="register-section">
<h2>Create Your Account</h2>
<form action="/register" method="POST" class="register-form" id="registerForm">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />

<label for="password">Password:</label>
<input type="password" id="password" name="password" required />

<button type="submit" class="btn-primary">Register</button>

<p>Or sign up using:</p>
<div class="oauth-buttons">
<a href="/auth/google" class="btn-oauth google">Sign Up with Google</a>
<a href="/auth/github" class="btn-oauth github">Sign Up with GitHub</a>
</div>
</form>
</section>

<script>
// script.js content

document.getElementById('hamburger').addEventListener('click', function () {
const navLinks = document.querySelector('.nav-links');
if (navLinks.style.display === 'none' || navLinks.style.display === '') {
navLinks.style.display = 'block';
} else {
navLinks.style.display = 'none';
}
});

// OAuth configurations using Passport
const passport = require('passport');
const GoogleStrategy = require('passport-google-oauth20').Strategy;
const GitHubStrategy = require('passport-github2').Strategy;

passport.use(
new GoogleStrategy(
{
clientID: 'YOUR_GOOGLE_CLIENT_ID',
clientSecret: 'YOUR_GOOGLE_CLIENT_SECRET',
callbackURL: '/auth/google/callback',
},
(accessToken, refreshToken, profile, done) => {
// Registration or login logic
}
)
);

passport.use(
new GitHubStrategy(
{
clientID: 'YOUR_GITHUB_CLIENT_ID',
clientSecret: 'YOUR_GITHUB_CLIENT_SECRET',
callbackURL: '/auth/github/callback',
},
(accessToken, refreshToken, profile, done) => {
// Registration or login logic
}
)
);

// Google OAuth route
app.get('/auth/google', passport.authenticate('google', { scope: ['profile', 'email'] }));
app.get(
'/auth/google/callback',
passport.authenticate('google', { failureRedirect: '/login' }),
(req, res) => {
// Success handling
res.redirect('/');
}
);

// GitHub OAuth route
app.get('/auth/github', passport.authenticate('github', { scope: ['user:email'] }));
app.get(
'/auth/github/callback',
passport.authenticate('github', { failureRedirect: '/login' }),
(req, res) => {
// Success handling
res.redirect('/');
}
);
</script>
</body>
</html>