fixed UI on profile pages and fixed leaderboard on profile pages

main
Alex 5 months ago
parent e6d17115cd
commit d26a26f78b

@ -88,7 +88,8 @@ export async function PopulateUserTables(PCData: Contest[]): Promise<void> {
leaderbutton.textContent = 'view';
leaderbutton.setAttribute('id','ViewLeaderboard');
leaderbutton.addEventListener('click', function() {
//Popup('leaderboard.html' ,getEmail(), 'ContestName=' + contest.Name); Uncomment when leaderboard is implemented
sessionStorage.setItem('ContestString', contest.Name);
Popup('/leaderboard');
});
leader.appendChild(leaderbutton);
@ -179,3 +180,20 @@ export async function setNewName(NameInput: string): Promise<void> {
body: JSON.stringify(data)
});
}
// get the current username of the user
export async function getUsername(): Promise<any> {
const data = { email: getEmail() };
const res = await fetch('api/users/getUsername', {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(data)
});
if (res.ok) {
const ret = await res.json();
return ret;
}
}

@ -2,7 +2,7 @@
Alex Miller
Jordan Latimer
CSS for Profile Page User Side
CSS for Leaderboard
*/
body {

@ -23,7 +23,7 @@
</thead>
<tbody id="LeaderTBody">
<tr *ngFor="let user of users">
<td>{{ getRank() - 50 }}</td>
<td>{{ getRank() - 12 }}</td>
<td>{{ user.Name }}</td>
<td>{{ user.Flags }}</td>
</tr>

@ -43,14 +43,31 @@ export class LeaderboardComponent {
// get the user data and sort it for table
async PopulateTable() {
// get the admin from the user
let AdminEmail: string = '';
const data = { email: getEmail() };
const res = await fetch('api/contests/getAdminEmail', {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(data)
});
if (res.ok) {
const ret = await res.json();
AdminEmail = ret;
}
// get all the users, flags, and submissions
this.users = await this.adminProfileService.getAllUsers(getEmail());
let result = await this.adminProfileService.getContestFlagsSubs(getEmail(), this.contest);
this.users = await this.adminProfileService.getAllUsers(AdminEmail);
let result = await this.adminProfileService.getContestFlagsSubs(AdminEmail, this.contest);
this.subs = result.subs;
this.flags = result.flags;
// get the contest and contestID
result = await this.adminProfileService.getContests(getEmail());
result = await this.adminProfileService.getContests(AdminEmail);
this.contestObj = result.filter((item : Contest) => item.Name === this.contest)[0];
this.contestID = this.contestObj?.ContestID;
@ -74,7 +91,7 @@ export class LeaderboardComponent {
}
}
}
this.users = this.users.sort((a,b) => a.Flags + b.Flags);
this.users = this.users.sort((a,b) => a.Flags + b.Flags); // sort the users
}

@ -1,5 +1,5 @@
.body {
height: 98vh;
height: 96vh;
display: grid;
/* columns and rows sizes */
@ -23,6 +23,9 @@ html {
margin: 50px;
text-align: center;
}
#Header * {
margin: 10px;
}
#Header input {
height: 25px;
width: 150px;
@ -40,7 +43,7 @@ html {
grid-column: 1/4;
grid-row: 2/6;
margin: 50px;
height: 500px;
height: 350px;
text-align: center;
background-color: green;
}

@ -6,7 +6,7 @@
*/
body {
height: 98vh;
height: 97vh;
display: grid;
/* columns and rows sizes */
@ -27,6 +27,9 @@ html {
margin: 50px;
text-align: center;
}
#Header * {
margin: 10px;
}
#Header input {
height: 25px;
width: 150px;
@ -44,7 +47,7 @@ html {
grid-column: 1/4;
grid-row: 2/6;
margin: 50px;
height: 500px;
height: 350px;
text-align: center;
background-color: green;
}
@ -60,6 +63,7 @@ html {
grid-column: 5/7;
grid-row: 2/3;
margin: 50px;
margin-bottom: 0px;
text-align: center;
background-color: green;
}
@ -69,12 +73,17 @@ html {
/* Usernames */
#Username {
grid-row: 3/5;
grid-row: 3/4;
grid-column: 5/7;
background-color: green;
text-align: center;
margin: 50px;
margin-left: 50px;
margin-right: 50px;
margin-top: 25px;
}
#Name {
margin: 10px;
}
#generate {
background-color: blue;
color: white;
@ -113,26 +122,3 @@ h1 {
display: inline;
font-weight: bold;
}
/* Leaderboard popup window */
#Leaderboard {
text-align: center;
}
#Leaderboard h1 {
grid-row: 1/2;
grid-column: 2/5;
text-align: center;
}
#Leaderboard h2 {
grid-row: 2/3;
grid-column: 3/4;
text-align: center;
color: white;
}
#LeaderTable {
grid-column: 2/6;
grid-row: 4/5;
margin: 10px;
}

@ -2,18 +2,18 @@
Alex Miller
Jordan Latimer
Profile Page for Users
Profile Page before entering a contest for User
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NMU CTF Profile Page</title>
<title>NMU CTF User Profile Page</title>
</head>
<body>
<!-- Header -->
<div id="Header">
<div id="Header">
<h1> Profile </h1>
<div class="tooltip">
?
@ -27,11 +27,12 @@
</div>
<br>
<br>
<input id="ContestsButt" type="button" value="Back to Contests" (click)="navtoPage()">
<input id="ContestsButt" type="button" value="Back to Contest" (click)="navtoPage()">
<input id="LogoutButt" type="button" value="Logout" (click)="onLogout()">
</div>
<!-- Past contest table -->
<div id="PastContests">
<!-- past contests -->
<div id="PastContests">
<h1> Past Contests </h1>
<div class="tooltip">
?
@ -60,11 +61,11 @@
</tbody>
</table>
</div>
</div>
</div>
<!-- chaning username -->
<div id="Username">
<h1> Edit Username</h1>
<!-- usernames -->
<div id="Username">
<h1> Edit Username </h1>
<div class="tooltip">
?
<span class="tooltipText">
@ -77,22 +78,20 @@
click <span style="color:lawngreen">Set Name</span> to set that as your username
</span>
</div>
<br>
<br>
<!-- Name generator and logout button -->
<!-- Name generator and setname buttons -->
<div id="Name">
<h4 id="Username"> Current Name: {{Username}} </h4>
<input type="text" id="NameInput" [(ngModel)]="NameInput" readonly>
<input id="generate" type="button" value="Generate" (click)="onGetNewName()">
<br>
<br>
<br>
<input id="setname" type="button" value="Set Name" (click)="onSetNewName()">
</div>
</div>
</div>
<!-- users record -->
<div id="Record">
<!-- record -->
<div id="Record">
<h1> Record </h1>
<div class="tooltip">
?
@ -119,6 +118,7 @@
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>

@ -15,8 +15,11 @@ export class UserProfileACComponent {
constructor(private router: Router){}
NameInput: string = '';
Username: string = '';
async ngOnInit(): Promise<void> {
this.NameInput = await loadTable();
this.Username = this.NameInput;
}
navtoPage(): void {
@ -29,6 +32,7 @@ export class UserProfileACComponent {
onSetNewName(): void{
setNewName(this.NameInput);
this.Username = this.NameInput;
}
onLogout(): void{

@ -6,7 +6,7 @@
*/
body {
height: 98vh;
height: 97vh;
display: grid;
/* columns and rows sizes */
@ -27,6 +27,9 @@ html {
margin: 50px;
text-align: center;
}
#Header * {
margin: 10px;
}
#Header input {
height: 25px;
width: 150px;
@ -44,7 +47,7 @@ html {
grid-column: 1/4;
grid-row: 2/6;
margin: 50px;
height: 500px;
height: 350px;
text-align: center;
background-color: green;
}
@ -60,6 +63,7 @@ html {
grid-column: 5/7;
grid-row: 2/3;
margin: 50px;
margin-bottom: 0px;
text-align: center;
background-color: green;
}
@ -69,12 +73,17 @@ html {
/* Usernames */
#Username {
grid-row: 3/5;
grid-row: 3/4;
grid-column: 5/7;
background-color: green;
text-align: center;
margin: 50px;
margin-left: 50px;
margin-right: 50px;
margin-top: 25px;
}
#Name {
margin: 10px;
}
#generate {
background-color: blue;
color: white;
@ -113,26 +122,3 @@ h1 {
display: inline;
font-weight: bold;
}
/* Leaderboard popup window */
#Leaderboard {
text-align: center;
}
#Leaderboard h1 {
grid-row: 1/2;
grid-column: 2/5;
text-align: center;
}
#Leaderboard h2 {
grid-row: 2/3;
grid-column: 3/4;
text-align: center;
color: white;
}
#LeaderTable {
grid-column: 2/6;
grid-row: 4/5;
margin: 10px;
}

@ -78,19 +78,18 @@
click <span style="color:lawngreen">Set Name</span> to set that as your username
</span>
</div>
<br>
<br>
<!-- Name generator and logout button -->
<!-- Name generator and setname buttons -->
<div id="Name">
<h4 id="Username"> Current Name: {{Username}} </h4>
<input type="text" id="NameInput" [(ngModel)]="NameInput" readonly>
<input id="generate" type="button" value="Generate" (click)="onGetNewName()">
<br>
<br>
<br>
<input id="setname" type="button" value="Set Name" (click)="onSetNewName()">
</div>
</div>
<!-- record -->
<div id="Record">
<h1> Record </h1>

@ -1,9 +1,8 @@
import { Component, OnInit } from '@angular/core';
import { loadTable } from '../Helper/User-pfp';
import { gotoPage, logOut } from '../Helper/Helpers';
import { gotoPage, logOut, getEmail } from '../Helper/Helpers';
import { Router } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { getNewName, setNewName } from '../Helper/User-pfp';
import { getNewName, setNewName, getUsername, loadTable } from '../Helper/User-pfp';
@Component({
selector: 'app-user-profile',
@ -16,8 +15,13 @@ export class UserProfileComponent implements OnInit {
constructor(private router: Router){}
NameInput: string = '';
// get the users current username
Username : string = '';
async ngOnInit(): Promise<void> {
this.NameInput = await loadTable();
this.Username = this.NameInput;
}
navtoPage(): void {
@ -30,6 +34,7 @@ export class UserProfileComponent implements OnInit {
onSetNewName(): void{
setNewName(this.NameInput);
this.Username = this.NameInput;
}
onLogout(): void{

@ -27,3 +27,17 @@ export async function getAdminID(email) {
});
});
}
// get the email of the Admin with the AdminID
export async function getEmailFromAdminID(AID) {
return new Promise((resolve,reject) => {
const query = 'SELECT Email FROM Admins WHERE AdminID = ?';
con.query(query, [AID], (err,row) => {
if (err) {
console.error(err.message);
reject(err);
}
resolve(row[0].Email);
});
});
}

@ -1,6 +1,6 @@
import { getContestsFromAdminID, addContest, getActiveContest, endContest, setContestActive, deleteContest, getContestByID } from "../queries/contestQueries.js";
import { AdminorUser } from "../server.js";
import {getAdminID, getAdminFromUser} from "../queries/adminQueries.js";
import {getAdminID, getAdminFromUser, getEmailFromAdminID} from "../queries/adminQueries.js";
import { Router } from "express";
const router = Router();
@ -137,4 +137,26 @@ router.post('/getActiveContest', async (req, res) => {
}
});
// get the Admin email whether Admin or User
router.post('/getAdminEmail', async (req,res) => {
const { email } = req.body;
let AdminEmail = '';
try {
const table = await AdminorUser(email);
if (table === 'Users') {
let Admin = await getAdminFromUser(email);
const AdminID = Admin.AdminID;
AdminEmail = await getEmailFromAdminID(AdminID);
res.json(AdminEmail);
}
else {
res.json(email);
}
}
catch (err) {
console.error(err.message);
return res.status(500).json({ error: 'error getting email' });
}
})
export default router;

Loading…
Cancel
Save