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

Login Options Not Closing & Mode Button Hidden After Login #125

Open
wants to merge 5 commits into
base: feature/webiu-2024
Choose a base branch
from
Open

Login Options Not Closing & Mode Button Hidden After Login #125

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
154ff1c
Display message when there are no results.
shilpa053020 Jan 6, 2025
d79032d
Fixed : Display error message for internal errors and no data in pull…
shilpa053020 Jan 7, 2025
2f761ed
Updated the error message and spinner to the center
shilpa053020 Jan 8, 2025
b592a98
Merge branch 'feature/webiu-2024' of https://github.com/shilpa053020/…
shilpa053020 Jan 9, 2025
4263f71
Updated ui
shilpa053020 Jan 9, 2025
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 webiu-server/controllers/contributorController.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ const getAllContributors = async (req, res) => {
let finalResponse = {};
const orgName = 'c2siorg';
const repositories = await fetchRepositories(orgName);
console.log(repositories);


if (!repositories) {
return res.status(500).json({ error: 'Failed to fetch repositories' });
Expand Down
67 changes: 41 additions & 26 deletions webiu-ui/src/app/components/navbar/navbar.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
<div class="navbar">
<a href="/" class="logo-link">
<img src="../../../assets/c2silogo-dark_no_bg.png" alt="C2SI Logo" class="logo" />
<img
src="../../../assets/c2silogo-dark_no_bg.png"
alt="C2SI Logo"
class="logo"
/>
</a>

<div [ngClass]="{ navbar__menu: true, open: isMenuOpen }" id="navbarMenu">
<div class="navbar__menu__items" routerLink="/">
<img src="../../../assets/home.svg" alt="Home Icon" />
Expand All @@ -28,36 +32,47 @@
<img src="../../../assets/gsoc.svg" alt="GSoC Icon" />
<p>GSoC</p>
</div>

<button class="navbar__menu__items Login_Logout" (click)="toggleLoginOptions()">
<img [src]="isLoggedIn ? '../../../assets/logout.svg' : '../../../assets/login.svg'"
alt="{{ isLoggedIn ? 'Logout Icon' : 'Login Icon' }}"

<button
class="navbar__menu__items Login_Logout"
(click)="toggleLoginOptions()"
>
<img
[src]="
isLoggedIn
? '../../../assets/logout.svg'
: '../../../assets/login.svg'
"
alt="{{ isLoggedIn ? 'Logout Icon' : 'Login Icon' }}"
class="login-logout-icon"
/>
<p>{{ isLoggedIn ? 'Logout' : 'Login' }}</p>
<p>{{ isLoggedIn ? "Logout" : "Login" }}</p>
</button>
<p *ngIf="isLoggedIn">Welcome, {{ user.name }}!</p>
<div *ngIf="showLoginOptions && !isLoggedIn" class="login-options">

<p *ngIf="isLoggedIn">Welcome, {{ user.name }}!</p>

<div *ngIf="showLoginOptions && !isLoggedIn" class="login-options">
<button (click)="loginWithGoogle()">
<p>Login with Google</p>
<p>Login with Google</p>
</button>
<button (click)="loginWithGitHub()">
<p>Login with GitHub</p>
</button>
</div>



<button class="sun-moon-toggle" aria-label="Toggle color mode" title="Toggle color mode" (click)="toggleMode()">
<div class="sun" [class.visible]="isSunVisible"></div>

<div class="moon" [class.visible]="!isSunVisible">
<div class="star"></div>
<div class="star small"></div>
</div>
<p>Login with GitHub</p>
</button>
</div>

<button
class="sun-moon-toggle"
aria-label="Toggle color mode"
title="Toggle color mode"
(click)="toggleMode()"
>
<div class="sun" [class.visible]="isSunVisible"></div>

<div class="moon" [class.visible]="!isSunVisible">
<div class="star"></div>
<div class="star small"></div>
</div>
</button>
</div>

<div class="navigation__buttons" (click)="toggleMenu()">
Expand All @@ -70,4 +85,4 @@
<img *ngIf="isMenuOpen" src="../../../assets/cross.svg" alt="cross" />
</div>
</div>
</div>
</div>
2 changes: 1 addition & 1 deletion webiu-ui/src/app/components/navbar/navbar.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.navbar {
width: 100%;
display: flex;
padding: 10px 50px;
padding: 10px 20px;
justify-content: space-between;
align-items: center;
background: var(--navbar-bg);
Expand Down
15 changes: 14 additions & 1 deletion webiu-ui/src/app/components/navbar/navbar.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { Component, HostListener, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Router, RouterModule } from '@angular/router';
import { ThemeService } from '../../services/theme.service';
Expand Down Expand Up @@ -68,4 +68,17 @@ export class NavbarComponent implements OnInit {

window.location.href = 'http://localhost:5000/auth/github';
}
// Close login options if clicked outside
@HostListener('document:click', ['$event'])
onClickOutside(event: MouseEvent): void {
const loginOptionsElement = document.querySelector('.login-options');
const loginButton = document.querySelector('.Login_Logout');

// If the click is outside of the login options or login button, close the login options
if (this.showLoginOptions && !loginOptionsElement?.contains(event.target as Node) && !loginButton?.contains(event.target as Node)) {
this.showLoginOptions = false;
}
}

}

70 changes: 52 additions & 18 deletions webiu-ui/src/app/page/contributor-search/contributor-search.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,78 +1,112 @@
<div style="padding: 20px;">
<div style="padding: 20px">
<!-- Loading -->
<div class="contributors-card-container">
<i
class="fa fa-spinner fa-spin loadspinner"
*ngIf="loading"></i>
</div>

<!-- Toggle Buttons for Issues and Pull Requests -->
<div class="action-bar">
<div class="action-bar" *ngIf="!errorMessage && !loading" >
<div class="toggle-buttons">
<button
(click)="toggleView('issues')"
[class.active]="activeView === 'issues'"
class="toggle-button"
>
<i class="fas fa-circle-notch icon-gap"></i> Issues Created: {{ filteredIssues.length }}
<i class="fas fa-circle-notch icon-gap"></i> Issues Created:
{{ filteredIssues.length }}
</button>
<button
(click)="toggleView('pullRequests')"
[class.active]="activeView === 'pullRequests'"
class="toggle-button"
>
<i class="fas fa-code-branch icon-gap"></i> Pull Requests: {{ filteredPullRequests.length }}
<i class="fas fa-code-branch icon-gap"></i> Pull Requests:
{{ filteredPullRequests.length }}
</button>
</div>
<div class="filter-section">
<p>Filter by repo</p>
<p class="filter-name">Filter by repo</p>
<select class="repository-select" (change)="onRepoFilterChange($event)">
<option value="">All</option>
<option *ngFor="let repo of uniqueRepositories" [value]="repo">{{ repo }}</option>
<option *ngFor="let repo of uniqueRepositories" [value]="repo">
{{ repo }}
</option>
</select>
</div>
</div>

<!-- User Profile Section -->
<div class="main-container">
<div *ngIf="userProfile" class="user-profile">
<img [src]="userProfile.avatar_url" alt="Profile Picture" class="profile-picture" />
<img
[src]="userProfile.avatar_url"
alt="Profile Picture"
class="profile-picture"
/>
<h3 class="username">{{ userProfile.login }}</h3>
<button (click)="openGitHubProfile(userProfile.html_url)" class="github-button">
<button
(click)="openGitHubProfile(userProfile.html_url)"
class="github-button"
>
<i class="fab fa-github github-icon"></i>
<span class="username">{{ userProfile.login }}</span>
</button>
</div>

<!-- Display Issues or Pull Requests Based on Active View -->
<div *ngIf="activeView === 'issues'" class="data-section">
<ul class="data-list">
<ul
class="data-list"
*ngIf="filteredIssues.length > 0; else noIssuesMessage"
>
<li *ngFor="let issue of filteredIssues" class="data-item">
<ng-container *ngIf="issue.closed_at; else openIssue">
<i class="far fa-check-circle" style="color: #0056b3; font-size: 20px;"></i>
<i class="far fa-check-circle icon-closed"></i>
</ng-container>
<ng-template #openIssue>
<i class="fas fa-circle-notch icon-gap" style="color:green;font-size: 20px"></i>
<i class="fas fa-circle-notch icon-open"></i>
</ng-template>
<a [href]="issue.html_url" target="_blank" rel="noopener noreferrer">
{{ issue.title }}
</a>
<p>{{ formatLastUpdated(issue.updated_at) }}</p>
</li>
</ul>
<ng-template #noIssuesMessage>
<p class="no-data-message" *ngIf="!loading && !errorMessage">
No issues found for this contributor
</p>
</ng-template>
</div>

<div *ngIf="activeView === 'pullRequests'" class="data-section">
<ul class="data-list">
<ul
class="data-list"
*ngIf="filteredPullRequests.length > 0; else noPullRequestMessage"
>
<li *ngFor="let pr of filteredPullRequests" class="data-item">
<i class="fa-solid fa-code-pull-request" style="color: green;font-size: 18px;"></i>
<i class="fa-solid fa-code-pull-request icon-open"></i>
<a [href]="pr.html_url" target="_blank" rel="noopener noreferrer">
{{ pr.title }}
</a>
<p>{{ formatLastUpdated(pr.updated_at) }}</p>
</li>
</ul>
<ng-template #noPullRequestMessage>
<p class="no-data-message" *ngIf="!loading && !errorMessage">
No pull requests found for this contributor
</p>
</ng-template>
</div>
</div>

<!-- No data message -->
<!-- Error message while fetching-->
<p
*ngIf="!loading && !errorMessage && filteredIssues.length === 0 && filteredPullRequests.length === 0"
class="no-data-message"
*ngIf="!loading && !hasData && !filteredIssues.length && !filteredPullRequests.length"
class="error-message"
>
No issues or pull requests found for this contributor.
</p>
{{errorMessage}}
</p>
</div>
Loading
Loading