feat: ✨ github integration in frontend

Author: EstherRocio012

app/features/auth/templates/auth/login_form.html

@@ -44,16 +44,19 @@
                     </div>
                     {% endif %}
 
-                    <!-- Submit + ORCID -->
-                    <div class="d-flex align-items-center justify-content-between mb-4">
-                        {{ form.submit(class="btn btn-primary me-3") }}
+                    <!-- Submit + OAuth -->
+                    <div class="d-flex align-items-center justify-content-between mb-4 gap-2">
+                        {{ form.submit(class="btn btn-primary") }}
+                        <span class="text-muted">or</span>
+                        <a href="{{ url_for('github.login', next=next_url) if next_url else url_for('github.login') }}"
+                        class="btn btn-github d-flex align-items-center">
+                            GitHub
+                        </a>
                         <span class="text-muted">or</span>
                         <a href="{{ url_for('orcid.login', next=next_url) if next_url else url_for('orcid.login') }}"
                         class="btn btn-orcid d-flex align-items-center">
-                            Login with ORCID
+                            ORCID
                         </a>
-
-
                     </div>
 
                     <!-- Signup / Forgot password -->

app/features/auth/templates/auth/signup_form.html

@@ -86,14 +86,19 @@ <h5 class="card-title">Anti-bot filter</h5>
                         </div>
                     </div>
 
-                    <!-- Submit + ORCID -->
-                    <div class="d-flex align-items-center justify-content-between mb-4">
-                        {{ form.submit(class="btn btn-primary me-3") }}
+                    <!-- Submit + OAuth -->
+                    <div class="d-flex align-items-center justify-content-between mb-4 gap-2">
+                        {{ form.submit(class="btn btn-primary") }}
                         <span class="text-muted">or</span>
+                        <a href="{{ url_for('github.login', next=next_url) if next_url else url_for('github.login') }}"
+                           class="btn btn-github d-flex align-items-center"
+                           style="border-radius: 6px;">
+                            GitHub
+                        </a>
                         <a href="{{ url_for('orcid.login', next=next_url) if next_url else url_for('orcid.login') }}"
                            class="btn btn-orcid d-flex align-items-center"
                            style="border-radius: 6px;">
-                            Sign up with ORCID
+                            ORCID
                         </a>
                     </div>
 

app/features/github/.env.example

@@ -0,0 +1,2 @@
+GITHUB_CLIENT_ID=<CHANGE_THIS>
+GITHUB_CLIENT_SECRET=<CHANGE_THIS>

app/features/github/assets/js/scripts.js

@@ -0,0 +1 @@
+console.log("Hi, I am a script loaded from github module");

app/features/github/assets/js/webpack.config.js

@@ -0,0 +1,13 @@
+const path = require('path');
+module.exports = {
+  entry: path.resolve(__dirname, './scripts.js'),
+  output: {
+    filename: 'github.bundle.js',
+    path: path.resolve(__dirname, '../dist'),
+  },
+  resolve: {
+    fallback: {
+    }
+  },
+  mode: 'development',
+};

app/features/github/templates/github/index.html

@@ -0,0 +1,11 @@
+{% extends "base_template.html" %}
+
+{% block title %}View github{% endblock %}
+
+{% block content %}
+
+{% endblock %}
+
+{% block scripts %}
+    <script src="{{ url_for('github.assets', subfolder='js', filename='scripts.js') }}"></script>
+{% endblock %}

app/features/profile/models.py

@@ -11,6 +11,10 @@ class UserProfile(db.Model):
     surname = db.Column(db.String(100), nullable=False)
 
     orcid = db.relationship("Orcid", backref="profile", uselist=False)
+    github = db.relationship("Github", backref="profile", uselist=False)
 
     def get_orcid(self):
         return self.orcid.orcid_id if self.orcid else None
+
+    def get_github(self):
+        return self.github.github_login if self.github else None

app/features/profile/templates/profile/edit.html

@@ -57,6 +57,13 @@ <h3 class="card-title fw-bold">Edit your profile</h3>
                     </div>
                     {% endif %}
 
+                    {% if profile.get_github() %}
+                    <div class="mb-4">
+                        <label class="form-label fw-semibold">GitHub</label>
+                        <input class="form-control" id="github" type="text" value="{{ profile.get_github() }}" readonly>
+                        <div class="form-text">Your GitHub account is linked via GitHub Login.</div>
+                    </div>
+                    {% endif %}
 
                     {% if error %}
                     <div class="alert alert-danger d-flex align-items-center p-3 mb-4">

app/static/css/own.css

@@ -140,6 +140,16 @@ a {
     border-color: #8fbf2f !important;
 }
 
+.btn-github {
+    background-color: #24292f !important;
+    border-color: #24292f !important;
+    color: #fff !important;
+}
+.btn-github:hover {
+    background-color: #1a1e23 !important; /* darker shade on hover */
+    border-color: #1a1e23 !important;
+}
+
 /* ============================================================
    Skeleton placeholders — shared shimmer used for loading states
    in the main page, explore results, and dataset workbench.