milleral
/
CTF_Senior_Project
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed UI on profile pages and fixed leaderboard on profile pages

Browse Source
main
Alex 5 months ago
parent e6d17115cd
commit d26a26f78b
13 changed files with 145 additions and 91 deletions
Show Stats Download Patch File Download Diff File

20
CTF/CTF-Frontend/src/app/Helper/User-pfp.ts
Unescape View File

@ -88,7 +88,8 @@ export async function PopulateUserTables(PCData: Contest[]): Promise<void> {
leaderbutton.textContent = 'view'; leaderbutton.textContent = 'view';
leaderbutton.setAttribute('id','ViewLeaderboard'); leaderbutton.setAttribute('id','ViewLeaderboard');
leaderbutton.addEventListener('click', function() { 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); leader.appendChild(leaderbutton);
@ -179,3 +180,20 @@ export async function setNewName(NameInput: string): Promise<void> {
body: JSON.stringify(data) 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
CTF/CTF-Frontend/src/app/leaderboard/leaderboard.component.css
Unescape View File

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

2
CTF/CTF-Frontend/src/app/leaderboard/leaderboard.component.html
Unescape View File

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

25
CTF/CTF-Frontend/src/app/leaderboard/leaderboard.component.ts
Unescape View File

@ -43,14 +43,31 @@ export class LeaderboardComponent {
// get the user data and sort it for table // get the user data and sort it for table
async PopulateTable() { 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 // get all the users, flags, and submissions
this.users = await this.adminProfileService.getAllUsers(getEmail()); this.users = await this.adminProfileService.getAllUsers(AdminEmail);
let result = await this.adminProfileService.getContestFlagsSubs(getEmail(), this.contest); let result = await this.adminProfileService.getContestFlagsSubs(AdminEmail, this.contest);
this.subs = result.subs; this.subs = result.subs;
this.flags = result.flags; this.flags = result.flags;
// get the contest and contestID // 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.contestObj = result.filter((item : Contest) => item.Name === this.contest)[0];
this.contestID = this.contestObj?.ContestID; 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
} }

7
CTF/CTF-Frontend/src/app/user-menu/user-menu.component.css
Unescape View File

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

40
CTF/CTF-Frontend/src/app/user-profile-ac/user-profile-ac.component.css
Unescape View File

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

36
CTF/CTF-Frontend/src/app/user-profile-ac/user-profile-ac.component.html
Unescape View File

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

4
CTF/CTF-Frontend/src/app/user-profile-ac/user-profile-ac.component.ts
Unescape View File

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

40
CTF/CTF-Frontend/src/app/user-profile/user-profile.component.css
Unescape View File

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

7
CTF/CTF-Frontend/src/app/user-profile/user-profile.component.html
Unescape View File

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

11
CTF/CTF-Frontend/src/app/user-profile/user-profile.component.ts
Unescape View File

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

14
CTF/CTF-Server/queries/adminQueries.js
Unescape View File

@ -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);
});
});
}

24
CTF/CTF-Server/routes/contestHandler.js
Unescape View File

@ -1,6 +1,6 @@
import { getContestsFromAdminID, addContest, getActiveContest, endContest, setContestActive, deleteContest, getContestByID } from "../queries/contestQueries.js"; import { getContestsFromAdminID, addContest, getActiveContest, endContest, setContestActive, deleteContest, getContestByID } from "../queries/contestQueries.js";
import { AdminorUser } from "../server.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"; import { Router } from "express";
const router = Router(); 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; export default router;

Write Preview
Loading…
Cancel
Save