parent
a2ca9bb7a4
commit
c5adde5509
@ -0,0 +1,49 @@
|
|||||||
|
# Ignore node_modules in the Website folder
|
||||||
|
# Compiled output
|
||||||
|
/dist
|
||||||
|
/tmp
|
||||||
|
/out-tsc
|
||||||
|
/bazel-out
|
||||||
|
|
||||||
|
# Node
|
||||||
|
CTF-Frontend/node_modules
|
||||||
|
CTF-Server/node_modules
|
||||||
|
Website/node_modules
|
||||||
|
npm-debug.log
|
||||||
|
yarn-error.log
|
||||||
|
|
||||||
|
# IDEs and editors
|
||||||
|
.idea/
|
||||||
|
.project
|
||||||
|
.classpath
|
||||||
|
.c9/
|
||||||
|
*.launch
|
||||||
|
.settings/
|
||||||
|
*.sublime-workspace
|
||||||
|
|
||||||
|
# Visual Studio Code
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/settings.json
|
||||||
|
!.vscode/tasks.json
|
||||||
|
!.vscode/launch.json
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.history/*
|
||||||
|
|
||||||
|
# Miscellaneous
|
||||||
|
CTF-Frontend/.angular/cache
|
||||||
|
.sass-cache/
|
||||||
|
/connect.lock
|
||||||
|
/coverage
|
||||||
|
/libpeerconnection.log
|
||||||
|
testem.log
|
||||||
|
/typings
|
||||||
|
|
||||||
|
# System files
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
|
|
||||||
|
#environment files
|
||||||
|
.env
|
||||||
|
|
||||||
|
#Vite
|
||||||
|
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
# Editor configuration, see https://editorconfig.org
|
||||||
|
root = true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
charset = utf-8
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
insert_final_newline = true
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
|
||||||
|
[*.ts]
|
||||||
|
quote_type = single
|
||||||
|
ij_typescript_use_double_quotes = false
|
||||||
|
|
||||||
|
[*.md]
|
||||||
|
max_line_length = off
|
||||||
|
trim_trailing_whitespace = false
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
|
||||||
|
"recommendations": ["angular.ng-template"]
|
||||||
|
}
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||||
|
"version": "0.2.0",
|
||||||
|
"configurations": [
|
||||||
|
{
|
||||||
|
"name": "ng serve",
|
||||||
|
"type": "chrome",
|
||||||
|
"request": "launch",
|
||||||
|
"preLaunchTask": "npm: start",
|
||||||
|
"url": "http://localhost:4200/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "ng test",
|
||||||
|
"type": "chrome",
|
||||||
|
"request": "launch",
|
||||||
|
"preLaunchTask": "npm: test",
|
||||||
|
"url": "http://localhost:9876/debug.html"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -0,0 +1,42 @@
|
|||||||
|
{
|
||||||
|
// For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
|
||||||
|
"version": "2.0.0",
|
||||||
|
"tasks": [
|
||||||
|
{
|
||||||
|
"type": "npm",
|
||||||
|
"script": "start",
|
||||||
|
"isBackground": true,
|
||||||
|
"problemMatcher": {
|
||||||
|
"owner": "typescript",
|
||||||
|
"pattern": "$tsc",
|
||||||
|
"background": {
|
||||||
|
"activeOnStart": true,
|
||||||
|
"beginsPattern": {
|
||||||
|
"regexp": "(.*?)"
|
||||||
|
},
|
||||||
|
"endsPattern": {
|
||||||
|
"regexp": "bundle generation complete"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "npm",
|
||||||
|
"script": "test",
|
||||||
|
"isBackground": true,
|
||||||
|
"problemMatcher": {
|
||||||
|
"owner": "typescript",
|
||||||
|
"pattern": "$tsc",
|
||||||
|
"background": {
|
||||||
|
"activeOnStart": true,
|
||||||
|
"beginsPattern": {
|
||||||
|
"regexp": "(.*?)"
|
||||||
|
},
|
||||||
|
"endsPattern": {
|
||||||
|
"regexp": "bundle generation complete"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
# CTFFrontend
|
||||||
|
|
||||||
|
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.3.
|
||||||
|
|
||||||
|
## Development server
|
||||||
|
|
||||||
|
To start a local development server, run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ng serve
|
||||||
|
```
|
||||||
|
|
||||||
|
Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
|
||||||
|
|
||||||
|
## Code scaffolding
|
||||||
|
|
||||||
|
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ng generate component component-name
|
||||||
|
```
|
||||||
|
|
||||||
|
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ng generate --help
|
||||||
|
```
|
||||||
|
|
||||||
|
## Building
|
||||||
|
|
||||||
|
To build the project run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ng build
|
||||||
|
```
|
||||||
|
|
||||||
|
This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
|
||||||
|
|
||||||
|
## Running unit tests
|
||||||
|
|
||||||
|
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ng test
|
||||||
|
```
|
||||||
|
|
||||||
|
## Running end-to-end tests
|
||||||
|
|
||||||
|
For end-to-end (e2e) testing, run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ng e2e
|
||||||
|
```
|
||||||
|
|
||||||
|
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
||||||
|
|
||||||
|
## Additional Resources
|
||||||
|
|
||||||
|
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|
||||||
@ -0,0 +1,104 @@
|
|||||||
|
{
|
||||||
|
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||||
|
"version": 1,
|
||||||
|
"newProjectRoot": "projects",
|
||||||
|
"projects": {
|
||||||
|
"CTF-Frontend": {
|
||||||
|
"projectType": "application",
|
||||||
|
"schematics": {},
|
||||||
|
"root": "",
|
||||||
|
"sourceRoot": "src",
|
||||||
|
"prefix": "app",
|
||||||
|
"architect": {
|
||||||
|
"build": {
|
||||||
|
"builder": "@angular-devkit/build-angular:application",
|
||||||
|
"options": {
|
||||||
|
"outputPath": "dist/ctf-frontend",
|
||||||
|
"index": "src/index.html",
|
||||||
|
"browser": "src/main.ts",
|
||||||
|
"polyfills": [
|
||||||
|
"zone.js"
|
||||||
|
],
|
||||||
|
"tsConfig": "tsconfig.app.json",
|
||||||
|
"assets": [
|
||||||
|
{
|
||||||
|
"glob": "**/*",
|
||||||
|
"input": "public"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"styles": [
|
||||||
|
"src/styles.css",
|
||||||
|
"node_modules/@xterm/xterm/css/xterm.css"
|
||||||
|
],
|
||||||
|
"scripts": []
|
||||||
|
},
|
||||||
|
"configurations": {
|
||||||
|
"production": {
|
||||||
|
"budgets": [
|
||||||
|
{
|
||||||
|
"type": "initial",
|
||||||
|
"maximumWarning": "500kB",
|
||||||
|
"maximumError": "1MB"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "anyComponentStyle",
|
||||||
|
"maximumWarning": "4kB",
|
||||||
|
"maximumError": "8kB"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"outputHashing": "all"
|
||||||
|
},
|
||||||
|
"development": {
|
||||||
|
"optimization": false,
|
||||||
|
"extractLicenses": false,
|
||||||
|
"sourceMap": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"defaultConfiguration": "production"
|
||||||
|
},
|
||||||
|
"serve": {
|
||||||
|
"options":{
|
||||||
|
"proxyConfig": "./proxy.conf.json"
|
||||||
|
},
|
||||||
|
"builder": "@angular-devkit/build-angular:dev-server",
|
||||||
|
"configurations": {
|
||||||
|
"production": {
|
||||||
|
"buildTarget": "CTF-Frontend:build:production"
|
||||||
|
},
|
||||||
|
"development": {
|
||||||
|
"buildTarget": "CTF-Frontend:build:development"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"defaultConfiguration": "development"
|
||||||
|
},
|
||||||
|
"extract-i18n": {
|
||||||
|
"builder": "@angular-devkit/build-angular:extract-i18n"
|
||||||
|
},
|
||||||
|
"test": {
|
||||||
|
"builder": "@angular-devkit/build-angular:karma",
|
||||||
|
"options": {
|
||||||
|
"polyfills": [
|
||||||
|
"zone.js",
|
||||||
|
"zone.js/testing"
|
||||||
|
],
|
||||||
|
"tsConfig": "tsconfig.spec.json",
|
||||||
|
"assets": [
|
||||||
|
{
|
||||||
|
"glob": "**/*",
|
||||||
|
"input": "public"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"styles": [
|
||||||
|
"src/styles.css",
|
||||||
|
"node_modules/@xterm/xterm/css/xterm.css"
|
||||||
|
],
|
||||||
|
"scripts": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"cli": {
|
||||||
|
"analytics": false
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,41 @@
|
|||||||
|
{
|
||||||
|
"name": "ctf-frontend",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"scripts": {
|
||||||
|
"ng": "ng",
|
||||||
|
"start": "ng serve",
|
||||||
|
"build": "ng build",
|
||||||
|
"watch": "ng build --watch --configuration development",
|
||||||
|
"test": "ng test"
|
||||||
|
},
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"dependencies": {
|
||||||
|
"@angular/common": "^19.2.0",
|
||||||
|
"@angular/compiler": "^19.2.0",
|
||||||
|
"@angular/core": "^19.2.0",
|
||||||
|
"@angular/forms": "^19.2.0",
|
||||||
|
"@angular/platform-browser": "^19.2.0",
|
||||||
|
"@angular/platform-browser-dynamic": "^19.2.0",
|
||||||
|
"@angular/router": "^19.2.0",
|
||||||
|
"@xterm/addon-attach": "^0.11.0",
|
||||||
|
"rxjs": "~7.8.0",
|
||||||
|
"socket.io-client": "^4.8.1",
|
||||||
|
"tslib": "^2.3.0",
|
||||||
|
"xterm": "^5.3.0",
|
||||||
|
"zone.js": "~0.15.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@angular-devkit/build-angular": "^19.2.3",
|
||||||
|
"@angular/cli": "^19.2.3",
|
||||||
|
"@angular/compiler-cli": "^19.2.0",
|
||||||
|
"@types/jasmine": "~5.1.0",
|
||||||
|
"jasmine-core": "~5.6.0",
|
||||||
|
"karma": "~6.4.0",
|
||||||
|
"karma-chrome-launcher": "~3.2.0",
|
||||||
|
"karma-coverage": "~2.2.0",
|
||||||
|
"karma-jasmine": "~5.1.0",
|
||||||
|
"karma-jasmine-html-reporter": "~2.1.0",
|
||||||
|
"typescript": "~5.7.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
{
|
||||||
|
"/api": {
|
||||||
|
"target": "http://localhost:3000",
|
||||||
|
"secure": false,
|
||||||
|
"changeOrigin": true,
|
||||||
|
"pathRewrite": {
|
||||||
|
"^/api": ""
|
||||||
|
},
|
||||||
|
"logLevel": "debug"
|
||||||
|
},
|
||||||
|
"/api/socket.io": {
|
||||||
|
"target": "http://localhost:300",
|
||||||
|
"secure": false,
|
||||||
|
"ws": true,
|
||||||
|
"changeOrigin": true,
|
||||||
|
"logLevel": "debug"
|
||||||
|
},
|
||||||
|
"/ws": {
|
||||||
|
"target": "ws://localhost:3000",
|
||||||
|
"ws": true,
|
||||||
|
"secure": false,
|
||||||
|
"changeOrigin": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 15 KiB |
@ -0,0 +1,312 @@
|
|||||||
|
import { Router } from '@angular/router';
|
||||||
|
import { Contest } from '../models/contest.model';
|
||||||
|
import { Flag } from '../models/flag.model';
|
||||||
|
import { Renderer2, ElementRef } from '@angular/core';
|
||||||
|
import { getEmail, updateContainer, gotoPage } from './Helpers';
|
||||||
|
import { TerminalService } from './terminal.service';
|
||||||
|
import { SocketIOService } from '../notifications/socket-io.service';
|
||||||
|
import { Socket } from 'socket.io-client';
|
||||||
|
|
||||||
|
|
||||||
|
export async function loadPage(renderer: Renderer2, el: ElementRef, ts: any): Promise<void> {
|
||||||
|
const isPractice = window.location.href.includes("Prac");
|
||||||
|
const taskbar: HTMLElement = document.getElementById('Taskbar')!;
|
||||||
|
// basics for use in multiple methods
|
||||||
|
const elements = {
|
||||||
|
flagName: el.nativeElement.querySelector('#Flag_Name') as HTMLElement,
|
||||||
|
desc: el.nativeElement.querySelector('#Desc') as HTMLElement,
|
||||||
|
contName: el.nativeElement.querySelector('#ContHeader') as HTMLElement,
|
||||||
|
contestName: el.nativeElement.querySelector('#ContName') as HTMLElement,
|
||||||
|
contDesc: el.nativeElement.querySelector('#ContDesc') as HTMLElement,
|
||||||
|
hintDesc: el.nativeElement.querySelector('#Hint_Desc') as HTMLElement,
|
||||||
|
HintButts: el.nativeElement.querySelector('#Hint_Butts') as HTMLElement
|
||||||
|
}
|
||||||
|
await LoadContest(el, elements, ts);
|
||||||
|
}
|
||||||
|
|
||||||
|
// get the params to see if admin or not
|
||||||
|
export function getAdmin(): string | null {
|
||||||
|
const url: string = window.location.search;
|
||||||
|
const params = new URLSearchParams(url);
|
||||||
|
return params.get('admin');
|
||||||
|
}
|
||||||
|
|
||||||
|
// load the current active contest
|
||||||
|
async function LoadContest(el: ElementRef, elements: any, ts: any) {
|
||||||
|
const contestID = new URLSearchParams(window.location.search).get('contestID');
|
||||||
|
console.log("Contest ID:", contestID);
|
||||||
|
let contest: Contest | undefined;
|
||||||
|
if(contestID){
|
||||||
|
const data = { contestID: contestID};
|
||||||
|
const res = await fetch('api/contests/getContestByID', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data)
|
||||||
|
});
|
||||||
|
if(res.ok) {
|
||||||
|
contest = await res.json();
|
||||||
|
console.log("contest", contest);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
const data = { email: getEmail() };
|
||||||
|
const res = await fetch('api/contests/getActiveContest', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type' : 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data)
|
||||||
|
});
|
||||||
|
if (res.ok) {
|
||||||
|
contest = await res.json();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const msg = el.nativeElement.querySelector('#DefaultMessage') as HTMLElement;
|
||||||
|
if (!contest) {
|
||||||
|
alert('No Contest is Active');
|
||||||
|
msg.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
msg.classList.add('hidden');
|
||||||
|
console.log('Contest:', contest);
|
||||||
|
elements.contName.innerHTML = contest.Name + ' Contest';
|
||||||
|
await LoadElements(contest, el, elements, ts);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// load all the dynamic elements
|
||||||
|
async function LoadElements(contest: Contest, el: ElementRef, elements: any, ts: any) {
|
||||||
|
const data = { contest: contest.ContestID };
|
||||||
|
const res = await fetch('api/flags/getAllFlagsFromContest', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data)
|
||||||
|
});
|
||||||
|
if(!res.ok){
|
||||||
|
console.error('Error fetching flags for contest');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const flagdata: Flag[] = await res.json();
|
||||||
|
console.log("Fetched Flags:", flagdata);
|
||||||
|
const UL = el.nativeElement.querySelector('#FlagList') as HTMLElement;
|
||||||
|
if(UL)
|
||||||
|
UL.innerHTML = '';
|
||||||
|
if(flagdata.length === 0){
|
||||||
|
console.warn("no flags found for contest");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if(elements.contName) elements.contName.style.display = 'none';
|
||||||
|
if(elements.contDesc) elements.contDesc.style.display = 'none';
|
||||||
|
|
||||||
|
const tmp = await getActiveFlag(getEmail(), contest.ContestID, el, elements);
|
||||||
|
if(tmp.ActiveFlag === 'ubuntu'){
|
||||||
|
elements.contName.innerHTML = contest.Name;
|
||||||
|
elements.contDesc.innerHTML = contest.Description;
|
||||||
|
elements.contName.style.display = 'block';
|
||||||
|
elements.contDesc.style.display = 'block';
|
||||||
|
}
|
||||||
|
|
||||||
|
const submitFlag = el.nativeElement.querySelector('#Submit_Flag_Stuff') as HTMLElement;
|
||||||
|
const hintStuff = el.nativeElement.querySelector('#Hint_Stuff') as HTMLElement;
|
||||||
|
// add the contest name to the list
|
||||||
|
elements.flagName.textContent = '';
|
||||||
|
elements.desc.textContent = '';
|
||||||
|
if(elements.hintButts) elements.hintButts.innerHTML = '';
|
||||||
|
if(submitFlag) submitFlag.classList.add('hidden');
|
||||||
|
hintStuff.classList.add('hidden');
|
||||||
|
|
||||||
|
flagdata.forEach(flag => {
|
||||||
|
|
||||||
|
console.log(flag);
|
||||||
|
const li = document.createElement('li');
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.textContent = flag.Name;
|
||||||
|
li.onclick = () => setNewFlag(flag, el, elements, ts);
|
||||||
|
|
||||||
|
// add to list
|
||||||
|
li.appendChild(a);
|
||||||
|
UL.appendChild(li);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// get the active flag of a user
|
||||||
|
async function getActiveFlag(email: string, contest: number, el: ElementRef, elements: any) {
|
||||||
|
const data = { email: email };
|
||||||
|
const res = await fetch('api/flags/getActiveFlag', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type' : 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data)
|
||||||
|
});
|
||||||
|
if (res.ok) { // get the active flag onto html
|
||||||
|
const ret = await res.json();
|
||||||
|
|
||||||
|
// go through all the flags gotten and make sure it's the right one for this contest
|
||||||
|
for (let i=0; i < ret.length; i++) {
|
||||||
|
if (contest === ret[i].ContestID) setUpFlag(ret[i], el, elements);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return { ActiveFlag: 'ubuntu' };
|
||||||
|
}
|
||||||
|
let currentFlagID: number | null = null;
|
||||||
|
|
||||||
|
// get the new flag the user clicked on
|
||||||
|
export async function setNewFlag(flag: Flag, el: ElementRef, elements: any, ts: any) {
|
||||||
|
currentFlagID = flag.FlagID;
|
||||||
|
console.log("The new flagID is", currentFlagID);
|
||||||
|
const submitFlagButt = el.nativeElement.querySelector('#Submit_Flag_Stuff') as HTMLElement;
|
||||||
|
const hintstuff = el.nativeElement.querySelector('#Hint_Stuff') as HTMLElement;
|
||||||
|
const resultelement = el.nativeElement.querySelector('#Submission_Result') as HTMLElement;
|
||||||
|
const input = el.nativeElement.querySelector('#Submit_Flag_Stuff input[type="text"]') as HTMLInputElement;
|
||||||
|
|
||||||
|
if(submitFlagButt) {
|
||||||
|
submitFlagButt.classList.remove('hidden');
|
||||||
|
|
||||||
|
// clear the result and the input box
|
||||||
|
if(resultelement){
|
||||||
|
resultelement.textContent = '';
|
||||||
|
resultelement.classList.remove('Incorrect', 'Correct');
|
||||||
|
}
|
||||||
|
|
||||||
|
if(input){
|
||||||
|
input.value = '';
|
||||||
|
input.placeholder = 'NMUCTF${FLAG}';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(hintstuff) hintstuff.classList.remove('hidden');
|
||||||
|
|
||||||
|
const email = getEmail();
|
||||||
|
const data = { FlagImage: flag.Image, email: email };
|
||||||
|
const res = await fetch('api/setNewActiveFlag', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type' : 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data)
|
||||||
|
});
|
||||||
|
if (res.ok) { // get the flag details onto html
|
||||||
|
const ret = await res.json();
|
||||||
|
setUpFlag(flag, el, elements);
|
||||||
|
await updateContainer(email);
|
||||||
|
console.log('Setting new Flag');
|
||||||
|
ts.ClearAndSetTerminal(); // clears the terminal and replaces with the new one for the specific flag
|
||||||
|
}
|
||||||
|
else
|
||||||
|
console.error('Failed to set new flag.');
|
||||||
|
}
|
||||||
|
|
||||||
|
// set the HTML to the correct flag
|
||||||
|
function setUpFlag(flag: Flag, el: ElementRef, elements: any) {
|
||||||
|
|
||||||
|
// set up the basics
|
||||||
|
elements.flagName.innerHTML = flag.Name;
|
||||||
|
elements.desc.innerHTML = flag.Description;
|
||||||
|
if(elements.HintButts) elements.HintButts.innerHTML = '';
|
||||||
|
if(elements.hintDesc) elements.hintDesc.innerHTML = '';
|
||||||
|
|
||||||
|
// set up the hints buttons
|
||||||
|
if (flag.Hint1) {
|
||||||
|
const hint1 = document.createElement('button');
|
||||||
|
hint1.textContent = 'Hint 1';
|
||||||
|
hint1.addEventListener('click', function() {
|
||||||
|
elements.hintDesc.innerHTML = flag.Hint1;
|
||||||
|
});
|
||||||
|
elements.HintButts.appendChild(hint1);
|
||||||
|
}
|
||||||
|
if (flag.Hint2) {
|
||||||
|
const hint2 = document.createElement('button');
|
||||||
|
hint2.textContent = 'Hint 2';
|
||||||
|
hint2.addEventListener('click', function() {
|
||||||
|
elements.hintDesc.innerHTML = flag.Hint2;
|
||||||
|
});
|
||||||
|
elements.HintButts.appendChild(hint2);
|
||||||
|
}
|
||||||
|
if (flag.Hint3) {
|
||||||
|
const hint3 = document.createElement('button');
|
||||||
|
hint3.textContent = 'Hint 3';
|
||||||
|
hint3.addEventListener('click', function() {
|
||||||
|
elements.hintDesc.innerHTML = flag.Hint3;
|
||||||
|
});
|
||||||
|
elements.HintButts.appendChild(hint3);
|
||||||
|
}
|
||||||
|
|
||||||
|
// if theres at least one hint have a placeholder for user
|
||||||
|
if (flag.Hint1 || flag.Hint2 || flag.Hint3) {
|
||||||
|
elements.hintDesc.textContent = 'click to see a Hint';
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
elements.hintDesc.textContent = 'there are no Hints at all good luck :('
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*async function stopContainer(){
|
||||||
|
if(container){
|
||||||
|
await container.kill();
|
||||||
|
await container.remove({force:true});
|
||||||
|
}
|
||||||
|
}*/
|
||||||
|
|
||||||
|
function getCurrentFlagID(){
|
||||||
|
return currentFlagID;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function handleSubmission(el: ElementRef, socket: SocketIOService){
|
||||||
|
const url = window.location.href;
|
||||||
|
if(url.includes("Prac")){
|
||||||
|
checkSubmission(true, el, socket);
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
checkSubmission(false, el, socket);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function checkSubmission(isPractice: boolean, el: ElementRef, socket: SocketIOService){
|
||||||
|
const submittedFlag = el.nativeElement.querySelector('#Submit_Flag input[type="text"]').value.trim();
|
||||||
|
const email = getEmail();
|
||||||
|
const flagID = getCurrentFlagID();
|
||||||
|
console.log("FLAG ID IS", flagID);
|
||||||
|
const flagName = el.nativeElement.querySelector('#Flag_Name').textContent;
|
||||||
|
const resultelement = el.nativeElement.querySelector('#Submission_Result');
|
||||||
|
if(!submittedFlag){
|
||||||
|
resultelement.textContent = "Please enter a flag.";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let res, result;
|
||||||
|
if(!isPractice){
|
||||||
|
res = await fetch('api/checkFlagSubmission', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json'},
|
||||||
|
body: JSON.stringify({ email, flagID, submittedFlag })
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
res = await fetch('api/checkPracSubmission', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json'},
|
||||||
|
body: JSON.stringify({ email, flagID, submittedFlag })
|
||||||
|
});
|
||||||
|
}
|
||||||
|
result = await res.json();
|
||||||
|
|
||||||
|
if(result.correct){
|
||||||
|
resultelement.classList.add('Correct');
|
||||||
|
resultelement.classList.remove('Incorrect');
|
||||||
|
resultelement.textContent = 'Correct! :)';
|
||||||
|
|
||||||
|
console.log("SENDING NOTIF", email, flagName);
|
||||||
|
/*socket.emit('submission-notification', {
|
||||||
|
email, flagName, time: new Date().toISOString()
|
||||||
|
});*/
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
resultelement.classList.add('Incorrect');
|
||||||
|
resultelement.classList.remove('Correct');
|
||||||
|
resultelement.textContent = 'Incorrect! :(';
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,207 @@
|
|||||||
|
/*
|
||||||
|
Jordan Latimer
|
||||||
|
Alex Miller
|
||||||
|
|
||||||
|
Helper functions used by a variety of javascript files
|
||||||
|
*/
|
||||||
|
import { Router } from '@angular/router';
|
||||||
|
import { Contest } from '../models/contest.model';
|
||||||
|
import { Flag } from '../models/flag.model';
|
||||||
|
import { Terminal } from 'xterm';
|
||||||
|
import { AttachAddon } from '@xterm/addon-attach';
|
||||||
|
import { PopulateUserTables } from './User-pfp';
|
||||||
|
let term: Terminal | undefined;
|
||||||
|
// get the email of the client
|
||||||
|
export function getEmail(): string{
|
||||||
|
return sessionStorage.getItem('email') || '';
|
||||||
|
}
|
||||||
|
|
||||||
|
// got to a specific page
|
||||||
|
export function gotoPage(router: Router, page: string): void {
|
||||||
|
router.navigate([page]);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function logOut(router: Router){
|
||||||
|
router.navigate(['']);
|
||||||
|
}
|
||||||
|
|
||||||
|
// popup window for a specific page with the email
|
||||||
|
export function Popup(site: string): void {
|
||||||
|
|
||||||
|
const width = 500;
|
||||||
|
const height = 500;
|
||||||
|
|
||||||
|
// get the right placement and size for any screen
|
||||||
|
const x = screenX + (window.screen.width / 2) - (width / 2);
|
||||||
|
const y = screenY + (window.screen.height / 2) - (height / 2);
|
||||||
|
// add the features and the email inside the URL and open the window
|
||||||
|
const features = `width=${width},height=${height},left=${x},top=${y}`;
|
||||||
|
window.open(site,'popup',features);
|
||||||
|
}
|
||||||
|
|
||||||
|
// get all the table contents and add them in the respective table
|
||||||
|
export async function PopulateTable(page: number, InsertIntoTable: (data: Contest[]) => void): Promise<void> {
|
||||||
|
const data = { email: getEmail() };
|
||||||
|
const res = await fetch('api/contests/getContests', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type' : 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data)
|
||||||
|
});
|
||||||
|
if (res.ok) {
|
||||||
|
const list = await res.json();
|
||||||
|
if (page === 0) InsertIntoTable(list);
|
||||||
|
else PopulateUserTables(list);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getContests(): Promise<Contest[]> {
|
||||||
|
const data = { email: getEmail() };
|
||||||
|
const res = await fetch('api/contests/getContests', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type' : 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data)
|
||||||
|
});
|
||||||
|
if (res.ok) {
|
||||||
|
const list: Contest[] = await res.json();
|
||||||
|
return list;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
console.error('Failed to fetch contests');
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const flagItems = document.querySelectorAll('#Flag_Sidebar li');
|
||||||
|
flagItems.forEach(item => {
|
||||||
|
item.addEventListener('click', function() {
|
||||||
|
flagItems.forEach(f => f.classList.remove('selected-flag'));
|
||||||
|
item.classList.add('selected-flag');
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
export async function InsertIntoTable(data: Contest[], router: Router): Promise<void> {
|
||||||
|
// Past Contest Table
|
||||||
|
const PCT = document.querySelector('#Past_Contests tbody') as HTMLTableSectionElement | null;
|
||||||
|
// Active Contest Table
|
||||||
|
const ACT = document.querySelector('#Current_Contest tbody') as HTMLTableSectionElement | null;
|
||||||
|
if(!PCT || !ACT)
|
||||||
|
return;
|
||||||
|
PCT.innerHTML = '';
|
||||||
|
ACT.innerHTML = '';
|
||||||
|
|
||||||
|
// list of flags
|
||||||
|
const res2 = await fetch('api/flags/getAllFlags');
|
||||||
|
const flaglist: Flag[] = await res2.json();
|
||||||
|
|
||||||
|
const email = getEmail();
|
||||||
|
const res3 = await fetch('api/contests/getActiveContest', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {'Content-Type': 'application/json'},
|
||||||
|
body: JSON.stringify({email})
|
||||||
|
})
|
||||||
|
let activeContest = await res3.json().catch(() => null);
|
||||||
|
if(activeContest && activeContest.error === 'NO CONTEST FOUND') activeContest = null;
|
||||||
|
data.forEach((contest: Contest) => {
|
||||||
|
const row = document.createElement('tr');
|
||||||
|
const name = document.createElement('td');
|
||||||
|
const flags = document.createElement('td');
|
||||||
|
const leader = document.createElement('td');
|
||||||
|
|
||||||
|
name.textContent = contest.Name;
|
||||||
|
|
||||||
|
// get the amount of flags in the table
|
||||||
|
let i = 0;
|
||||||
|
flaglist.forEach(flag => {
|
||||||
|
if (flag.ContestID === contest.ContestID) i++;
|
||||||
|
});
|
||||||
|
flags.textContent = i.toString();
|
||||||
|
|
||||||
|
// get the button for the leaderboard
|
||||||
|
const leaderbutton = document.createElement('button');
|
||||||
|
leaderbutton.textContent = 'view';
|
||||||
|
leaderbutton.addEventListener('click', function() {
|
||||||
|
// Popup('leaderboard.html' ,getEmail(), 'ContestName=' + contest.Name); Uncomment when we finish leaderboard implementation
|
||||||
|
});
|
||||||
|
leader.appendChild(leaderbutton);
|
||||||
|
|
||||||
|
row.appendChild(name);
|
||||||
|
row.appendChild(flags);
|
||||||
|
|
||||||
|
if (contest.IsActive === 1) {
|
||||||
|
const button = document.createElement('td');
|
||||||
|
const JoinButton = document.createElement('button');
|
||||||
|
JoinButton.textContent = 'Join';
|
||||||
|
JoinButton.addEventListener('click', function() {
|
||||||
|
router.navigate(['/contest-page']);
|
||||||
|
});
|
||||||
|
|
||||||
|
button.appendChild(JoinButton);
|
||||||
|
row.appendChild(button);
|
||||||
|
ACT.appendChild(row);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
row.appendChild(leader);
|
||||||
|
if(!activeContest){
|
||||||
|
const pracButtCell = document.createElement('td');
|
||||||
|
const pracButt = document.createElement('button');
|
||||||
|
pracButt.textContent = 'Practice';
|
||||||
|
pracButt.addEventListener('click', function() {
|
||||||
|
console.log("contestID", contest.ContestID);
|
||||||
|
router.navigate(['/contest-page'], { queryParams: { email: email, contestID: contest.ContestID, Prac: true } });
|
||||||
|
});
|
||||||
|
pracButtCell.appendChild(pracButt);
|
||||||
|
row.appendChild(pracButtCell);
|
||||||
|
}
|
||||||
|
PCT.appendChild(row);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if(!activeContest){
|
||||||
|
const pracRow = document.querySelector('#Past_Contests thead tr');
|
||||||
|
if(pracRow){
|
||||||
|
const pracRowCell = document.createElement('th');
|
||||||
|
pracRowCell.textContent = 'Practice';
|
||||||
|
pracRow.appendChild(pracRowCell);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// update the container
|
||||||
|
export async function updateContainer(email: string){
|
||||||
|
const res = await fetch(`api/updateContainer/${email}`, { method: 'POST'});
|
||||||
|
|
||||||
|
if(res.ok){
|
||||||
|
console.log('Container updated successfully');
|
||||||
|
}
|
||||||
|
|
||||||
|
else
|
||||||
|
console.log('Failed to update container');
|
||||||
|
}
|
||||||
|
|
||||||
|
// reattach the terminal web socket
|
||||||
|
export async function reattachTerminal(term: Terminal){
|
||||||
|
console.log('reattaching termnial');
|
||||||
|
|
||||||
|
if(term) {
|
||||||
|
term.dispose();
|
||||||
|
}
|
||||||
|
term = new Terminal();
|
||||||
|
const container = document.getElementById('Linux_Shell');
|
||||||
|
if(container && term) {
|
||||||
|
term.open(container);
|
||||||
|
}
|
||||||
|
const socket = new WebSocket('/ws');
|
||||||
|
socket.onopen = () => {
|
||||||
|
socket.send(JSON.stringify(getEmail()));
|
||||||
|
console.log('Websocket opened');
|
||||||
|
}
|
||||||
|
const attachAddon = new AttachAddon(socket);
|
||||||
|
term.loadAddon(attachAddon);
|
||||||
|
term.focus();
|
||||||
|
socket.onclose = () => {
|
||||||
|
console.log("socket closed");
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,181 @@
|
|||||||
|
/*
|
||||||
|
Alex Miller
|
||||||
|
Jordan Latimer
|
||||||
|
|
||||||
|
Client code for Profile Page for Users
|
||||||
|
*/
|
||||||
|
import { Contest } from '../models/contest.model';
|
||||||
|
import { Flag } from '../models/flag.model';
|
||||||
|
import { User } from '../models/user.model';
|
||||||
|
import { getEmail, Popup, InsertIntoTable, getContests } from './Helpers';
|
||||||
|
|
||||||
|
// sets of names to pull randomly from for random names
|
||||||
|
let Adjectives = [
|
||||||
|
'Aspiring', 'Strict','Electronic','Talented','Gifted','Wonderful',
|
||||||
|
'Amazing','Inspiring','First','Second','Third','Cowardly','True',
|
||||||
|
'Coordinated','Sneaky','Concerned','Courageous','Nice','Mean','Sharp',
|
||||||
|
'Mysterious','Magical','Tame','Well-off','Overconfident','Cautious',
|
||||||
|
'Wandering','Wrathful','Important','Jolly','Mistaken','Admirable'
|
||||||
|
]
|
||||||
|
let Animals = [
|
||||||
|
'Fox','Turtle','Penguin','Robin','Shark','Giraffe','Kangaroo','Cat','Dog',
|
||||||
|
'Fish','Bear','Lion','Hippo','Duck','Octopus','Elephant','Bunny','Rabbit',
|
||||||
|
'Mouse','Pig','Cow','Chicken','Rooster','Ladybug','Firefly','Mosquito','Snail',
|
||||||
|
'Koala','Platypus','Woodchuck','Polarbear','Rat','Bull','Newt','Deer','Fawn',
|
||||||
|
'Cheetah','Leopard','Beaver','Llama','Guineapig','Squirrel','Eagle','Moose'
|
||||||
|
]
|
||||||
|
let Colors = [
|
||||||
|
'Green', 'Blue','Aqua','Red','Purple','Pink','Gray','Black','Brown','Teal',
|
||||||
|
'Limegreen','White','Yellow','Maroon','Violet', 'Coral','Emerald','Orange',
|
||||||
|
'Darkgreen','Navyblue','Cyan','Crimson','Bronze','Gold','Silver','Amber',
|
||||||
|
'Turquoise','Indigo','Fuchsia','Magenta','Platinum','Tan','Jade','Ruby'
|
||||||
|
]
|
||||||
|
let Things = [
|
||||||
|
'Chair','Desk','Lamp','Keys','Bottle','Wall','Window','Barn','House','Door',
|
||||||
|
'Outlet','TV','Screen','Road','Lightbulb','Sidewalk','Keyboard','Paper','Plastic',
|
||||||
|
'Remote','Phone','Computer','Can','Table','Backpack','Fan','Carpet','Pen','Pencil',
|
||||||
|
'Notebook','Clock','Tree','Pants','Shorts','Flannel','Jacket','Apple','Banana','Watch',
|
||||||
|
'Apricot','Socks','Pizza','Pasty','Car','Airplane','Bus','Scissors','Rock','Water'
|
||||||
|
]
|
||||||
|
let Name = '';
|
||||||
|
|
||||||
|
// on load, populate tables and set the users name inside the input field
|
||||||
|
export async function loadTable(): Promise<string> {
|
||||||
|
let contests = await getContests();
|
||||||
|
PopulateUserTables(contests);
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
// populate both user tables
|
||||||
|
export async function PopulateUserTables(PCData: Contest[]): Promise<void> {
|
||||||
|
const TB = document.querySelector('#Past_Contests tbody') as HTMLElement;
|
||||||
|
TB.innerHTML = "";
|
||||||
|
|
||||||
|
// get all of the flags
|
||||||
|
const res = await fetch('api/flags/getAllFlags');
|
||||||
|
const PCData2: Flag[] = await res.json();
|
||||||
|
let totalflagamount = 0;
|
||||||
|
|
||||||
|
// insert the amount of flags per contests
|
||||||
|
PCData.forEach(contest => {
|
||||||
|
let flagamount = 0;
|
||||||
|
const row = document.createElement('tr');
|
||||||
|
const name = document.createElement('td');
|
||||||
|
name.textContent = contest.Name;
|
||||||
|
const flags = document.createElement('td');
|
||||||
|
PCData2.forEach(flag => {
|
||||||
|
if (flag.ContestID === contest.ContestID) flagamount++;
|
||||||
|
});
|
||||||
|
flags.textContent = flagamount.toString();
|
||||||
|
totalflagamount += flagamount;
|
||||||
|
|
||||||
|
const leader = document.createElement('td');
|
||||||
|
|
||||||
|
// get the button for the leaderboard
|
||||||
|
const leaderbutton = document.createElement('button');
|
||||||
|
leaderbutton.textContent = 'view';
|
||||||
|
leaderbutton.setAttribute('id','ViewLeaderboard');
|
||||||
|
leaderbutton.addEventListener('click', function() {
|
||||||
|
//Popup('leaderboard.html' ,getEmail(), 'ContestName=' + contest.Name); Uncomment when leaderboard is implemented
|
||||||
|
});
|
||||||
|
leader.appendChild(leaderbutton);
|
||||||
|
|
||||||
|
|
||||||
|
// add to the table
|
||||||
|
row.appendChild(name);
|
||||||
|
row.appendChild(flags);
|
||||||
|
row.appendChild(leader);
|
||||||
|
|
||||||
|
TB.appendChild(row);
|
||||||
|
});
|
||||||
|
|
||||||
|
// get the user information
|
||||||
|
const data = { email: getEmail() };
|
||||||
|
const res2 = await fetch('api/users/getUser', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type' : 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data)
|
||||||
|
});
|
||||||
|
if (res2.ok) {
|
||||||
|
const Rdata = await res2.json();
|
||||||
|
|
||||||
|
const TB2 = document.querySelector('#Record tbody') as HTMLTableSectionElement;
|
||||||
|
if(TB2)
|
||||||
|
TB2.innerHTML = '';
|
||||||
|
|
||||||
|
// create the table for the users record, flags completed, and total flags
|
||||||
|
const row = document.createElement('tr');
|
||||||
|
const Total = document.createElement('td');
|
||||||
|
const Completed = document.createElement('td');
|
||||||
|
const record = document.createElement('td');
|
||||||
|
Total.textContent = totalflagamount.toString();
|
||||||
|
Completed.textContent = Rdata.Flags;
|
||||||
|
record.textContent = Completed.innerHTML + ' / ' + Total.innerHTML;
|
||||||
|
|
||||||
|
row.appendChild(Completed);
|
||||||
|
row.appendChild(Total);
|
||||||
|
row.appendChild(record);
|
||||||
|
|
||||||
|
console.log('TB2:', TB2);
|
||||||
|
console.log('row:', row);
|
||||||
|
TB2.appendChild(row);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
console.error('Error getting data for Flag Users');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// get a new name from name array
|
||||||
|
export function getNewName(): string {
|
||||||
|
|
||||||
|
let first = '';
|
||||||
|
let second = '';
|
||||||
|
|
||||||
|
// get what arrays to be used
|
||||||
|
let firstarr = Math.floor(Math.random() * 2);
|
||||||
|
let secondarr = Math.floor(Math.random() * 2);
|
||||||
|
|
||||||
|
// get the random array items based on the arrays used
|
||||||
|
if (firstarr === 0) first = Adjectives[Math.floor(Math.random() * Adjectives.length)];
|
||||||
|
else first = Colors[Math.floor(Math.random() * Colors.length)];
|
||||||
|
|
||||||
|
if (secondarr === 0) second = Animals[Math.floor(Math.random() * Animals.length)];
|
||||||
|
else second = Things[Math.floor(Math.random() * Things.length)];
|
||||||
|
|
||||||
|
// set up the name
|
||||||
|
Name = '';
|
||||||
|
Name += first + second;
|
||||||
|
|
||||||
|
// determine if there will be a random number after and add it
|
||||||
|
let num = Math.floor(Math.random() * 2);
|
||||||
|
if (num === 0) Name += Math.floor(Math.random() * 1001);
|
||||||
|
|
||||||
|
return Name;
|
||||||
|
}
|
||||||
|
|
||||||
|
// set the random name to the name of the user
|
||||||
|
export async function setNewName(NameInput: string): Promise<void> {
|
||||||
|
const name = NameInput;
|
||||||
|
const data = { name: name, email: getEmail() };
|
||||||
|
const res = await fetch('api/users/setUserName', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type' : 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data)
|
||||||
|
});
|
||||||
|
}
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
import { TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { TerminalService } from './terminal.service';
|
||||||
|
|
||||||
|
describe('TerminalService', () => {
|
||||||
|
let service: TerminalService;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
TestBed.configureTestingModule({});
|
||||||
|
service = TestBed.inject(TerminalService);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should be created', () => {
|
||||||
|
expect(service).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,80 @@
|
|||||||
|
/*
|
||||||
|
Alex Miller
|
||||||
|
Jordan Latimer
|
||||||
|
|
||||||
|
Service file for Terminals
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { Terminal } from '@xterm/xterm';
|
||||||
|
import { AttachAddon } from '@xterm/addon-attach';
|
||||||
|
import { getEmail } from './Helpers';
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: 'root'
|
||||||
|
})
|
||||||
|
export class TerminalService {
|
||||||
|
|
||||||
|
private term: Terminal; // terminal for container
|
||||||
|
private socket: WebSocket | null = null; // websocket attached to container
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this.term = new Terminal();
|
||||||
|
}
|
||||||
|
|
||||||
|
// get the terminal
|
||||||
|
getTermainal() : Terminal {
|
||||||
|
return this.term;
|
||||||
|
}
|
||||||
|
|
||||||
|
// set the terminal
|
||||||
|
setTerminal(newTerm: Terminal) : void {
|
||||||
|
this.term = newTerm;
|
||||||
|
}
|
||||||
|
|
||||||
|
ClearTerminal() : void {
|
||||||
|
if(this.term){
|
||||||
|
this.term.write("\x1b[2J");
|
||||||
|
this.term.write("\x1b[H");
|
||||||
|
this.term.write('Loading Environment...');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// create terminal
|
||||||
|
CreateTerminal(): void {
|
||||||
|
const container = document.getElementById('Linux_Shell');
|
||||||
|
if (container && this.term) {
|
||||||
|
this.term.open(container);
|
||||||
|
this.CreateWebSocket();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// create the web socket connection
|
||||||
|
CreateWebSocket() {
|
||||||
|
this.socket = new WebSocket('/ws');
|
||||||
|
this.socket.onopen = () => {
|
||||||
|
if (this.socket) {
|
||||||
|
this.socket.send(JSON.stringify(getEmail()));
|
||||||
|
console.log('WebSocket opened');
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
const attachAddon = new AttachAddon(this.socket!);
|
||||||
|
this.term.loadAddon(attachAddon);
|
||||||
|
this.term.focus();
|
||||||
|
console.log('reattached attachAddon');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// reattach the terminal for a new flag
|
||||||
|
reattachTerminal() {
|
||||||
|
if (this.term) {
|
||||||
|
this.term.dispose();
|
||||||
|
this.term = new Terminal();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.CreateTerminal(); // create the new terminal
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
import { TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { TreeService } from './tree.service';
|
||||||
|
|
||||||
|
describe('TreeService', () => {
|
||||||
|
let service: TreeService;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
TestBed.configureTestingModule({});
|
||||||
|
service = TestBed.inject(TreeService);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should be created', () => {
|
||||||
|
expect(service).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,117 @@
|
|||||||
|
import { Injectable, InputSignal, Inject } from '@angular/core';
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: 'root'
|
||||||
|
})
|
||||||
|
export class TreeService {
|
||||||
|
|
||||||
|
private name: string;
|
||||||
|
private contents: string;
|
||||||
|
private children: TreeService[];
|
||||||
|
private parentnode: TreeService | null;
|
||||||
|
private directory: boolean;
|
||||||
|
private nodenum: number;
|
||||||
|
|
||||||
|
constructor(@Inject(String) name: string, @Inject(String) contents: string, @Inject(Boolean) directory: boolean, @Inject(Number) nodenum: number, @Inject(TreeService) parentnode: TreeService | null) {
|
||||||
|
this.name = name;
|
||||||
|
this.contents = contents;
|
||||||
|
this.children = [];
|
||||||
|
this.parentnode = parentnode;
|
||||||
|
this.directory = directory;
|
||||||
|
this.nodenum = nodenum;
|
||||||
|
}
|
||||||
|
|
||||||
|
// adding a child node to tree
|
||||||
|
AddChild(node: TreeService) {
|
||||||
|
this.children.push(node);
|
||||||
|
}
|
||||||
|
|
||||||
|
// chekc if a child already has the same name
|
||||||
|
IsNameTaken(filename: string): boolean {
|
||||||
|
// check children
|
||||||
|
if (this.children.length > 0) {
|
||||||
|
for (var i=0; i < this.children.length; i++) {
|
||||||
|
let child = this.children[i];
|
||||||
|
|
||||||
|
// check the name
|
||||||
|
if (child.name === filename) return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// get the node with the correct name and nodenum
|
||||||
|
getNodeByName(name: string, num: number): TreeService | null{
|
||||||
|
|
||||||
|
// base case
|
||||||
|
if (this.name === name && this.nodenum == num) return this;
|
||||||
|
|
||||||
|
// Traverse tree structure
|
||||||
|
if (this.children.length > 0) {
|
||||||
|
for (var i=0; i < this.children.length; i++) {
|
||||||
|
const childResult = this.children[i].getNodeByName(name,num);
|
||||||
|
if (childResult !== null && childResult.name === name && childResult.nodenum == num) {
|
||||||
|
return childResult;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// get all the nodes in the tree with the same name
|
||||||
|
getNodesSameName(name: string, nodes: TreeService[]): TreeService[] {
|
||||||
|
|
||||||
|
// base case
|
||||||
|
if (this.name === name) nodes.push(this);
|
||||||
|
|
||||||
|
// check children
|
||||||
|
if (this.children.length > 0) {
|
||||||
|
for (var i=0; i < this.children.length; i++) {
|
||||||
|
this.children[i].getNodesSameName(name,nodes);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return nodes;
|
||||||
|
}
|
||||||
|
|
||||||
|
// delete the parent references to send tree to server
|
||||||
|
DeleteParentRef() {
|
||||||
|
|
||||||
|
this.parentnode = null;
|
||||||
|
|
||||||
|
if (this.children.length > 0) {
|
||||||
|
for (var i=0; i < this.children.length; i++) {
|
||||||
|
this.children[i].DeleteParentRef();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// delete all children of this node
|
||||||
|
DeleteTheChildren() {
|
||||||
|
this.children = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
// gets
|
||||||
|
|
||||||
|
getDir() : boolean {
|
||||||
|
return this.directory;
|
||||||
|
}
|
||||||
|
getName() : string{
|
||||||
|
return this.name;
|
||||||
|
}
|
||||||
|
getNodeNum() : number {
|
||||||
|
return this.nodenum;
|
||||||
|
}
|
||||||
|
getChildren() : TreeService[] {
|
||||||
|
return this.children;
|
||||||
|
}
|
||||||
|
getParent() : TreeService | null {
|
||||||
|
return this.parentnode;
|
||||||
|
}
|
||||||
|
|
||||||
|
// sets
|
||||||
|
|
||||||
|
setChildren(newchildren: TreeService[]) {
|
||||||
|
this.children = newchildren;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,104 @@
|
|||||||
|
html {
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
form {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
h1, h3 {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
#Inputs {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: max-content max-content;
|
||||||
|
grid-gap: 5px;
|
||||||
|
margin-left: 25%;
|
||||||
|
margin-top: 25%;
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
#Submit {
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#submit * {
|
||||||
|
width: 15%;
|
||||||
|
height: 5%;
|
||||||
|
}
|
||||||
|
#Submit button {
|
||||||
|
background-color: red;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hint1Text, #hint2Text, #hint3Text {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Show the respective hint fields based on the selected radio button */
|
||||||
|
#hint1:checked ~ #hint1Text {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hint2:checked ~ #hint1Text,
|
||||||
|
#hint2:checked ~ #hint2Text {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hint3:checked ~ #hint1Text,
|
||||||
|
#hint3:checked ~ #hint2Text,
|
||||||
|
#hint3:checked ~ #hint3Text{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* for Create Image */
|
||||||
|
#body {
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: 25% auto auto auto auto auto 25%;
|
||||||
|
grid-template-columns: 20% 20% 20% 20% 20%;
|
||||||
|
justify-items: center;
|
||||||
|
}
|
||||||
|
#labels {
|
||||||
|
grid-row: 1/2;
|
||||||
|
grid-column: 3/4;
|
||||||
|
}
|
||||||
|
#Butts {
|
||||||
|
grid-row: 2/3;
|
||||||
|
grid-column: 3/4;
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
#TextBox {
|
||||||
|
grid-row: 3/6;
|
||||||
|
grid-column: 1/3;
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
#DropBox {
|
||||||
|
grid-row: 3/6;
|
||||||
|
grid-column: 3/4;
|
||||||
|
border: 3px black dashed;
|
||||||
|
align-content: center;
|
||||||
|
justify-items: center;
|
||||||
|
}
|
||||||
|
#SendFile {
|
||||||
|
grid-row: 6/7;
|
||||||
|
grid-column: 3/4;
|
||||||
|
}
|
||||||
|
#FileTree {
|
||||||
|
grid-row: 3/6;
|
||||||
|
grid-column: 4/6;
|
||||||
|
}
|
||||||
|
#Submition {
|
||||||
|
grid-row: 7/8;
|
||||||
|
grid-column: 3/4;
|
||||||
|
}
|
||||||
|
.selected-node {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
<!--
|
||||||
|
Jordan Latimer
|
||||||
|
Alex Miller
|
||||||
|
|
||||||
|
Adding a contest screen for Admin
|
||||||
|
-->
|
||||||
|
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title> Add Contest</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1> Add Contest </h1>
|
||||||
|
|
||||||
|
<!-- form for inserting the contest -->
|
||||||
|
<form id="Inputs">
|
||||||
|
<label> Name: </label>
|
||||||
|
<input id="Name" type="text" align="middle" required>
|
||||||
|
<label> Description: </label>
|
||||||
|
<input id="Desc" type="text" align="middle" required>
|
||||||
|
</form>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<!-- submitting and closing -->
|
||||||
|
<div id="Submit">
|
||||||
|
<input id="AddContest" type="button" value="Add Contest" (click)="AddContest();">
|
||||||
|
<button onclick="self.close();"> Cancel </button>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { AddContestComponent } from './add-contest.component';
|
||||||
|
|
||||||
|
describe('AddContestComponent', () => {
|
||||||
|
let component: AddContestComponent;
|
||||||
|
let fixture: ComponentFixture<AddContestComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [AddContestComponent]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(AddContestComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
import { Component } from '@angular/core';
|
||||||
|
import { getEmail } from '../Helper/Helpers';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-add-contest',
|
||||||
|
imports: [],
|
||||||
|
templateUrl: './add-contest.component.html',
|
||||||
|
styleUrl: './add-contest.component.css'
|
||||||
|
})
|
||||||
|
export class AddContestComponent {
|
||||||
|
|
||||||
|
// add a contest to the database
|
||||||
|
async AddContest() {
|
||||||
|
const nameInput = document.getElementById("Name") as HTMLInputElement;
|
||||||
|
const descInput = document.getElementById("Desc") as HTMLTextAreaElement;
|
||||||
|
const name = nameInput.value;
|
||||||
|
const desc = descInput.value;
|
||||||
|
console.log("Name entered: ", name);
|
||||||
|
console.log("Description entered: ", desc);
|
||||||
|
const isActive = 0;
|
||||||
|
console.log("EMAIL IS:", this.getEmail())
|
||||||
|
const data = {Name: name, IsActive: isActive, email: this.getEmail(), Desc: desc};
|
||||||
|
const res = await fetch('api/AddContest', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type' : 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data)
|
||||||
|
});
|
||||||
|
if (res.ok) {
|
||||||
|
console.log("Success: adding contest");
|
||||||
|
window.opener.location.reload();
|
||||||
|
window.close();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
console.log("ERROR: adding contest");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getEmail(): string{
|
||||||
|
return getEmail();
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,37 @@
|
|||||||
|
/*
|
||||||
|
Alex Miller
|
||||||
|
Jordan Latimer
|
||||||
|
|
||||||
|
CSS for Add Flag popup window
|
||||||
|
*/
|
||||||
|
|
||||||
|
#FlagInputs {
|
||||||
|
text-align: center;
|
||||||
|
background-color: lightgreen;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#Submit {
|
||||||
|
text-align: center;
|
||||||
|
justify-items: center;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
font-weight: bold;
|
||||||
|
height: 15%;
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#flagName {
|
||||||
|
background-color: lawngreen;
|
||||||
|
}
|
||||||
|
select {
|
||||||
|
display: inline-block;
|
||||||
|
width: 170px;
|
||||||
|
margin: 10px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
option {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
@ -0,0 +1,72 @@
|
|||||||
|
<!--
|
||||||
|
Jordan Latimer
|
||||||
|
Alex Miller
|
||||||
|
|
||||||
|
Adding a Flag for Admin
|
||||||
|
-->
|
||||||
|
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title> Add Flag</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1> Add Flag </h1>
|
||||||
|
|
||||||
|
<!-- form for adding the flag -->
|
||||||
|
<form id="FlagInputs">
|
||||||
|
<label> Name: </label>
|
||||||
|
<input id="Name" type="text" align="middle" required>
|
||||||
|
<br><br>
|
||||||
|
<label> Description: </label>
|
||||||
|
<input id="Description" required>
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
<input type="radio" id="hint1" name="hintCount" value="1">
|
||||||
|
<label for="hint1">1 Hint</label>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<input type="radio" id="hint2" name="hintCount" value="2">
|
||||||
|
<label for="hint2">2 Hints</label>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<input type="radio" id="hint3" name="hintCount" value="3">
|
||||||
|
<label for="hint3">3 Hints</label>
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
<div id = "hint1Text">
|
||||||
|
<label for="Hint1">Hint 1: </label>
|
||||||
|
<input id="Hint1" type="text"><br><br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id = "hint2Text">
|
||||||
|
<label for="Hint2">Hint 2: </label>
|
||||||
|
<input id="Hint2" type="text"><br><br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id = "hint3Text">
|
||||||
|
<label for="Hint3">Hint 3: </label>
|
||||||
|
<input id="Hint3" type="text"><br><br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- image of the flag to create container -->
|
||||||
|
<label> Image: </label>
|
||||||
|
<select id="Images">
|
||||||
|
<option> ubuntu </option>
|
||||||
|
</select>
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
<!-- path to place the flag into -->
|
||||||
|
<label> Path To File </label>
|
||||||
|
<input id="Path" type="text">
|
||||||
|
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<!-- submit button just closes the window for now -->
|
||||||
|
<div id="Submit">
|
||||||
|
<button id="flagName" type="submit" (click)="AddFlag()">Add Flag</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { AddFlagComponent } from './add-flag.component';
|
||||||
|
|
||||||
|
describe('AddFlagComponent', () => {
|
||||||
|
let component: AddFlagComponent;
|
||||||
|
let fixture: ComponentFixture<AddFlagComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [AddFlagComponent]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(AddFlagComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,64 @@
|
|||||||
|
import { Component } from '@angular/core';
|
||||||
|
import { gotoPage } from '../Helper/Helpers';
|
||||||
|
import { Router } from '@angular/router';
|
||||||
|
@Component({
|
||||||
|
selector: 'app-add-flag',
|
||||||
|
imports: [],
|
||||||
|
templateUrl: './add-flag.component.html',
|
||||||
|
styleUrl: './add-flag.component.css'
|
||||||
|
})
|
||||||
|
export class AddFlagComponent {
|
||||||
|
|
||||||
|
constructor(private router: Router){}
|
||||||
|
|
||||||
|
// add a flag to a contest
|
||||||
|
async AddFlag(){
|
||||||
|
// get contestId from URL
|
||||||
|
const contestId = parseInt(sessionStorage.getItem('selectedContestID') || '', 10);
|
||||||
|
|
||||||
|
// get all the values in the form
|
||||||
|
const flagName = document.getElementById("Name") as HTMLInputElement;
|
||||||
|
const description = document.getElementById("Description") as HTMLInputElement;
|
||||||
|
let Hint1 = document.getElementById("Hint1") as HTMLInputElement;
|
||||||
|
let Hint2 = document.getElementById("Hint2") as HTMLInputElement;
|
||||||
|
let Hint3 = document.getElementById("Hint3") as HTMLInputElement;
|
||||||
|
const image = document.getElementById('Images') as HTMLInputElement;
|
||||||
|
const path = document.getElementById('Path') as HTMLInputElement;
|
||||||
|
|
||||||
|
// required fields
|
||||||
|
if(!flagName.value){
|
||||||
|
alert("Enter a flag name.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if(contestId === null || contestId === undefined){
|
||||||
|
alert("Please select a contest first.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// add the flag
|
||||||
|
const data = {name: flagName.value, desc: description.value, contest: contestId, image: image.value, path: path.value, hint1: Hint1.value || '', hint2: Hint2.value || '', hint3: Hint3.value || ''};
|
||||||
|
try{
|
||||||
|
const response = await fetch('api/AddFlag', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {'Content-Type': 'application/json',},
|
||||||
|
body: JSON.stringify(data)
|
||||||
|
});
|
||||||
|
if(response.ok){
|
||||||
|
console.log("Flag added");
|
||||||
|
// reload the parent window when this window closes
|
||||||
|
window.opener.postMessage({ type: 'FLAG_ADDED', contestId: contestId }, window.origin);
|
||||||
|
window.close();
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
alert("Failed to add flag.");
|
||||||
|
}
|
||||||
|
} catch(error){
|
||||||
|
console.error("Error adding flag:", error);
|
||||||
|
alert("An error occurred while adding flag.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
navtoPageCI(){
|
||||||
|
gotoPage(this.router, '/create-image');
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,104 @@
|
|||||||
|
html {
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
form {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
h1, h3 {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
#Inputs {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: max-content max-content;
|
||||||
|
grid-gap: 5px;
|
||||||
|
margin-left: 25%;
|
||||||
|
margin-top: 25%;
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
#Submit {
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#submit * {
|
||||||
|
width: 15%;
|
||||||
|
height: 5%;
|
||||||
|
}
|
||||||
|
#Submit button {
|
||||||
|
background-color: red;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hint1Text, #hint2Text, #hint3Text {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Show the respective hint fields based on the selected radio button */
|
||||||
|
#hint1:checked ~ #hint1Text {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hint2:checked ~ #hint1Text,
|
||||||
|
#hint2:checked ~ #hint2Text {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hint3:checked ~ #hint1Text,
|
||||||
|
#hint3:checked ~ #hint2Text,
|
||||||
|
#hint3:checked ~ #hint3Text{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* for Create Image */
|
||||||
|
#body {
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: 25% auto auto auto auto auto 25%;
|
||||||
|
grid-template-columns: 20% 20% 20% 20% 20%;
|
||||||
|
justify-items: center;
|
||||||
|
}
|
||||||
|
#labels {
|
||||||
|
grid-row: 1/2;
|
||||||
|
grid-column: 3/4;
|
||||||
|
}
|
||||||
|
#Butts {
|
||||||
|
grid-row: 2/3;
|
||||||
|
grid-column: 3/4;
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
#TextBox {
|
||||||
|
grid-row: 3/6;
|
||||||
|
grid-column: 1/3;
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
#DropBox {
|
||||||
|
grid-row: 3/6;
|
||||||
|
grid-column: 3/4;
|
||||||
|
border: 3px black dashed;
|
||||||
|
align-content: center;
|
||||||
|
justify-items: center;
|
||||||
|
}
|
||||||
|
#SendFile {
|
||||||
|
grid-row: 6/7;
|
||||||
|
grid-column: 3/4;
|
||||||
|
}
|
||||||
|
#FileTree {
|
||||||
|
grid-row: 3/6;
|
||||||
|
grid-column: 4/6;
|
||||||
|
}
|
||||||
|
#Submition {
|
||||||
|
grid-row: 7/8;
|
||||||
|
grid-column: 3/4;
|
||||||
|
}
|
||||||
|
.selected-node {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
<!--
|
||||||
|
Alex Miller
|
||||||
|
Jordan Latimer
|
||||||
|
|
||||||
|
Adding a student page for Admin
|
||||||
|
-->
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title> Add Student </title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1> Add Student </h1>
|
||||||
|
|
||||||
|
<!-- form for adding a student -->
|
||||||
|
<form id="Inputs">
|
||||||
|
<label> Name: </label>
|
||||||
|
<input id="Name" type="text" [(ngModel)]="Uname" name="Uname" align="middle">
|
||||||
|
<label> Email: </label>
|
||||||
|
<input id="EM" type="text" [(ngModel)]="email" name="email" align="middle">
|
||||||
|
<label> Password: </label>
|
||||||
|
<input *ngIf="!showPass" id="PS1" type="password" [(ngModel)]="password" name="password" align="middle">
|
||||||
|
<input *ngIf="showPass" id="PS1" type="text" [(ngModel)]="password" name="password" align="middle">
|
||||||
|
<label> Confirm Password: </label>
|
||||||
|
<input *ngIf="!showPass" id="PS2" type="password" [(ngModel)]="confirmPassword" name="confirmPassword" align="middle">
|
||||||
|
<input *ngIf="showPass" id="PS2" type="text" [(ngModel)]="confirmPassword" name="confirmPassword" align="middle">
|
||||||
|
<label> Show Password </label>
|
||||||
|
<input type="checkbox" (click)="ShowPassword()" id="ShowPass">
|
||||||
|
</form>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<!-- submitting or closing-->
|
||||||
|
<div id="Submit">
|
||||||
|
<input id="AddStudent" type="submit" (click)="AddStudent()">
|
||||||
|
<button onclick="self.close();"> Cancel </button>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { AddStudentComponent } from './add-student.component';
|
||||||
|
|
||||||
|
describe('AddStudentComponent', () => {
|
||||||
|
let component: AddStudentComponent;
|
||||||
|
let fixture: ComponentFixture<AddStudentComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [AddStudentComponent]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(AddStudentComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
import { Component } from '@angular/core';
|
||||||
|
import { getEmail } from '../Helper/Helpers';
|
||||||
|
import { NgIf } from '@angular/common';
|
||||||
|
import { FormsModule } from '@angular/forms';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-add-student',
|
||||||
|
imports: [NgIf, FormsModule],
|
||||||
|
templateUrl: './add-student.component.html',
|
||||||
|
styleUrl: './add-student.component.css'
|
||||||
|
})
|
||||||
|
export class AddStudentComponent {
|
||||||
|
Uname: string = '';
|
||||||
|
email: string = '';
|
||||||
|
password: string = '';
|
||||||
|
confirmPassword: string = '';
|
||||||
|
showPass: boolean = false;
|
||||||
|
|
||||||
|
ShowPassword() {
|
||||||
|
this.showPass = !this.showPass
|
||||||
|
}
|
||||||
|
|
||||||
|
// add a student to the database
|
||||||
|
async AddStudent() {
|
||||||
|
const Aemail = getEmail();
|
||||||
|
|
||||||
|
// password protection
|
||||||
|
if (this.password.length < 10 || this.password == "") {
|
||||||
|
alert("password must be at least 10 characters");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
else if(this.email == Aemail){
|
||||||
|
alert("Funny guy, eh?");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.password == this.confirmPassword) { // passwords match
|
||||||
|
const data = {name: this.Uname, email: this.email, Aemail: Aemail, password: this.password};
|
||||||
|
const res = await fetch('api/AddStudent', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type' : 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data)
|
||||||
|
});
|
||||||
|
if (res.ok) {
|
||||||
|
console.log("Success: adding student");
|
||||||
|
window.opener.location.reload();
|
||||||
|
window.close();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
console.log("ERROR: adding student");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
alert("Passowrds do not match");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,141 @@
|
|||||||
|
/*
|
||||||
|
Jordan Latimer
|
||||||
|
Alex Miller
|
||||||
|
|
||||||
|
CSS for both Contest Pages
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: grid;
|
||||||
|
background-color: green;
|
||||||
|
|
||||||
|
/* columns and rows sizes */
|
||||||
|
grid-template-columns: 15% 10% auto 20%;
|
||||||
|
grid-template-rows: 10% 40% 10% auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Name of the contest at the top left */
|
||||||
|
#Contest_Name {
|
||||||
|
grid-row: 1/2;
|
||||||
|
grid-column: 1/3;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 175%;
|
||||||
|
}
|
||||||
|
#Contest_Name * {
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* sidebar thats scrollable for different flags */
|
||||||
|
#Flag_Sidebar {
|
||||||
|
background-color: white;
|
||||||
|
grid-row: 2/5;
|
||||||
|
grid-column: 1/2;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
#Flag_Sidebar ul {
|
||||||
|
list-style-type: none;
|
||||||
|
height: 80%;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
background-color: white;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* details for each flag (name, description, etc) */
|
||||||
|
#Flag_Deats {
|
||||||
|
background-color: white;
|
||||||
|
grid-row: 2/3;
|
||||||
|
grid-column: 2/4;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#Notifications {
|
||||||
|
background-color: rgba(65, 145, 55, 0.511);
|
||||||
|
margin-left: 50%;
|
||||||
|
grid-row: 3/4;
|
||||||
|
grid-column: 3/5;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#Notifications.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Submitting the flag */
|
||||||
|
#Submit_Flag {
|
||||||
|
background-color: white;
|
||||||
|
grid-row: 3/4;
|
||||||
|
grid-column: 2/4;
|
||||||
|
|
||||||
|
}
|
||||||
|
#Submit_Flag_Stuff * {
|
||||||
|
height: 40%;
|
||||||
|
width: 15%;
|
||||||
|
}
|
||||||
|
#Submit_Butt {
|
||||||
|
background-color: lawngreen;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 100%;
|
||||||
|
}
|
||||||
|
#Submit_Flag h3 {
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: left;
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.Incorrect, .Correct {
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 125%;
|
||||||
|
}
|
||||||
|
.Incorrect {
|
||||||
|
background-color: red;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.Correct {
|
||||||
|
background-color: lawngreen;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* hints for each flag */
|
||||||
|
#Hints {
|
||||||
|
background-color: white;
|
||||||
|
grid-row: 2/4;
|
||||||
|
grid-column: 4/5;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
background-color: white;
|
||||||
|
resize: none;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Linux Shell for commands */
|
||||||
|
#Linux_Shell {
|
||||||
|
grid-row: 4/5;
|
||||||
|
grid-column: 2/5;
|
||||||
|
color: lawngreen;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* when a flag is selected */
|
||||||
|
.selected-flag {
|
||||||
|
background-color: lightgray;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Flags and Hints Labels */
|
||||||
|
.FlagHint {
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
margin: 10px;
|
||||||
|
font-size: 200%;
|
||||||
|
}
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
<!--
|
||||||
|
Alex Miller
|
||||||
|
Jordan Latimer
|
||||||
|
|
||||||
|
Contest Page for Admins
|
||||||
|
-->
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title> NMU CTF Contest Page </title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Bar at top for moving tabs -->
|
||||||
|
<div id="Taskbar">
|
||||||
|
<a (click)="confirmSelection()"> Profile </a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Contest name -->
|
||||||
|
<div id="Contest_Name">
|
||||||
|
<h1 id="ContHeader"></h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Sidebar thats scrollable for different flags -->
|
||||||
|
<div id="Flag_Sidebar">
|
||||||
|
<h2 class="FlagHint">Flags</h2>
|
||||||
|
<ul id="FlagList">
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- details for each flag (name, description etc) -->
|
||||||
|
<div id="Flag_Deats">
|
||||||
|
<div id ="DefaultMessage">
|
||||||
|
<h2>Welcome to NMU CTF</h2>
|
||||||
|
<p>There are currently no contests active at this time</p>
|
||||||
|
</div>
|
||||||
|
<h2 id="ContName"></h2>
|
||||||
|
<p id="ContDesc"></p>
|
||||||
|
<h2 id="Flag_Name"></h2>
|
||||||
|
<p id="Desc" ></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="Submit_Flag">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- Hints for each flag -->
|
||||||
|
<div id="Hints">
|
||||||
|
<div id="Hint_Stuff">
|
||||||
|
<h2 class="FlagHint"> Hints </h2>
|
||||||
|
<div id="Hint_Butts">
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<textarea readonly rows="15" cols="30" id="Hint_Desc"></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Linux Shell for commands -->
|
||||||
|
<div id="Linux_Shell"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { AdminContestComponent } from './admin-contest.component';
|
||||||
|
|
||||||
|
describe('AdminContestComponent', () => {
|
||||||
|
let component: AdminContestComponent;
|
||||||
|
let fixture: ComponentFixture<AdminContestComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [AdminContestComponent]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(AdminContestComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,39 @@
|
|||||||
|
import { Component, ElementRef, Renderer2 } from '@angular/core';
|
||||||
|
import { gotoPage, getEmail } from '../Helper/Helpers';
|
||||||
|
import { Router } from '@angular/router';
|
||||||
|
import { loadPage } from '../Helper/ContestSetup';
|
||||||
|
import { TerminalService } from '../Helper/terminal.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-admin-contest',
|
||||||
|
imports: [],
|
||||||
|
templateUrl: './admin-contest.component.html',
|
||||||
|
styleUrl: './admin-contest.component.css'
|
||||||
|
})
|
||||||
|
export class AdminContestComponent {
|
||||||
|
|
||||||
|
constructor(private renderer: Renderer2, private el: ElementRef, private router: Router, private terminalService: TerminalService){}
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
|
||||||
|
// attach to terminal onload
|
||||||
|
this.terminalService.reattachTerminal();
|
||||||
|
|
||||||
|
loadPage(this.renderer, this.el, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
confirmSelection(){
|
||||||
|
const confirmSelection_ = confirm("You will lose your current flag progress, are you sure?");
|
||||||
|
if(confirmSelection_){
|
||||||
|
gotoPage(this.router, '/admin-profile');
|
||||||
|
}
|
||||||
|
else
|
||||||
|
console.log("Profile navigation canceled");
|
||||||
|
}
|
||||||
|
|
||||||
|
// clear and set terminal for new flag
|
||||||
|
async ClearAndSetTerminal() {
|
||||||
|
await this.terminalService.ClearTerminal();
|
||||||
|
await this.terminalService.reattachTerminal();
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,164 @@
|
|||||||
|
/*
|
||||||
|
Alex Miller
|
||||||
|
Jordan Latimer
|
||||||
|
|
||||||
|
CSS for Profile Page on Admin side
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: grid;
|
||||||
|
|
||||||
|
/* columns and rows sizes */
|
||||||
|
grid-template-columns: auto auto auto auto auto;
|
||||||
|
grid-template-rows: auto auto auto auto auto auto;
|
||||||
|
|
||||||
|
background-color: lightgreen;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
#Header {
|
||||||
|
grid-row: 1/3;
|
||||||
|
grid-column: 1/6;
|
||||||
|
margin: 50px;
|
||||||
|
text-align: center;
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
.HeadButts {
|
||||||
|
height: 25px;
|
||||||
|
width: 150px;
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
#ModifyContests {
|
||||||
|
background-color: blue;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
#Logout {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
#ContestPage {
|
||||||
|
background-color: lawngreen;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Student side of the page */
|
||||||
|
#Students {
|
||||||
|
grid-row: 4/6;
|
||||||
|
grid-column: 1/3;
|
||||||
|
margin: 50px;
|
||||||
|
height: 500px;
|
||||||
|
text-align: center;
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
#Student_Search input, select, button {
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
.StudentButts, .FlagButts, select {
|
||||||
|
width: 23%;
|
||||||
|
height: 25px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#SortButt {
|
||||||
|
width: 10%;
|
||||||
|
background-color: blue;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
#StudentsTable, #FlagsTable {
|
||||||
|
margin: 10px;
|
||||||
|
height: 75%;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Flag side of the page */
|
||||||
|
#Flags {
|
||||||
|
grid-row: 4/6;
|
||||||
|
grid-column: 4/6;
|
||||||
|
margin: 50px;
|
||||||
|
text-align: center;
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
#ContestDropDown button, select {
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Popup for deleting students */
|
||||||
|
#DialogBox {
|
||||||
|
text-align: center;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
padding: 100px;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
#DialogBox #Delete {
|
||||||
|
background-color: red;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
#DialogBox button {
|
||||||
|
height: 25px;
|
||||||
|
width: 75px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* buttons */
|
||||||
|
#AddStudent {
|
||||||
|
background-color: lawngreen;
|
||||||
|
}
|
||||||
|
#EditStudent {
|
||||||
|
background-color: blue;
|
||||||
|
color: white;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
#DeleteStudent {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* tooltips */
|
||||||
|
.tooltip {
|
||||||
|
font-weight: bold;
|
||||||
|
color: white;
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.tooltip:hover .tooltipText {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
.tooltip .tooltipText {
|
||||||
|
visibility: hidden;
|
||||||
|
height: auto;
|
||||||
|
background-color: gray;
|
||||||
|
color: black;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
padding: 5px;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* no ID stuff */
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border: 3px solid black;
|
||||||
|
border-collapse: seperate;
|
||||||
|
border-spacing: 0;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
table thead {
|
||||||
|
top: 0;
|
||||||
|
position: sticky;
|
||||||
|
position: -webkit-sticky;
|
||||||
|
z-index: 1;
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
td {
|
||||||
|
border: 3px solid black;
|
||||||
|
text-align: center;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 80%;
|
||||||
|
height: 50%;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
display: inline;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
@ -0,0 +1,169 @@
|
|||||||
|
<!--
|
||||||
|
Alex Miller
|
||||||
|
Jordan Latimer
|
||||||
|
|
||||||
|
Profile Page for Admins
|
||||||
|
-->
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title> NMU CTF Profile Page </title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="Header">
|
||||||
|
<h1> Profile </h1>
|
||||||
|
<div class="tooltip">
|
||||||
|
?
|
||||||
|
<span class="tooltipText">
|
||||||
|
This is where you can do anything and
|
||||||
|
<br>
|
||||||
|
everything with your <span style="color: white">Students</span>
|
||||||
|
or look at the current stats for <span style="color: white;">Flags</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<button class='HeadButts' id="ContestPage" (click)="navtoPageAC()">Back to Contest</button>
|
||||||
|
<button class='HeadButts' id="ModifyContests" (click)="navtoPageMC()">Modify Contests</button>
|
||||||
|
<button class='HeadButts' id="Logout" (click)="onLogout()">Logout</button>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- everything with students side of the page -->
|
||||||
|
<div id="Students">
|
||||||
|
<h1> Students </h1>
|
||||||
|
<div class="tooltip">
|
||||||
|
?
|
||||||
|
<span class="tooltipText">
|
||||||
|
Here you will see a list of your <span style="color:white">Students</span>
|
||||||
|
<br>
|
||||||
|
you can search for specific students
|
||||||
|
<br>
|
||||||
|
or filter them how you would like. For searching a specific <span style="color:white;">Student</span>, make sure
|
||||||
|
<br>
|
||||||
|
<span style="color:white;">Name</span> is selected in the dropdown
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<!-- searching for students -->
|
||||||
|
<div id="Student_Search">
|
||||||
|
<input id="StudentName" type="text" placeholder="Student Name" [(ngModel)]="searchText">
|
||||||
|
<select id="Options">
|
||||||
|
<option disabled selected hidden> Sort By: </option>
|
||||||
|
<option value="Name (A->Z)"> Name (A->Z) </option>
|
||||||
|
<option value="Name (Z->A)"> Name (Z->A) </option>
|
||||||
|
<option value="Flags (H->L)"> Flags (H->L) </option>
|
||||||
|
<option value="Flags (L->H)"> Flags (L->H) </option>
|
||||||
|
</select>
|
||||||
|
<button class="StudentButts" id="SortButt" (click)="sortTable()">Sort</button>
|
||||||
|
<button class="StudentButts" id="AddStudent" (click)="openAddUserPopup()"> Add Student </button>
|
||||||
|
|
||||||
|
<div class="tooltip">
|
||||||
|
?
|
||||||
|
<span class="tooltipText">
|
||||||
|
<span style="color:lawngreen;">Add Student: </span> opens a popup to add a <span style="color:white;">Student</span> to the list
|
||||||
|
<br>
|
||||||
|
<span style="color:blue;">Edit: </span> allows you to edit a students <span style="color:white;">Password</span>
|
||||||
|
<br>
|
||||||
|
<span style="color:red;">Delete: </span> Deletes a <span style="color:white;">Student</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Student Table -->
|
||||||
|
<div id="StudentsTable">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th> Student Name </th>
|
||||||
|
<th> Flags </th>
|
||||||
|
<th> Email </th>
|
||||||
|
<th> Change Password </th>
|
||||||
|
<th> Delete </th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="TBody">
|
||||||
|
<tr *ngFor="let user of users">
|
||||||
|
<td>{{ user.Name }}</td>
|
||||||
|
<td>{{ user.Flags }}</td>
|
||||||
|
<td>{{ user.Email }}</td>
|
||||||
|
<td><button id="EditStudent" (click)="openPasswordPopup(user.Email)">Edit</button></td>
|
||||||
|
<td><button id="DeleteStudent" (click)="openDeleteDialog(user.Email)">Delete</button></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- everythig with the flags side of the page -->
|
||||||
|
<div id="Flags">
|
||||||
|
<h1> Flags </h1>
|
||||||
|
<div class="tooltip">
|
||||||
|
?
|
||||||
|
<span class="tooltipText">
|
||||||
|
This is where you can look at how your <span style="color:white;">Students</span>
|
||||||
|
<br>
|
||||||
|
are doing with the <span style="color:white;">Flags</span> you created
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<!-- dropdown for contests -->
|
||||||
|
<div id="ContestDropDown">
|
||||||
|
<select id="DropDown" [(ngModel)]="selectedContest">
|
||||||
|
<option disabled selected hidden> Select a Contest </option>
|
||||||
|
<option *ngFor="let contest of contests" [value] ="contest.Name">{{ contest.Name }}</option>
|
||||||
|
</select>
|
||||||
|
<button class="FlagButts" (click)="populateFlagsTable()">Get Flags</button>
|
||||||
|
<button class="FlagButts" (click)="openLeaderboardPopup(getEmail())">Leaderboard</button>
|
||||||
|
|
||||||
|
<div class="tooltip">
|
||||||
|
?
|
||||||
|
<span class="tooltipText">
|
||||||
|
<span style="color:white;">Get Flags: </span> shows all the <span style="color:white;">Flags</span> for that contests and the stats
|
||||||
|
<br>
|
||||||
|
<span style="color:white;">Leaderboard: </span> popup a leaderboard for that <span style="color:white;">Contest</span> to see how each <span style="color:white;">Student</span> is doing
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- table for flags -->
|
||||||
|
<div id="FlagsTable">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th> Flag Name </th>
|
||||||
|
<th> Attempts </th>
|
||||||
|
<th> Completions </th>
|
||||||
|
<th> Ratio </th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="FlagTBody">
|
||||||
|
<tr *ngFor="let flag of flags">
|
||||||
|
<td>{{ flag.Name }}</td>
|
||||||
|
<td>{{ getAttempts(flag.FlagID )}}</td>
|
||||||
|
<td>{{ getCompletions(flag.FlagID) }}</td>
|
||||||
|
<td [ngStyle]="{ color: getRatioColor(flag.FlagID) }"> {{ getRatio(flag.FlagID) }}%</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Dialog box for reassurance of deleting a student -->
|
||||||
|
<dialog id="DialogBox">
|
||||||
|
Are you sure you want to delete <strong id="emailDB">{{ emailToDelete }}</strong>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<button (click)="closeDialog()"> Cancel </button>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<button id="Delete" (click)="deleteUser()"> Delete </button>
|
||||||
|
</dialog>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { AdminProfileComponent } from './admin-profile.component';
|
||||||
|
|
||||||
|
describe('AdminProfileComponent', () => {
|
||||||
|
let component: AdminProfileComponent;
|
||||||
|
let fixture: ComponentFixture<AdminProfileComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [AdminProfileComponent]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(AdminProfileComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,179 @@
|
|||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { Router } from '@angular/router';
|
||||||
|
import { gotoPage, logOut, getEmail, Popup } from '../Helper/Helpers';
|
||||||
|
import { AdminProfileService } from './admin-profile.service';
|
||||||
|
import { Flag } from '../models/flag.model';
|
||||||
|
import { User } from '../models/user.model';
|
||||||
|
import { Contest } from '../models/contest.model';
|
||||||
|
import { Submission } from '../models/submission.model';
|
||||||
|
import { NgFor } from '@angular/common';
|
||||||
|
import { FormsModule } from '@angular/forms';
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-admin-profile',
|
||||||
|
imports: [NgFor, FormsModule, CommonModule],
|
||||||
|
templateUrl: './admin-profile.component.html',
|
||||||
|
styleUrl: './admin-profile.component.css'
|
||||||
|
})
|
||||||
|
export class AdminProfileComponent implements OnInit{
|
||||||
|
users: User[] = []
|
||||||
|
displayedUsers: User[] = []
|
||||||
|
contests: Contest[] = []
|
||||||
|
subs: Submission[] = []
|
||||||
|
flags: Flag[] = []
|
||||||
|
selectedContest: string = '';
|
||||||
|
sortOption: string = '';
|
||||||
|
constructor(private router: Router, private adminProfileService: AdminProfileService){}
|
||||||
|
emailToDelete = '';
|
||||||
|
searchText: string = '';
|
||||||
|
|
||||||
|
ngOnInit(){
|
||||||
|
this.getContests();
|
||||||
|
this.populateTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
async populateTable(){
|
||||||
|
try{
|
||||||
|
const email = this.getEmail();
|
||||||
|
const users = await this.adminProfileService.getAllUsers(email);
|
||||||
|
this.users = users;
|
||||||
|
} catch(error) {
|
||||||
|
console.error('Error populating user table', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async populateFlagsTable(): Promise<void> {
|
||||||
|
if(!this.selectedContest){
|
||||||
|
alert('Must select a contest');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try{
|
||||||
|
const email = getEmail();
|
||||||
|
const result = await this.adminProfileService.getContestFlagsSubs(email, this.selectedContest);
|
||||||
|
this.flags = result.flags;
|
||||||
|
this.subs = result.subs;
|
||||||
|
}catch(error){
|
||||||
|
console.error('Failed to populate flag table');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getAttempts(flagId: number): number{
|
||||||
|
return this.subs.filter(sub => sub.FlagID === flagId).reduce((acc, sub) => acc + sub.Attempts, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
getCompletions(flagId: number): number{
|
||||||
|
return this.subs.filter(sub => sub.FlagID === flagId).reduce((acc, sub) => acc + (sub.IsCorrect ? 1 : 0), 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
getRatio(flagId: number): number{
|
||||||
|
const attempts = this.getAttempts(flagId);
|
||||||
|
const completions = this.getCompletions(flagId);
|
||||||
|
return attempts > 0 ? +(completions / attempts * 100).toFixed(2) : 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
getRatioColor(flagId: number): string{
|
||||||
|
const ratio = this.getRatio(flagId);
|
||||||
|
if(ratio >= 80) return 'lawngreen';
|
||||||
|
else if (ratio >= 60) return 'orange';
|
||||||
|
return 'red';
|
||||||
|
}
|
||||||
|
|
||||||
|
openPasswordPopup(email: string){
|
||||||
|
sessionStorage.setItem('selectedUser', email);
|
||||||
|
Popup('/edit-student');
|
||||||
|
}
|
||||||
|
|
||||||
|
openAddUserPopup(){
|
||||||
|
Popup('/add-student');
|
||||||
|
}
|
||||||
|
|
||||||
|
openLeaderboardPopup(email: string){
|
||||||
|
Popup('Leaderboard.html');
|
||||||
|
}
|
||||||
|
|
||||||
|
async getContests(){
|
||||||
|
try {
|
||||||
|
const email = this.getEmail();
|
||||||
|
const contests = await this.adminProfileService.getContests(email);
|
||||||
|
this.contests = contests;
|
||||||
|
} catch(error){
|
||||||
|
console.error("Error getting contests", error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
openDeleteDialog(email: string): void {
|
||||||
|
this.emailToDelete = email;
|
||||||
|
const dialog = document.getElementById('DialogBox') as HTMLDialogElement
|
||||||
|
if(dialog){
|
||||||
|
dialog.showModal();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async deleteUser(){
|
||||||
|
try{
|
||||||
|
if(!this.emailToDelete) return;
|
||||||
|
await this.adminProfileService.deleteUser(this.emailToDelete);
|
||||||
|
console.log("User deleted successfully");
|
||||||
|
this.closeDialog();
|
||||||
|
this.populateTable();
|
||||||
|
} catch(error) {
|
||||||
|
console.error("Error deleting user", error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
closeDialog(): void {
|
||||||
|
const dialog = document.getElementById('DialogBox') as HTMLDialogElement;
|
||||||
|
if(dialog)
|
||||||
|
dialog.close();
|
||||||
|
this.emailToDelete = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
sortTable(): void{
|
||||||
|
const name = this.searchText.trim().toLowerCase();
|
||||||
|
const option = this.sortOption;
|
||||||
|
let sorted = [...this.users];
|
||||||
|
|
||||||
|
if((option === 'Name (A->Z)' || option === 'Name (Z->A)') && name !== ''){
|
||||||
|
const targetIndex = sorted.findIndex(s => s.Name.toLowerCase() === name);
|
||||||
|
if(targetIndex !== -1){
|
||||||
|
const student = sorted.splice(targetIndex, 1)[0];
|
||||||
|
sorted.unshift(student);
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
alert('Student is not in database');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(option === 'Name (A->Z)'){
|
||||||
|
sorted.sort((a, b) => a.Name.localeCompare(b.Name));
|
||||||
|
}
|
||||||
|
else if(option === 'Name (Z->A)'){
|
||||||
|
sorted.sort((a, b) => b.Name.localeCompare(a.Name));
|
||||||
|
}
|
||||||
|
else if(option === 'Flags (H->L)'){
|
||||||
|
sorted.sort((a, b) => b.Flags - a.Flags);
|
||||||
|
}
|
||||||
|
else if(option === 'Flags (L->H)'){
|
||||||
|
sorted.sort((b, a) => a.Flags - b.Flags);
|
||||||
|
}
|
||||||
|
this.displayedUsers = sorted;
|
||||||
|
}
|
||||||
|
|
||||||
|
navtoPageAC(): void{
|
||||||
|
gotoPage(this.router, '/admin-contest');
|
||||||
|
}
|
||||||
|
|
||||||
|
navtoPageMC(): void{
|
||||||
|
gotoPage(this.router, '/modify-contest');
|
||||||
|
}
|
||||||
|
|
||||||
|
onLogout(): void{
|
||||||
|
logOut(this.router);
|
||||||
|
}
|
||||||
|
|
||||||
|
getEmail(): string{
|
||||||
|
return getEmail();
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
import { TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { AdminProfileService } from './admin-profile.service';
|
||||||
|
|
||||||
|
describe('AdminProfileService', () => {
|
||||||
|
let service: AdminProfileService;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
TestBed.configureTestingModule({});
|
||||||
|
service = TestBed.inject(AdminProfileService);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should be created', () => {
|
||||||
|
expect(service).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,90 @@
|
|||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: 'root'
|
||||||
|
})
|
||||||
|
|
||||||
|
export class AdminProfileService {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
async getAllUsers(email: string): Promise<any> {
|
||||||
|
try {
|
||||||
|
const response = await fetch('api/users/getAllUsers', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ email })
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to fetch users');
|
||||||
|
}
|
||||||
|
return await response.json();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching users:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async deleteUser(email: string): Promise<any> {
|
||||||
|
try {
|
||||||
|
const response = await fetch('api/users/DeleteStudent', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ email })
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to delete user');
|
||||||
|
}
|
||||||
|
return await response.json();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error deleting user:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async getContests(email: string): Promise<any> {
|
||||||
|
try {
|
||||||
|
const response = await fetch('api/contests/getContests', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ email })
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to fetch contests');
|
||||||
|
}
|
||||||
|
return await response.json();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching contests:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async getContestFlagsSubs(email: string, contest: string): Promise<any> {
|
||||||
|
try {
|
||||||
|
const response = await fetch('api/getContestFlagsSubs', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ email, contest })
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to fetch contest flags');
|
||||||
|
}
|
||||||
|
return await response.json();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching contest flags:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<router-outlet></router-outlet>
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
import { TestBed } from '@angular/core/testing';
|
||||||
|
import { AppComponent } from './app.component';
|
||||||
|
|
||||||
|
describe('AppComponent', () => {
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [AppComponent],
|
||||||
|
}).compileComponents();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create the app', () => {
|
||||||
|
const fixture = TestBed.createComponent(AppComponent);
|
||||||
|
const app = fixture.componentInstance;
|
||||||
|
expect(app).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
it(`should have the 'CTF-Frontend' title`, () => {
|
||||||
|
const fixture = TestBed.createComponent(AppComponent);
|
||||||
|
const app = fixture.componentInstance;
|
||||||
|
expect(app.title).toEqual('CTF-Frontend');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render title', () => {
|
||||||
|
const fixture = TestBed.createComponent(AppComponent);
|
||||||
|
fixture.detectChanges();
|
||||||
|
const compiled = fixture.nativeElement as HTMLElement;
|
||||||
|
expect(compiled.querySelector('h1')?.textContent).toContain('Hello, CTF-Frontend');
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
import { Component } from '@angular/core';
|
||||||
|
import { Router, RouterOutlet } from '@angular/router';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-root',
|
||||||
|
imports: [RouterOutlet],
|
||||||
|
templateUrl: './app.component.html',
|
||||||
|
styleUrl: './app.component.css'
|
||||||
|
})
|
||||||
|
export class AppComponent {
|
||||||
|
title = 'CTF-Frontend';
|
||||||
|
|
||||||
|
constructor(private router: Router){}
|
||||||
|
}
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
|
||||||
|
import { provideRouter } from '@angular/router';
|
||||||
|
|
||||||
|
import { routes } from './app.routes';
|
||||||
|
|
||||||
|
export const appConfig: ApplicationConfig = {
|
||||||
|
providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
|
||||||
|
};
|
||||||
@ -0,0 +1,131 @@
|
|||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { AuthGuard } from './guards/auth.guard';
|
||||||
|
import { AdminGuard } from './guards/AdminGuard.guard';
|
||||||
|
import { UserGuard } from './guards/UserGuard.guard';
|
||||||
|
import { Routes, RouterModule } from '@angular/router';
|
||||||
|
import { LoginComponent } from './login/login.component';
|
||||||
|
import { UserMenuComponent } from './user-menu/user-menu.component';
|
||||||
|
import { UserProfileComponent } from './user-profile/user-profile.component';
|
||||||
|
import { ContestPageComponent } from './contest-page/contest-page.component';
|
||||||
|
import { UserProfileACComponent } from './user-profile-ac/user-profile-ac.component';
|
||||||
|
import { AdminContestComponent } from './admin-contest/admin-contest.component';
|
||||||
|
import { AdminProfileComponent } from './admin-profile/admin-profile.component';
|
||||||
|
import { LeaderboardComponent } from './leaderboard/leaderboard.component';
|
||||||
|
import { ModifyContestComponent } from './modify-contest/modify-contest.component';
|
||||||
|
import { AddContestComponent } from './add-contest/add-contest.component';
|
||||||
|
import { AddStudentComponent } from './add-student/add-student.component';
|
||||||
|
import { EditStudentComponent } from './edit-student/edit-student.component';
|
||||||
|
import { AddFlagComponent } from './add-flag/add-flag.component';
|
||||||
|
import { UNAUTHORIZEDComponent } from './unauthorized/unauthorized.component';
|
||||||
|
import { CreateImageComponent } from './create-image/create-image.component';
|
||||||
|
|
||||||
|
export const routes: Routes = [
|
||||||
|
{
|
||||||
|
path:'',
|
||||||
|
component: LoginComponent,
|
||||||
|
title: 'Login',
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
path: 'user-menu',
|
||||||
|
component: UserMenuComponent,
|
||||||
|
title: 'User Menu',
|
||||||
|
canActivate: [AuthGuard, UserGuard]
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
path: 'user-profile',
|
||||||
|
component: UserProfileComponent,
|
||||||
|
title: 'User Profile',
|
||||||
|
canActivate: [AuthGuard, UserGuard]
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
path: 'contest-page',
|
||||||
|
component: ContestPageComponent,
|
||||||
|
title: 'Contest Page',
|
||||||
|
canActivate: [AuthGuard, UserGuard]
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
path: 'user-profileAC',
|
||||||
|
component: UserProfileACComponent,
|
||||||
|
title: 'User Profile',
|
||||||
|
canActivate: [AuthGuard, UserGuard]
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
path: 'admin-contest',
|
||||||
|
component: AdminContestComponent,
|
||||||
|
title: 'Admin Contest',
|
||||||
|
canActivate: [AuthGuard, AdminGuard]
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
path: 'admin-profile',
|
||||||
|
component: AdminProfileComponent,
|
||||||
|
title: 'Admin Profile',
|
||||||
|
canActivate: [AuthGuard, AdminGuard]
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
path: 'leaderboard',
|
||||||
|
component: LeaderboardComponent,
|
||||||
|
title: 'Leaderboard'
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
path: 'modify-contest',
|
||||||
|
component: ModifyContestComponent,
|
||||||
|
title: 'Modify Contest',
|
||||||
|
canActivate: [AuthGuard, AdminGuard]
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
path: 'add-contest',
|
||||||
|
component: AddContestComponent,
|
||||||
|
title: 'Add Contest',
|
||||||
|
canActivate: [AuthGuard, AdminGuard]
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
path: 'add-student',
|
||||||
|
component: AddStudentComponent,
|
||||||
|
title: 'Add Student',
|
||||||
|
canActivate: [AuthGuard, AdminGuard]
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
path: 'edit-student',
|
||||||
|
component: EditStudentComponent,
|
||||||
|
title: 'Edit Student',
|
||||||
|
canActivate: [AuthGuard, AdminGuard]
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
path: 'add-flag',
|
||||||
|
component: AddFlagComponent,
|
||||||
|
title: 'Add Flag',
|
||||||
|
canActivate: [AuthGuard, AdminGuard]
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
path: 'unauthorized',
|
||||||
|
component: UNAUTHORIZEDComponent,
|
||||||
|
title: 'You think youre slick eh?'
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
path: 'create-image',
|
||||||
|
component: CreateImageComponent,
|
||||||
|
title: 'Create Image'
|
||||||
|
}
|
||||||
|
|
||||||
|
];
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [RouterModule.forRoot(routes)],
|
||||||
|
exports: [RouterModule],
|
||||||
|
})
|
||||||
|
|
||||||
|
export class AppRoutingModule{}
|
||||||
@ -0,0 +1,157 @@
|
|||||||
|
/*
|
||||||
|
Jordan Latimer
|
||||||
|
Alex Miller
|
||||||
|
|
||||||
|
CSS for both Contest Pages
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: grid;
|
||||||
|
background-color: green;
|
||||||
|
|
||||||
|
/* columns and rows sizes */
|
||||||
|
grid-template-columns: 15% 10% auto 20%;
|
||||||
|
grid-template-rows: 10% 40% 10% auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Name of the contest at the top left */
|
||||||
|
#Contest_Name {
|
||||||
|
grid-row: 1/2;
|
||||||
|
grid-column: 1/3;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 175%;
|
||||||
|
}
|
||||||
|
#Contest_Name * {
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* sidebar thats scrollable for different flags */
|
||||||
|
#Flag_Sidebar {
|
||||||
|
background-color: white;
|
||||||
|
grid-row: 2/5;
|
||||||
|
grid-column: 1/2;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
#Flag_Sidebar ul {
|
||||||
|
list-style-type: none;
|
||||||
|
height: 80%;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
background-color: white;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* details for each flag (name, description, etc) */
|
||||||
|
#Flag_Deats {
|
||||||
|
background-color: white;
|
||||||
|
grid-row: 2/3;
|
||||||
|
grid-column: 2/4;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#notificationMessage {
|
||||||
|
background-color: rgba(65, 145, 55, 0.511);
|
||||||
|
margin-left: 50%;
|
||||||
|
grid-row: 3/4;
|
||||||
|
grid-column: 3/5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notificationMessage {
|
||||||
|
background-color: rgba(65, 145, 55, 0.511);
|
||||||
|
margin-left: 50%;
|
||||||
|
grid-row: 3/4;
|
||||||
|
grid-column: 3/5;
|
||||||
|
}
|
||||||
|
|
||||||
|
#Notifications.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.notification-banner {
|
||||||
|
background-color: rgba(65, 145, 55, 0.511);
|
||||||
|
margin-left: 50%;
|
||||||
|
grid-row: 3/4;
|
||||||
|
grid-column: 3/5;
|
||||||
|
border-radius: 5px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Submitting the flag */
|
||||||
|
#Submit_Flag {
|
||||||
|
background-color: white;
|
||||||
|
grid-row: 3/4;
|
||||||
|
grid-column: 2/4;
|
||||||
|
|
||||||
|
}
|
||||||
|
#Submit_Flag_Stuff * {
|
||||||
|
height: 40%;
|
||||||
|
width: 15%;
|
||||||
|
}
|
||||||
|
#Submit_Butt {
|
||||||
|
background-color: lawngreen;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 100%;
|
||||||
|
}
|
||||||
|
#Submit_Flag h3 {
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: left;
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.Incorrect, .Correct {
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 125%;
|
||||||
|
}
|
||||||
|
.Incorrect {
|
||||||
|
background-color: red;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.Correct {
|
||||||
|
background-color: lawngreen;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* hints for each flag */
|
||||||
|
#Hints {
|
||||||
|
background-color: white;
|
||||||
|
grid-row: 2/4;
|
||||||
|
grid-column: 4/5;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
background-color: white;
|
||||||
|
resize: none;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Linux Shell for commands */
|
||||||
|
#Linux_Shell {
|
||||||
|
grid-row: 4/5;
|
||||||
|
grid-column: 2/5;
|
||||||
|
color: lawngreen;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* when a flag is selected */
|
||||||
|
.selected-flag {
|
||||||
|
background-color: lightgray;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Flags and Hints Labels */
|
||||||
|
.FlagHint {
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
margin: 10px;
|
||||||
|
font-size: 200%;
|
||||||
|
}
|
||||||
@ -0,0 +1,75 @@
|
|||||||
|
<!--
|
||||||
|
Alex Miller
|
||||||
|
Jordan Latimer
|
||||||
|
|
||||||
|
Contest Page for Users
|
||||||
|
-->
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title> NMU CTF Contest Page </title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Bar at top for moving tabs, this is for the practice contest -->
|
||||||
|
<ng-container *ngIf="isPractice">
|
||||||
|
<a href="#" (click)="confirmSelection(1); $event.preventDefault()">Leave Practice</a>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Show if NOT Admin and NOT in Practice -->
|
||||||
|
<ng-container id="Taskbar" *ngIf="!isPractice && !isAdmin">
|
||||||
|
<a id="Current_Page" href="#" (click)="navtoPageUM(); $event.preventDefault()">Contest</a>
|
||||||
|
<a href="#" (click)="confirmSelection(2); $event.preventDefault()">Profile</a>
|
||||||
|
</ng-container>
|
||||||
|
<!-- Contest name -->
|
||||||
|
<div id="Contest_Name">
|
||||||
|
<h1 id="ContHeader"></h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Sidebar thats scrollable for different flags -->
|
||||||
|
<div id="Flag_Sidebar">
|
||||||
|
<h2 class="FlagHint"> Flags </h2>
|
||||||
|
<ul id="FlagList">
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- details for each flag (name, description etc) -->
|
||||||
|
<div id="Flag_Deats">
|
||||||
|
<div id ="DefaultMessage">
|
||||||
|
<h2>Welcome to NMU CTF</h2>
|
||||||
|
<p>There are currently no contests active at this time</p>
|
||||||
|
</div>
|
||||||
|
<h2 id="ContName"></h2>
|
||||||
|
<p id="ContDesc"></p>
|
||||||
|
<h2 id="Flag_Name"></h2>
|
||||||
|
<p id="Desc"></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Submitting the flag -->
|
||||||
|
<div id="Submit_Flag">
|
||||||
|
<div id="Submit_Flag_Stuff">
|
||||||
|
<h3> Submit Flag: </h3>
|
||||||
|
<input type="text" placeholder="NMUCTF${FLAG}">
|
||||||
|
<input id="Submit_Butt" type="submit" value="Submit" (click)="onSubmission()">
|
||||||
|
<p id="Submission_Result"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div *ngIf="notificationMessage" id="notificationMessage" class="notificationMessage">
|
||||||
|
{{ notificationMessage }}
|
||||||
|
</div>
|
||||||
|
<!-- Hints for each flag -->
|
||||||
|
<div id="Hints">
|
||||||
|
<div id="Hint_Stuff">
|
||||||
|
<h2 class="FlagHint"> Hints </h2>
|
||||||
|
<div id="Hint_Butts">
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<textarea readonly rows="15" cols="30" id="Hint_Desc"></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Linux Shell for commands -->
|
||||||
|
<div id="Linux_Shell"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { ContestPageComponent } from './contest-page.component';
|
||||||
|
|
||||||
|
describe('ContestPageComponent', () => {
|
||||||
|
let component: ContestPageComponent;
|
||||||
|
let fixture: ComponentFixture<ContestPageComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [ContestPageComponent]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(ContestPageComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,88 @@
|
|||||||
|
import { Component, ElementRef, OnInit, Renderer2 } from '@angular/core';
|
||||||
|
import { NgIf } from '@angular/common';
|
||||||
|
import { Router } from '@angular/router'
|
||||||
|
import { loadPage, handleSubmission, getAdmin } from '../Helper/ContestSetup';
|
||||||
|
import { getEmail, gotoPage } from '../Helper/Helpers';
|
||||||
|
import { TerminalService } from '../Helper/terminal.service';
|
||||||
|
import { SocketIOService } from '../notifications/socket-io.service';
|
||||||
|
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-contest-page',
|
||||||
|
imports: [NgIf],
|
||||||
|
templateUrl: './contest-page.component.html',
|
||||||
|
styleUrl: './contest-page.component.css'
|
||||||
|
})
|
||||||
|
|
||||||
|
export class ContestPageComponent implements OnInit {
|
||||||
|
isPractice = window.location.href.includes("Prac");
|
||||||
|
isAdmin: boolean = this.isItAdmin();
|
||||||
|
notificationMessage: string | null = null;
|
||||||
|
|
||||||
|
constructor(private renderer: Renderer2,
|
||||||
|
private el: ElementRef,
|
||||||
|
private router: Router,
|
||||||
|
private terminalService: TerminalService,
|
||||||
|
private socketService: SocketIOService) {}
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
// attach to terminal onload
|
||||||
|
this.terminalService.reattachTerminal();
|
||||||
|
//this.socketService.connect();
|
||||||
|
loadPage(this.renderer, this.el, this);
|
||||||
|
/*this.socketService.listen('submission-notification').subscribe((data: any) => {
|
||||||
|
console.log('Received notification:', data);
|
||||||
|
this.notificationMessage = `${data.email} solved ${data.flagName}!`;
|
||||||
|
console.log('Updated notif:', this.notificationMessage);
|
||||||
|
setTimeout(() => {
|
||||||
|
this.notificationMessage = null;
|
||||||
|
}, 5000);
|
||||||
|
});*/
|
||||||
|
|
||||||
|
this.socketService.listen('test-event').subscribe((data: any) => {
|
||||||
|
console.log('Test event received:', data);
|
||||||
|
this.notificationMessage = 'Test event received';
|
||||||
|
});
|
||||||
|
this.socketService.emit('test-event', { message: 'Hello from client' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// clear and set terminal for new flag
|
||||||
|
async ClearAndSetTerminal() {
|
||||||
|
await this.terminalService.ClearTerminal();
|
||||||
|
await this.terminalService.reattachTerminal();
|
||||||
|
}
|
||||||
|
|
||||||
|
onSubmission(): void{
|
||||||
|
handleSubmission(this.el, this.socketService);
|
||||||
|
}
|
||||||
|
|
||||||
|
confirmSelection(num: number){
|
||||||
|
const confirmSelection_ = confirm("You will lose your current flag progress, are you sure?");
|
||||||
|
if(confirmSelection_){
|
||||||
|
const email = getEmail();
|
||||||
|
if(num === 1)
|
||||||
|
gotoPage(this.router, '/user-menu');
|
||||||
|
else
|
||||||
|
gotoPage(this.router, '/user-profileAC');
|
||||||
|
}
|
||||||
|
else
|
||||||
|
console.log("Profile navigation canceled");
|
||||||
|
}
|
||||||
|
|
||||||
|
navtoPageA(): void {
|
||||||
|
gotoPage(this.router, '/contest-page');
|
||||||
|
}
|
||||||
|
|
||||||
|
navtoPageUM(): void{
|
||||||
|
gotoPage(this.router, '/user-menu')
|
||||||
|
}
|
||||||
|
|
||||||
|
isItAdmin(): boolean{
|
||||||
|
if(getAdmin() === "True")
|
||||||
|
return true;
|
||||||
|
else
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,99 @@
|
|||||||
|
/*
|
||||||
|
Alex Miller
|
||||||
|
Jordan Latimer
|
||||||
|
|
||||||
|
CSS for Create image
|
||||||
|
*/
|
||||||
|
|
||||||
|
#body {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 30% 30% auto;
|
||||||
|
grid-template-rows: auto auto auto auto auto;
|
||||||
|
background-color: lightgreen;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
#HeaderDiv {
|
||||||
|
grid-row: 1/2;
|
||||||
|
grid-column: 1/4;
|
||||||
|
background-color: green;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* form stuff like image name, file name, add file etc */
|
||||||
|
#FormDiv {
|
||||||
|
grid-row: 2/3;
|
||||||
|
grid-column: 1/4;
|
||||||
|
background-color: green;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
#FormStuff {
|
||||||
|
margin: 10px;
|
||||||
|
text-align: center;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Contents of the File */
|
||||||
|
#FileContentsDiv {
|
||||||
|
grid-row: 3/6;
|
||||||
|
grid-column: 1/2;
|
||||||
|
background-color: green;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
#FileContents {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* drop box to drop files */
|
||||||
|
#DropBoxDiv {
|
||||||
|
grid-row: 3/6;
|
||||||
|
grid-column: 2/3;
|
||||||
|
background-color: green;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
#DropBox {
|
||||||
|
border: 3px black dashed;
|
||||||
|
align-content: center;
|
||||||
|
justify-items: center;
|
||||||
|
background-color: white;
|
||||||
|
margin: 10px;
|
||||||
|
height: 310px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* file tree visual */
|
||||||
|
#FileTreeDiv {
|
||||||
|
grid-row: 3/6;
|
||||||
|
grid-column: 3/4;
|
||||||
|
background-color: green;
|
||||||
|
margin: 10px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#FileTree {
|
||||||
|
background-color: white;
|
||||||
|
margin: 10px;
|
||||||
|
height: 310px;
|
||||||
|
overflow-y: scroll;
|
||||||
|
overflow-x: scroll;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
.Green {
|
||||||
|
background-color: lawngreen;
|
||||||
|
}
|
||||||
|
.Blue {
|
||||||
|
background-color: blue;
|
||||||
|
color: white;
|
||||||
|
height: 25%;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
font-weight: bold;
|
||||||
|
width: 10%;
|
||||||
|
height: 25%;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
@ -0,0 +1,70 @@
|
|||||||
|
<!--
|
||||||
|
Alex Miller
|
||||||
|
Jordan Latimer
|
||||||
|
|
||||||
|
Page for creating images for flags
|
||||||
|
-->
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title> Create Image </title>
|
||||||
|
</head>
|
||||||
|
<body id="body">
|
||||||
|
|
||||||
|
<!-- Header -->
|
||||||
|
<div id="HeaderDiv">
|
||||||
|
<h1> Create Image </h1>
|
||||||
|
<button class="Blue" (click)="navtoPageMC()">Back to Modify</button>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- File Contents -->
|
||||||
|
<div id="FileContentsDiv">
|
||||||
|
<h1> Contents of File </h1>
|
||||||
|
<div id="FileContents">
|
||||||
|
<div id="TextBox">
|
||||||
|
<textarea id="filecontents" placeholder="Enter contents of files here" cols="40" rows="20"></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Form for adding files and directories -->
|
||||||
|
<div id="FormDiv">
|
||||||
|
<h1> File and Image </h1>
|
||||||
|
<div id="FormStuff">
|
||||||
|
<label> Image Name: </label>
|
||||||
|
<input id="ImageName" type="text" placeholder="image name">
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<label> Name: </label>
|
||||||
|
<input id="filename" type="text" placeholder="Folder or File name">
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<button class="Green" (click)="getFile(true)"> Add Folder</button>
|
||||||
|
<button class="Green" (click)="getFile(false)"> Add File </button>
|
||||||
|
<button (click)="DeleteFile()" style="background-color: red;"> Delete </button>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<button class="Green" (click)="CreateImage()" type="submit">Create Image</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Drop Box -->
|
||||||
|
<div id="DropBoxDiv">
|
||||||
|
<h1> Drop Box </h1>
|
||||||
|
<div id="DropBox">
|
||||||
|
<p> Drag and Drop files here or: </p>
|
||||||
|
<input type="file" id="FileInput" multiple (change)="onFileChange($event)">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- File Tree -->
|
||||||
|
<div id="FileTreeDiv">
|
||||||
|
<h1> File Tree </h1>
|
||||||
|
<div id="FileTree">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { CreateImageComponent } from './create-image.component';
|
||||||
|
|
||||||
|
describe('CreateImageComponent', () => {
|
||||||
|
let component: CreateImageComponent;
|
||||||
|
let fixture: ComponentFixture<CreateImageComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [CreateImageComponent]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(CreateImageComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,314 @@
|
|||||||
|
import { Component } from '@angular/core';
|
||||||
|
import { TreeService } from '../Helper/tree.service';
|
||||||
|
import { getEmail, gotoPage } from '../Helper/Helpers';
|
||||||
|
import { Router } from '@angular/router';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-create-image',
|
||||||
|
imports: [],
|
||||||
|
templateUrl: './create-image.component.html',
|
||||||
|
styleUrl: './create-image.component.css'
|
||||||
|
})
|
||||||
|
export class CreateImageComponent {
|
||||||
|
|
||||||
|
private root: TreeService = new TreeService("Root", "", true, 1, null);
|
||||||
|
private allFiles: File[] | null = null;
|
||||||
|
|
||||||
|
constructor(private router: Router) {}
|
||||||
|
|
||||||
|
// initialize
|
||||||
|
ngOnInit() : void {
|
||||||
|
|
||||||
|
// create the root and refresh the file tree
|
||||||
|
this.RefreshFileTree();
|
||||||
|
}
|
||||||
|
|
||||||
|
RefreshFileTree() {
|
||||||
|
|
||||||
|
const filetree = document.getElementById('FileTree') as HTMLUListElement;
|
||||||
|
filetree.innerHTML = '';
|
||||||
|
|
||||||
|
// create list and add the root
|
||||||
|
const list = document.createElement('ul');
|
||||||
|
|
||||||
|
// go through full tree
|
||||||
|
const fulllist = this.AddListItem(list, this.root);
|
||||||
|
filetree.appendChild(fulllist);
|
||||||
|
|
||||||
|
this.ClearInputs();
|
||||||
|
}
|
||||||
|
|
||||||
|
// uploading files through dropbox
|
||||||
|
onFileChange(event: any) {
|
||||||
|
const files: FileList = event.target.files;
|
||||||
|
if (files.length > 0) {
|
||||||
|
if (!this.allFiles) this.allFiles = []; // set the array up if it's null
|
||||||
|
for (let i=0; i < files.length; i++) {
|
||||||
|
this.allFiles?.push(files[i]);
|
||||||
|
|
||||||
|
// add to tree
|
||||||
|
if (this.AddFileToTree(files[i], false, "", "")) return;
|
||||||
|
}
|
||||||
|
// reset files inside dropbox?
|
||||||
|
this.RefreshFileTree();
|
||||||
|
this.ClearInputs();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// add the file to the tree
|
||||||
|
AddFileToTree(file: File | null, dir: boolean, filename: string, contents: string) : boolean{
|
||||||
|
const elements = document.querySelectorAll('.selected-node');
|
||||||
|
|
||||||
|
// make sure a parent node is selected
|
||||||
|
if (elements.length == 0) {
|
||||||
|
alert('Must select a Directory');
|
||||||
|
this.ClearInputs();
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// make sure all the nodes selected are directories
|
||||||
|
for (let i=0; i < elements.length; i++) {
|
||||||
|
let li = elements[i] as HTMLLIElement;
|
||||||
|
if (li.firstChild?.textContent?.substring(0,4) !== "(D)-") {
|
||||||
|
alert('Must select a directory');
|
||||||
|
this.ClearInputs();
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// loop through all the elements adding the name of the file to the tree
|
||||||
|
for (let i=0; i < elements.length; i++) {
|
||||||
|
|
||||||
|
// get the parent node selected
|
||||||
|
let li = elements[i] as HTMLLIElement;
|
||||||
|
let results = this.getNodeNumFromClass(li);
|
||||||
|
let parentname: string = (results[0]).toString();
|
||||||
|
let parentnum: number = Number(results[1]);
|
||||||
|
let node = this.root.getNodeByName(parentname,parentnum);
|
||||||
|
|
||||||
|
// if the parent node isnt a directory, dont add it
|
||||||
|
if (node?.getDir() == false) {
|
||||||
|
alert('can only add files/folders to directories');
|
||||||
|
this.ClearInputs();
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// make sure the filename isnt taken already
|
||||||
|
if (!node?.IsNameTaken(filename)) {
|
||||||
|
|
||||||
|
// get the number of nodes of this name for nodenum
|
||||||
|
let nodes: TreeService[] = [];
|
||||||
|
nodes = this.root.getNodesSameName(filename, nodes);
|
||||||
|
let nodenum = nodes.length + 1;
|
||||||
|
|
||||||
|
// add the node to the tree
|
||||||
|
if (file == null) { // not using dropbox
|
||||||
|
let newFile = new TreeService(filename, contents, dir, nodenum, node);
|
||||||
|
node?.AddChild(newFile);
|
||||||
|
}
|
||||||
|
else { // using dropbox
|
||||||
|
let FileObjName : string = file?.name!;
|
||||||
|
let newFile = new TreeService(FileObjName, "", false, nodenum, node);
|
||||||
|
node?.AddChild(newFile);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
alert('That file name is already under this directory');
|
||||||
|
this.ClearInputs();
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// get the file stuff through creating a new file
|
||||||
|
getFile(dir: boolean) {
|
||||||
|
let nameElement = document.getElementById('filename') as HTMLInputElement;
|
||||||
|
let filename: string = nameElement.value;
|
||||||
|
let contentsElement = document.getElementById('filecontents') as HTMLTextAreaElement;
|
||||||
|
let contents : string = contentsElement.value;
|
||||||
|
|
||||||
|
if(this.AddFileToTree(null, dir, filename, contents)) return;
|
||||||
|
this.RefreshFileTree();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// use recursion to go through the tree adding each child
|
||||||
|
AddListItem(list: HTMLUListElement, node: TreeService) {
|
||||||
|
|
||||||
|
// add node to current list
|
||||||
|
const nodeitem = document.createElement('li');
|
||||||
|
const spanitem = document.createElement('span');
|
||||||
|
|
||||||
|
if (node.getDir()) spanitem.textContent = '(D)-' + node.getName();
|
||||||
|
else spanitem.textContent = node.getName();
|
||||||
|
|
||||||
|
// add the name and nodenum to the class list
|
||||||
|
spanitem.classList.add(node.getName() + node.getNodeNum());
|
||||||
|
|
||||||
|
spanitem.addEventListener('click', function(nodeitem) {
|
||||||
|
const listitem = nodeitem.target as HTMLLIElement;
|
||||||
|
listitem?.classList.toggle('selected-node');
|
||||||
|
});
|
||||||
|
|
||||||
|
nodeitem.appendChild(spanitem);
|
||||||
|
// add to list
|
||||||
|
list.appendChild(nodeitem);
|
||||||
|
|
||||||
|
// if node has children
|
||||||
|
if (node.getChildren().length > 0) {
|
||||||
|
let nodechildren = node.getChildren();
|
||||||
|
const childlist = document.createElement('ul');
|
||||||
|
for (var i=0; i < nodechildren.length; i++) {
|
||||||
|
let child = nodechildren[i];
|
||||||
|
list.appendChild(this.AddListItem(childlist, child));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// return the whole list
|
||||||
|
return list;
|
||||||
|
}
|
||||||
|
|
||||||
|
// get nodenum from class list
|
||||||
|
getNodeNumFromClass(item : HTMLLIElement) {
|
||||||
|
|
||||||
|
// get the class list of the selected item
|
||||||
|
const WholeClassList = item.classList;
|
||||||
|
const namenum = WholeClassList[0];
|
||||||
|
|
||||||
|
// break up the string into the two parts
|
||||||
|
const index = namenum.search(/\d/);
|
||||||
|
const name = namenum.substring(0,index);
|
||||||
|
let num : number = Number(namenum.substring(index));
|
||||||
|
|
||||||
|
const results = [name,num];
|
||||||
|
return results;
|
||||||
|
}
|
||||||
|
|
||||||
|
// delete a file from the tree
|
||||||
|
DeleteFile() {
|
||||||
|
|
||||||
|
const items = document.querySelectorAll('.selected-node');
|
||||||
|
|
||||||
|
// go through each item selected and remove it from parent
|
||||||
|
for (var i=0; i < items.length; i++) {
|
||||||
|
|
||||||
|
let li = items[i] as HTMLLIElement;
|
||||||
|
|
||||||
|
// get the name and num from class list
|
||||||
|
let results = this.getNodeNumFromClass(li);
|
||||||
|
let name : string = results[0].toString();
|
||||||
|
let num : number = Number(results[1]);
|
||||||
|
|
||||||
|
let node = this.root.getNodeByName(name,num);
|
||||||
|
|
||||||
|
// if root then delete everything
|
||||||
|
if (node?.getName() === 'Root') {
|
||||||
|
this.root.DeleteTheChildren();
|
||||||
|
this.RefreshFileTree();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// remove the correct nodes
|
||||||
|
const parent = node?.getParent();
|
||||||
|
const newchildren = parent?.getChildren().filter(child => child.getName() !== node?.getName());
|
||||||
|
parent?.setChildren(newchildren!);
|
||||||
|
}
|
||||||
|
|
||||||
|
// refresh the tree visual
|
||||||
|
this.RefreshFileTree();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create the actual Image
|
||||||
|
CreateImage() {
|
||||||
|
|
||||||
|
const imagename = this.getImageName();
|
||||||
|
if (imagename === true) return;
|
||||||
|
|
||||||
|
this.root.DeleteParentRef();
|
||||||
|
this.SendTree(imagename);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// get the name of the image and add the time to it
|
||||||
|
getImageName() {
|
||||||
|
const imgElement = document.getElementById('ImageName') as HTMLInputElement;
|
||||||
|
const imgname = imgElement.value;
|
||||||
|
|
||||||
|
// make sure name is included
|
||||||
|
if (imgname === undefined || imgname === null || imgname === '') {
|
||||||
|
alert('Must include a name for the image');
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// docker states all image names must be lowercase, so have to check for that
|
||||||
|
if (/[A-Z]/.test(imgname) === true) {
|
||||||
|
alert('Image name must be all lowercase');
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// get the current time to add to the name so no images have same name
|
||||||
|
let time = new Date().toLocaleTimeString([], {
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit',
|
||||||
|
second: '2-digit',
|
||||||
|
hour12: false
|
||||||
|
});
|
||||||
|
|
||||||
|
// get rid of the colons and add the time to the image name
|
||||||
|
time = time.replace(/:/g,'');
|
||||||
|
return imgname + time;
|
||||||
|
}
|
||||||
|
|
||||||
|
// send the full tree structure to the server side
|
||||||
|
async SendTree(imgname : string) {
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
root: this.root, imgname: imgname, email: getEmail()
|
||||||
|
};
|
||||||
|
|
||||||
|
// create a form data to hold both JSON and the files
|
||||||
|
const formdata = new FormData();
|
||||||
|
|
||||||
|
// append each file to the form data with the key files
|
||||||
|
this.allFiles?.forEach((file : File) => {
|
||||||
|
formdata.append("files", file, file.name);
|
||||||
|
console.log(file.name);
|
||||||
|
});
|
||||||
|
|
||||||
|
formdata.append('data', JSON.stringify(data));
|
||||||
|
|
||||||
|
// send the post request
|
||||||
|
const res = await fetch('api/AddImage', {
|
||||||
|
method: 'POST',
|
||||||
|
body: formdata
|
||||||
|
});
|
||||||
|
|
||||||
|
if (res.ok) {
|
||||||
|
// go back to modify contest
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// clear the input fields after each addition/error
|
||||||
|
ClearInputs() {
|
||||||
|
|
||||||
|
// contents of file
|
||||||
|
let contentElement = document.getElementById('filecontents') as HTMLTextAreaElement;
|
||||||
|
contentElement.value = '';
|
||||||
|
|
||||||
|
// name of file
|
||||||
|
let filenameElement = document.getElementById('filename') as HTMLInputElement;
|
||||||
|
filenameElement.value = '';
|
||||||
|
|
||||||
|
// file input box
|
||||||
|
let fileinputElement = document.getElementById('FileInput') as HTMLInputElement;
|
||||||
|
fileinputElement.value = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
// go back to Modify Contest
|
||||||
|
navtoPageMC() {
|
||||||
|
gotoPage(this.router, '/modify-contest');
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,104 @@
|
|||||||
|
html {
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
form {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
h1, h3 {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
#Inputs {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: max-content max-content;
|
||||||
|
grid-gap: 5px;
|
||||||
|
margin-left: 25%;
|
||||||
|
margin-top: 25%;
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
#Submit {
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#submit * {
|
||||||
|
width: 15%;
|
||||||
|
height: 5%;
|
||||||
|
}
|
||||||
|
#Submit button {
|
||||||
|
background-color: red;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hint1Text, #hint2Text, #hint3Text {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Show the respective hint fields based on the selected radio button */
|
||||||
|
#hint1:checked ~ #hint1Text {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hint2:checked ~ #hint1Text,
|
||||||
|
#hint2:checked ~ #hint2Text {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hint3:checked ~ #hint1Text,
|
||||||
|
#hint3:checked ~ #hint2Text,
|
||||||
|
#hint3:checked ~ #hint3Text{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* for Create Image */
|
||||||
|
#body {
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: 25% auto auto auto auto auto 25%;
|
||||||
|
grid-template-columns: 20% 20% 20% 20% 20%;
|
||||||
|
justify-items: center;
|
||||||
|
}
|
||||||
|
#labels {
|
||||||
|
grid-row: 1/2;
|
||||||
|
grid-column: 3/4;
|
||||||
|
}
|
||||||
|
#Butts {
|
||||||
|
grid-row: 2/3;
|
||||||
|
grid-column: 3/4;
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
#TextBox {
|
||||||
|
grid-row: 3/6;
|
||||||
|
grid-column: 1/3;
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
#DropBox {
|
||||||
|
grid-row: 3/6;
|
||||||
|
grid-column: 3/4;
|
||||||
|
border: 3px black dashed;
|
||||||
|
align-content: center;
|
||||||
|
justify-items: center;
|
||||||
|
}
|
||||||
|
#SendFile {
|
||||||
|
grid-row: 6/7;
|
||||||
|
grid-column: 3/4;
|
||||||
|
}
|
||||||
|
#FileTree {
|
||||||
|
grid-row: 3/6;
|
||||||
|
grid-column: 4/6;
|
||||||
|
}
|
||||||
|
#Submition {
|
||||||
|
grid-row: 7/8;
|
||||||
|
grid-column: 3/4;
|
||||||
|
}
|
||||||
|
.selected-node {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
<!--
|
||||||
|
Alex Miller
|
||||||
|
Jordan Latimer
|
||||||
|
|
||||||
|
Changing passwords of users for Admin
|
||||||
|
-->
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title> Change Password </title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- everything needed for adding a student -->
|
||||||
|
<h1> Change Password </h1>
|
||||||
|
<h3 id="Email">Email: {{emailinput}}</h3>
|
||||||
|
<form id="Inputs">
|
||||||
|
<label> Change Password: </label>
|
||||||
|
<input *ngIf="!showPass" id="PS1" type="password" [(ngModel)]="newPassword" name="newPassword" align="middle">
|
||||||
|
<input *ngIf="showPass" id="PS1" type="text" [(ngModel)]="newPassword" name="newPassword" align="middle">
|
||||||
|
<label> Confirm Password: </label>
|
||||||
|
<input *ngIf="!showPass" id="PS2" type="password" [(ngModel)]="confirmPassword" name="confirmPassword" align="middle">
|
||||||
|
<input *ngIf="showPass" id="PS2" type="text" [(ngModel)]="confirmPassword" name="confirmPassword" align="middle">
|
||||||
|
<label> Show Password: </label>
|
||||||
|
<input type='checkbox' (click)='ShowPassword()' id='ShowPass'>
|
||||||
|
</form>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<!-- submitting or closing -->
|
||||||
|
<div id="Submit">
|
||||||
|
<input id="EditPass" type="submit" (click)="EditPass();">
|
||||||
|
<button onclick="self.close();"> Cancel </button>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { EditStudentComponent } from './edit-student.component';
|
||||||
|
|
||||||
|
describe('EditStudentComponent', () => {
|
||||||
|
let component: EditStudentComponent;
|
||||||
|
let fixture: ComponentFixture<EditStudentComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [EditStudentComponent]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(EditStudentComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,51 @@
|
|||||||
|
import { Component } from '@angular/core';
|
||||||
|
import { FormsModule } from '@angular/forms';
|
||||||
|
import { NgIf } from '@angular/common';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-edit-student',
|
||||||
|
imports: [FormsModule, NgIf],
|
||||||
|
templateUrl: './edit-student.component.html',
|
||||||
|
styleUrl: './edit-student.component.css'
|
||||||
|
})
|
||||||
|
export class EditStudentComponent {
|
||||||
|
emailinput: string | null = sessionStorage.getItem('selectedUser');;
|
||||||
|
showPass: boolean = false;
|
||||||
|
newPassword: string = '';
|
||||||
|
confirmPassword: string = '';
|
||||||
|
// edit the password of a student
|
||||||
|
async EditPass() {
|
||||||
|
const ps1 = this.newPassword;
|
||||||
|
const ps2 = this.confirmPassword
|
||||||
|
// password protection
|
||||||
|
if (ps1.length < 10 || ps1 == "") {
|
||||||
|
alert("password must be at least 10 characters");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (ps1 == ps2) { // if both passwords are equal, continue
|
||||||
|
const data = { email: this.emailinput, password: ps1};
|
||||||
|
const res = await fetch('api/UpdateStudent', {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
'Content-Type' : 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data)
|
||||||
|
});
|
||||||
|
if (res.ok) {
|
||||||
|
console.log("Success: changing password");
|
||||||
|
window.close();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
console.log("ERROR: changing password");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
alert('Passwords do not match');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ShowPassword(){
|
||||||
|
this.showPass = !this.showPass;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { CanActivate, Router } from '@angular/router';
|
||||||
|
|
||||||
|
@Injectable({ providedIn: 'root' })
|
||||||
|
export class AdminGuard implements CanActivate {
|
||||||
|
constructor(private router: Router) {}
|
||||||
|
|
||||||
|
canActivate(): boolean {
|
||||||
|
const role = sessionStorage.getItem('role');
|
||||||
|
if (role === 'admin') return true;
|
||||||
|
|
||||||
|
this.router.navigate(['/unauthorized']);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { CanActivate, Router } from '@angular/router';
|
||||||
|
|
||||||
|
@Injectable({ providedIn: 'root' })
|
||||||
|
export class UserGuard implements CanActivate {
|
||||||
|
constructor(private router: Router) {}
|
||||||
|
|
||||||
|
canActivate(): boolean {
|
||||||
|
const role = sessionStorage.getItem('role');
|
||||||
|
if (role === 'user') return true;
|
||||||
|
|
||||||
|
this.router.navigate(['/unauthorized']);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { CanActivate, Router } from '@angular/router';
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: 'root'
|
||||||
|
})
|
||||||
|
export class AuthGuard implements CanActivate {
|
||||||
|
constructor(private router: Router) {}
|
||||||
|
|
||||||
|
canActivate(): boolean {
|
||||||
|
const email = sessionStorage.getItem('email');
|
||||||
|
if (!email) {
|
||||||
|
this.router.navigate(['/unauthorized']);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,89 @@
|
|||||||
|
/*
|
||||||
|
Alex Miller
|
||||||
|
Jordan Latimer
|
||||||
|
|
||||||
|
CSS for Profile Page User Side
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: grid;
|
||||||
|
|
||||||
|
/* columns and rows sizes */
|
||||||
|
grid-template-columns: auto auto auto auto auto auto;
|
||||||
|
grid-template-rows: auto auto auto auto auto;
|
||||||
|
|
||||||
|
background-color: lightgreen;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
#Header {
|
||||||
|
grid-row: 1/2;
|
||||||
|
grid-column: 1/7;
|
||||||
|
background-color: green;
|
||||||
|
margin: 50px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* past contests table */
|
||||||
|
#PastContests {
|
||||||
|
grid-column: 1/4;
|
||||||
|
grid-row: 2/6;
|
||||||
|
margin: 50px;
|
||||||
|
height: 500px;
|
||||||
|
text-align: center;
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
#Past_Contests {
|
||||||
|
margin: 10px;
|
||||||
|
height: 75%;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* stuff with no ID */
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border: 3px solid black;
|
||||||
|
border-collapse: seperate;
|
||||||
|
border-spacing: 0;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
table thead {
|
||||||
|
top: 0;
|
||||||
|
position: sticky;
|
||||||
|
position: -webkit-sticky;
|
||||||
|
z-index: 1;
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
td {
|
||||||
|
border: 3px solid black;
|
||||||
|
text-align: center;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
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;
|
||||||
|
}
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Leaderboard</title>
|
||||||
|
</head>
|
||||||
|
<body id="Leaderboard">
|
||||||
|
|
||||||
|
<div id="Header">
|
||||||
|
<h1> Leaderboard For </h1>
|
||||||
|
<h2 id="ContestName"> </h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- table for leaderboard -->
|
||||||
|
<div id="LeaderTable">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th> Rank </th>
|
||||||
|
<th> Name </th>
|
||||||
|
<th> Flags </th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="LeaderTBody">
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { LeaderboardComponent } from './leaderboard.component';
|
||||||
|
|
||||||
|
describe('LeaderboardComponent', () => {
|
||||||
|
let component: LeaderboardComponent;
|
||||||
|
let fixture: ComponentFixture<LeaderboardComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [LeaderboardComponent]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(LeaderboardComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
import { Component } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-leaderboard',
|
||||||
|
imports: [],
|
||||||
|
templateUrl: './leaderboard.component.html',
|
||||||
|
styleUrl: './leaderboard.component.css'
|
||||||
|
})
|
||||||
|
export class LeaderboardComponent {
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,46 @@
|
|||||||
|
html, app-login html {
|
||||||
|
background-color: green;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
app-login body {
|
||||||
|
height: 92vh;
|
||||||
|
margin: 25px;
|
||||||
|
display: grid;
|
||||||
|
background-color: white;
|
||||||
|
grid-template-rows: auto auto auto;
|
||||||
|
grid-template-columns: auto auto auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#inputFields {
|
||||||
|
grid-row: 2/3;
|
||||||
|
grid-column: 2/3;
|
||||||
|
background-color: green;
|
||||||
|
text-align: center;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
#loginform {
|
||||||
|
background-color: lightgreen;
|
||||||
|
margin: 10px;
|
||||||
|
height: 65%;
|
||||||
|
}
|
||||||
|
#loginform * {
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 400%;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
width: 12%;
|
||||||
|
height: 7%;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 100%;
|
||||||
|
background-color: lawngreen;
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 100%;
|
||||||
|
}
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
<!--
|
||||||
|
Alex Miller
|
||||||
|
Jordan Latimer
|
||||||
|
|
||||||
|
Login for CTF
|
||||||
|
-->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>Login</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="inputFields">
|
||||||
|
<h1>NMU CTF</h1>
|
||||||
|
<form id="loginform" (ngSubmit)="SendCreds()">
|
||||||
|
<br>
|
||||||
|
<label for="EM">Email:</label>
|
||||||
|
<input id="EM" type="text" [(ngModel)]="email" name="email" />
|
||||||
|
<br>
|
||||||
|
<label for="PS">Password:</label>
|
||||||
|
<input *ngIf="!showPass" id="PS" type="password" [(ngModel)]="password" name="password" />
|
||||||
|
<input *ngIf="showPass" id="PS" type="text" [(ngModel)]="password" name="password" />
|
||||||
|
<br>
|
||||||
|
<label for="ShowPass">Show Password</label>
|
||||||
|
<input type="checkbox" id="ShowPass" (change)="showPassword()" />
|
||||||
|
<br>
|
||||||
|
<button type="submit">Login</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { LoginComponent } from './login.component';
|
||||||
|
|
||||||
|
describe('LoginComponent', () => {
|
||||||
|
let component: LoginComponent;
|
||||||
|
let fixture: ComponentFixture<LoginComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [LoginComponent]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(LoginComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,48 @@
|
|||||||
|
import { Component, ViewEncapsulation } from '@angular/core';
|
||||||
|
import { Router } from '@angular/router';
|
||||||
|
import { FormsModule } from '@angular/forms';
|
||||||
|
import { NgIf } from '@angular/common';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-login',
|
||||||
|
imports: [FormsModule, NgIf],
|
||||||
|
templateUrl: './login.component.html',
|
||||||
|
|
||||||
|
styleUrls: ['./login.component.css'],
|
||||||
|
encapsulation: ViewEncapsulation.None
|
||||||
|
})
|
||||||
|
|
||||||
|
export class LoginComponent {
|
||||||
|
email: string = '';
|
||||||
|
password: string = '';
|
||||||
|
showPass: boolean = false;
|
||||||
|
constructor(private router: Router) {}
|
||||||
|
async SendCreds() {
|
||||||
|
const data = { email: this.email, password: this.password };
|
||||||
|
const res = await fetch('api/login', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
});
|
||||||
|
if (res.ok) { // okay response from server
|
||||||
|
const RB = await res.json();
|
||||||
|
if (RB && RB.redirectTo) { // redirect client to new webpage
|
||||||
|
sessionStorage.setItem('email', RB.email);
|
||||||
|
sessionStorage.setItem('role', RB.redirectTo === '/admin-contest' ? 'admin' : 'user');
|
||||||
|
this.router.navigate([RB.redirectTo]);
|
||||||
|
}
|
||||||
|
else { // error handling
|
||||||
|
console.error("redirect URL issue");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else { // what user entered doesnt match up to db
|
||||||
|
alert("Invalid Credentials");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
showPassword() {
|
||||||
|
this.showPass = !this.showPass;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
export interface Admin {
|
||||||
|
AdminID: number,
|
||||||
|
Email: string,
|
||||||
|
Password: string,
|
||||||
|
ActiveFlag: string
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
export interface Contest {
|
||||||
|
ContestID: number,
|
||||||
|
Name: string,
|
||||||
|
IsActive: number,
|
||||||
|
AdminID: number,
|
||||||
|
Description: string
|
||||||
|
}
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
export interface Flag{
|
||||||
|
FlagID: number,
|
||||||
|
Name: string,
|
||||||
|
Description: string,
|
||||||
|
ContestID: number,
|
||||||
|
Image: string,
|
||||||
|
Path: string,
|
||||||
|
Hint1: string,
|
||||||
|
Hint2: string,
|
||||||
|
Hint3: string
|
||||||
|
}
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
export interface Image{
|
||||||
|
ImageID: number,
|
||||||
|
Name: string,
|
||||||
|
AdminID: number
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
export interface Submission {
|
||||||
|
SubmissionID: number,
|
||||||
|
UserID: number,
|
||||||
|
FlagID: number,
|
||||||
|
IsCorrect: boolean,
|
||||||
|
Attempts: number
|
||||||
|
}
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
export interface User{
|
||||||
|
UserID: number,
|
||||||
|
Name: string,
|
||||||
|
Email: string,
|
||||||
|
Password: string,
|
||||||
|
Flags: number,
|
||||||
|
ActiveFlag: string,
|
||||||
|
AdminID: number
|
||||||
|
}
|
||||||
@ -0,0 +1,178 @@
|
|||||||
|
/*
|
||||||
|
Alex Miller
|
||||||
|
Jordan Latimer
|
||||||
|
|
||||||
|
CSS for Modifying Contests
|
||||||
|
|
||||||
|
*/
|
||||||
|
body {
|
||||||
|
background-color: lightblue;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto auto;
|
||||||
|
grid-template-rows: auto auto auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header stuff */
|
||||||
|
#HeaderStuff {
|
||||||
|
grid-row: 1/2;
|
||||||
|
grid-column: 1/3;
|
||||||
|
background-color: blue;
|
||||||
|
margin: 50px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#DoneButt {
|
||||||
|
height: 25px;
|
||||||
|
width: 150px;
|
||||||
|
background-color: lawngreen;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Contests */
|
||||||
|
#Contests {
|
||||||
|
background-color: blue;
|
||||||
|
grid-row: 2/3;
|
||||||
|
grid-column: 1/2;
|
||||||
|
margin: 50px;
|
||||||
|
height: 500px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-contest {
|
||||||
|
background-color: lawngreen;
|
||||||
|
color: blue;
|
||||||
|
border: 2px solid lawngreen;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ContestContent, #FIContent {
|
||||||
|
background-color: white;
|
||||||
|
margin: 10px;
|
||||||
|
text-align: center;
|
||||||
|
height: 75%;
|
||||||
|
}
|
||||||
|
#ContestList, #FIList {
|
||||||
|
height: 75%;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
#ActiveSpan {
|
||||||
|
color: lawngreen;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
#FISpan {
|
||||||
|
color: blue;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Flags and Images */
|
||||||
|
#FlagsAndImages {
|
||||||
|
background-color: blue;
|
||||||
|
grid-row: 2/3;
|
||||||
|
grid-column: 2/3;
|
||||||
|
margin: 50px;
|
||||||
|
height: 500px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Terminal area */
|
||||||
|
#Terminal {
|
||||||
|
background-color: blue;
|
||||||
|
grid-row: 3/4;
|
||||||
|
grid-column: 1/3;
|
||||||
|
margin: 50px;
|
||||||
|
height: 525px;
|
||||||
|
}
|
||||||
|
#TerminalHeader {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#TerminalHeader select, input {
|
||||||
|
margin: 10px;
|
||||||
|
width: 150px;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
#TerminalHeader input {
|
||||||
|
width: 150px;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
#Linux_Shell {
|
||||||
|
background-color: black;
|
||||||
|
height: 70%;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Buttons */
|
||||||
|
#Buttons {
|
||||||
|
background-color: blue;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
font-weight: bold;
|
||||||
|
width: 20%;
|
||||||
|
height: 10%;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
.AddButt {
|
||||||
|
background-color: lawngreen;
|
||||||
|
}
|
||||||
|
.DeleteButt {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* selected items */
|
||||||
|
.selected {
|
||||||
|
background-color: lightgray;
|
||||||
|
}
|
||||||
|
.selected span {
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
.selected-flag {
|
||||||
|
background-color: lightgray;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* tooltips */
|
||||||
|
.tooltip {
|
||||||
|
font-weight: bold;
|
||||||
|
color: white;
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.tooltip:hover .tooltipText {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
.tooltip .tooltipText {
|
||||||
|
visibility: hidden;
|
||||||
|
height: auto;
|
||||||
|
background-color: gray;
|
||||||
|
color: black;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dialog box for deleting flags and images */
|
||||||
|
#DialogBox {
|
||||||
|
text-align: center;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
padding: 100px;
|
||||||
|
}
|
||||||
|
#DialogBox input {
|
||||||
|
width: 50%;
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* anything else not related to any of above */
|
||||||
|
h1 {
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
list-style-type: none;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
height: 50%;
|
||||||
|
}
|
||||||
|
select, option {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
@ -0,0 +1,142 @@
|
|||||||
|
<!--
|
||||||
|
Jordan Latimer
|
||||||
|
Alex Miller
|
||||||
|
|
||||||
|
Modify Contest screen for Admin
|
||||||
|
-->
|
||||||
|
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
|
||||||
|
<title>Contest Menu</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- header stuff -->
|
||||||
|
<div id="HeaderStuff">
|
||||||
|
<h1> Modify Contests </h1>
|
||||||
|
<div class="tooltip">
|
||||||
|
?
|
||||||
|
<span class="tooltipText">
|
||||||
|
This is where you can change anything involving <span style="color:white;">Contests</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<input type="button" id="DoneButt" (click)="navtoPageAP()" value="Back to Profile">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Contests -->
|
||||||
|
<div id="Contests">
|
||||||
|
<h1> Contests </h1>
|
||||||
|
<div class="tooltip">
|
||||||
|
?
|
||||||
|
<span class="tooltipText">
|
||||||
|
select a <span style="color:white;">Contest</span> by <i>clicking</i> on one
|
||||||
|
<br>
|
||||||
|
<span style="color:lawngreen;">Add:</span> add a new contest
|
||||||
|
<br>
|
||||||
|
<span style="color:blue;">Active:</span> set a <i>selected</i> contest active and available for your students
|
||||||
|
<br>
|
||||||
|
<span style="color:red;">Delete:</span> delete a <i>selected</i> contest
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<div id="ContestContent">
|
||||||
|
|
||||||
|
<!-- buttons to manipulate contests -->
|
||||||
|
<div id="Buttons">
|
||||||
|
<input class="AddButt" type="button" (click)="addContestPopup()" value="Add">
|
||||||
|
<input type="button" (click)="setContestActive()" value="Activate">
|
||||||
|
<input class="DeleteButt" type="button" (click)="deleteContest();" value="Delete">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- list of contests -->
|
||||||
|
<div id="ContestList">
|
||||||
|
<ul id="ContestListItems">
|
||||||
|
<li *ngFor="let contest of contests" (click)="selectContest(contest.ContestID)"
|
||||||
|
[ngClass]="{'selected-contest': contest.ContestID === selectedContestId}">
|
||||||
|
{{ contest.Name }}
|
||||||
|
<span *ngIf="contest.ContestID === activeContest">⭐</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Flags and Images -->
|
||||||
|
<div id="FlagsAndImages">
|
||||||
|
<h1> Flags and Images </h1>
|
||||||
|
<div class="tooltip">
|
||||||
|
?
|
||||||
|
<span class="tooltipText">
|
||||||
|
when selecting a contest, the <span style="color:white;">Flags</span> and <span style="color:white;">Images</span> of that contest will show up here.
|
||||||
|
<br>
|
||||||
|
each <span style="color:white;">Flag</span> <span style="color:red;">NEEDS</span> a <i>selected</i> contest to be <span style="color:lawngreen;">Added</span>
|
||||||
|
<br>
|
||||||
|
this is not the case for <span style="color:white;">Images</span>
|
||||||
|
<br>
|
||||||
|
Some <span style="color:white;">Flags</span> may show up with <span style="color: red;">NONE</span>
|
||||||
|
but be in different <span style="color:white;">Contests</span>
|
||||||
|
you can select <span style="color:white;">Flags</span> to delete or change by <i>clicking</i> on them.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<div id="FIContent">
|
||||||
|
|
||||||
|
<!-- buttons for flags and images -->
|
||||||
|
<div id="Buttons">
|
||||||
|
<input class="AddButt" type="button" (click)="addFlagPopup()" value="Add Flag">
|
||||||
|
<input class="DeleteButt" type="button" (click)="showDialogBox()" value="Delete">
|
||||||
|
<input class="AddButt" type="button" value="Add Image" (click)="navtoPageAI()">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- list of flags and images -->
|
||||||
|
<div id="FIList">
|
||||||
|
<ul id="FIListItems">
|
||||||
|
<li *ngFor="let flag of flagsForContest" (click)="selectFlag(flag)"
|
||||||
|
[ngClass]="{'selected-contest': flag.FlagID === selectedFlag?.FlagID}">
|
||||||
|
{{ flag.Name }} ({{flag.Image}})
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- linux shell to test images -->
|
||||||
|
<div id="Terminal">
|
||||||
|
<div id="TerminalHeader">
|
||||||
|
<h1> Test Images </h1>
|
||||||
|
<div class="tooltip">
|
||||||
|
?
|
||||||
|
<span class="tooltipText">
|
||||||
|
This is where you can <i>test</i> the <span style="color:white;">Images</span> you create.
|
||||||
|
<br>
|
||||||
|
Simply select one from the dropdown and press <i>Test Image</i>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<select id="Images" [(ngModel)]="selectedImage">
|
||||||
|
<option disabled selected hidden> Select an Image </option>
|
||||||
|
<option *ngFor="let image of allImages" [value] ="image.Name">{{image.Name}}</option>
|
||||||
|
</select>
|
||||||
|
<input type="button" value="Test Image" (click)="TestImage()">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- the actual shell -->
|
||||||
|
<div id="Linux_Shell">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Dialog box for deleting flag or image -->
|
||||||
|
<dialog id="DialogBox" [open]="isDialogVisible">
|
||||||
|
<h3> Which would you want to Delete: </h3>
|
||||||
|
<p id="FlagImage">{{ selectedFlag?.Image }}</p>
|
||||||
|
<input type="button" value="Delete Flag" (click)="DeleteFlag()">
|
||||||
|
<input type="button" value="Delete Image" (click)="DeleteImage()">
|
||||||
|
<input type="button" value="Cancel" (click)="closeDialogBox()">
|
||||||
|
</dialog>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { ModifyContestComponent } from './modify-contest.component';
|
||||||
|
|
||||||
|
describe('ModifyContestComponent', () => {
|
||||||
|
let component: ModifyContestComponent;
|
||||||
|
let fixture: ComponentFixture<ModifyContestComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [ModifyContestComponent]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(ModifyContestComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,210 @@
|
|||||||
|
import { Component, Renderer2 } from '@angular/core';
|
||||||
|
import { Router } from '@angular/router';
|
||||||
|
import { TerminalService } from '../Helper/terminal.service';
|
||||||
|
import { getEmail, gotoPage, Popup, updateContainer } from '../Helper/Helpers';
|
||||||
|
import { ModifyContestService } from './modify-contest.service';
|
||||||
|
import { Contest } from '../models/contest.model';
|
||||||
|
import { NgFor, CommonModule } from '@angular/common';
|
||||||
|
import { Flag } from '../models/flag.model';
|
||||||
|
import { Image } from '../models/image.model';
|
||||||
|
import { FormsModule } from '@angular/forms';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-modify-contest',
|
||||||
|
imports: [NgFor, CommonModule, FormsModule],
|
||||||
|
templateUrl: './modify-contest.component.html',
|
||||||
|
styleUrl: './modify-contest.component.css'
|
||||||
|
})
|
||||||
|
|
||||||
|
export class ModifyContestComponent {
|
||||||
|
contests: Contest[] = [];
|
||||||
|
activeContest: number | null = null;
|
||||||
|
flagsForContest: Flag[] = [];
|
||||||
|
selectedContestId: number = 0;
|
||||||
|
selectedFlag: Flag | null = null;
|
||||||
|
allImages: Image[] = []
|
||||||
|
isDialogVisible = false;
|
||||||
|
selectedImage: string = "Select an Image";
|
||||||
|
constructor(private renderer: Renderer2, private router: Router, private modifyContestService: ModifyContestService, private terminalService: TerminalService){}
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
|
||||||
|
this.terminalService.reattachTerminal();
|
||||||
|
|
||||||
|
// style class for blue border
|
||||||
|
this.renderer.addClass(document.documentElement, 'modify');
|
||||||
|
|
||||||
|
this.loadContests();
|
||||||
|
this.getImages();
|
||||||
|
|
||||||
|
window.addEventListener("message", this.handlePopupMessage.bind(this));
|
||||||
|
}
|
||||||
|
|
||||||
|
// set app back to default when leaving this page
|
||||||
|
ngOnDestroy(): void {
|
||||||
|
this.renderer.removeClass(document.documentElement, 'modify');
|
||||||
|
}
|
||||||
|
|
||||||
|
handlePopupMessage(event: MessageEvent): void {
|
||||||
|
if (event.origin !== window.location.origin) return;
|
||||||
|
if (event.data?.type === "FLAG_ADDED" && event.data?.contestId) {
|
||||||
|
this.modifyContestService.loadFlagsForContest(event.data.contestId)
|
||||||
|
.then(flags => this.flagsForContest = flags)
|
||||||
|
.catch(err => console.error('Error reloading flags:', err));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Method to load contests
|
||||||
|
async loadContests(): Promise<void> {
|
||||||
|
const email = this.getEmail();
|
||||||
|
try {
|
||||||
|
const contestsData = await this.modifyContestService.loadContests(email);
|
||||||
|
this.contests = contestsData || []; // Populate contests array
|
||||||
|
this.activeContest = await this.modifyContestService.getActiveContest(this.getEmail()); //Getting the active contest
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading contests:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async getActiveContest(): Promise<void> {
|
||||||
|
this.activeContest = await this.modifyContestService.getActiveContest(this.getEmail());
|
||||||
|
}
|
||||||
|
|
||||||
|
async getImages(): Promise<void>{
|
||||||
|
const email = this.getEmail();
|
||||||
|
try{
|
||||||
|
const imageData = await this.modifyContestService.getImages(email);
|
||||||
|
this.allImages = imageData || [];
|
||||||
|
}catch(error){
|
||||||
|
console.error('Error loading images');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Method to add a contest
|
||||||
|
addContestPopup(): void {
|
||||||
|
Popup('/add-contest');
|
||||||
|
}
|
||||||
|
|
||||||
|
addFlagPopup(): void{
|
||||||
|
if(this.selectedContestId === 0)
|
||||||
|
alert("Select a contest to add a flag!");
|
||||||
|
else{
|
||||||
|
Popup('/add-flag');
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
navtoPageAI(): void{
|
||||||
|
gotoPage(this.router, '/create-image');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Method to set a contest as active
|
||||||
|
async setContestActive(): Promise<void> {
|
||||||
|
if (this.selectedContestId !== null) {
|
||||||
|
try {
|
||||||
|
const email = this.getEmail();
|
||||||
|
await this.modifyContestService.setContestActive(this.selectedContestId, email);
|
||||||
|
this.loadContests();
|
||||||
|
console.log('Contest set as active');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error activating contest:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async deleteContest(): Promise<void> {
|
||||||
|
if (this.selectedContestId === 0)
|
||||||
|
alert("Select a contest to delete!");
|
||||||
|
else if(this.activeContest === this.selectedContestId)
|
||||||
|
alert("You can't delete an active contest!");
|
||||||
|
else{
|
||||||
|
try {
|
||||||
|
await this.modifyContestService.deleteContest(this.selectedContestId);
|
||||||
|
console.log('Contest deleted');
|
||||||
|
this.loadContests(); // Refresh the contest list after deletion
|
||||||
|
this.selectedContestId = 0;
|
||||||
|
this.flagsForContest = [];
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error deleting contest:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
selectContest(contestId: number): void {
|
||||||
|
this.selectedContestId = contestId;
|
||||||
|
this.modifyContestService.loadFlagsForContest(contestId)
|
||||||
|
.then((flags) => {
|
||||||
|
this.flagsForContest = flags;
|
||||||
|
}).catch((err) => {
|
||||||
|
console.error('Failed to load flags:', err);
|
||||||
|
})
|
||||||
|
sessionStorage.setItem('selectedContestID', this.selectedContestId.toString());
|
||||||
|
console.log('Selected contest ID:', contestId);
|
||||||
|
}
|
||||||
|
|
||||||
|
selectFlag(flag: Flag): void{
|
||||||
|
this.selectedFlag = flag
|
||||||
|
}
|
||||||
|
|
||||||
|
getEmail(): string {
|
||||||
|
return getEmail();
|
||||||
|
}
|
||||||
|
|
||||||
|
navtoPageAP() {
|
||||||
|
gotoPage(this.router, '/admin-profile');
|
||||||
|
}
|
||||||
|
|
||||||
|
showDialogBox(): void{
|
||||||
|
if(!this.selectedFlag || this.selectedFlag.Name === null){
|
||||||
|
alert('You must select a flag first');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
console.log('Opening dialog for flag:', this.selectedFlag);
|
||||||
|
this.isDialogVisible = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
closeDialogBox(): void{
|
||||||
|
this.isDialogVisible = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
async DeleteFlag(): Promise<void>{
|
||||||
|
if(!this.selectedFlag){
|
||||||
|
console.log("No flag selected");
|
||||||
|
alert("Please select a flag to delete.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try{
|
||||||
|
await this.modifyContestService.DeleteFlag(this.selectedFlag.FlagID);
|
||||||
|
this.flagsForContest = await this.modifyContestService.loadFlagsForContest(this.selectedContestId);
|
||||||
|
} catch(error){
|
||||||
|
console.error("Failed deleting flag:", error);
|
||||||
|
}
|
||||||
|
console.log("Deleted Flag");
|
||||||
|
this.isDialogVisible = false;
|
||||||
|
this.selectedFlag = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
DeleteImage(): void{
|
||||||
|
this.closeDialogBox();
|
||||||
|
}
|
||||||
|
|
||||||
|
async TestImage(): Promise<void>{
|
||||||
|
if(this.selectedImage === "Select an Image"){
|
||||||
|
alert('you must select an Image first');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try{
|
||||||
|
await this.modifyContestService.setNewActiveFlag(this.selectedImage, getEmail())
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Failed setting up new image", error);
|
||||||
|
}
|
||||||
|
await updateContainer(getEmail());
|
||||||
|
this.ClearAndSetTerminal();
|
||||||
|
}
|
||||||
|
|
||||||
|
// clear and set terminal for new flag
|
||||||
|
async ClearAndSetTerminal() {
|
||||||
|
await this.terminalService.ClearTerminal();
|
||||||
|
await this.terminalService.reattachTerminal();
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
import { TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { ModifyContestService } from './modify-contest.service';
|
||||||
|
|
||||||
|
describe('ModifyContestService', () => {
|
||||||
|
let service: ModifyContestService;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
TestBed.configureTestingModule({});
|
||||||
|
service = TestBed.inject(ModifyContestService);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should be created', () => {
|
||||||
|
expect(service).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,232 @@
|
|||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: 'root'
|
||||||
|
})
|
||||||
|
export class ModifyContestService {
|
||||||
|
|
||||||
|
constructor() {}
|
||||||
|
|
||||||
|
async getImages(email: string): Promise<any> {
|
||||||
|
try {
|
||||||
|
const response = await fetch('api/getImages', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ email })
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to fetch images');
|
||||||
|
}
|
||||||
|
return await response.json();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching images:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async loadContests(email: string): Promise<any> {
|
||||||
|
try {
|
||||||
|
const response = await fetch('api/contests/getContests', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ email })
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to fetch contests');
|
||||||
|
}
|
||||||
|
return await response.json();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching contests:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async loadFlagsForContest(contestId: number): Promise<any> {
|
||||||
|
if(contestId === 0)
|
||||||
|
return [];
|
||||||
|
try {
|
||||||
|
const response = await fetch('api/flags/getAllFlagsFromContest', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ contest: contestId })
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to fetch flags');
|
||||||
|
}
|
||||||
|
return await response.json();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching flags:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async addContest(data: any): Promise<any> {
|
||||||
|
try {
|
||||||
|
const response = await fetch('api/AddContest', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data)
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to add contest');
|
||||||
|
}
|
||||||
|
return await response.json();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error adding contest:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async deleteContest(contestId: number): Promise<any> {
|
||||||
|
// Send a POST request to delete the contest by its name
|
||||||
|
let data = {contest: contestId};
|
||||||
|
await this.deleteFlagsFromContest(contestId);
|
||||||
|
let res = await fetch('api/DeleteContest', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (res.ok) {
|
||||||
|
console.log("Success: deleting contest");
|
||||||
|
} else {
|
||||||
|
console.log("ERROR: deleting contest");
|
||||||
|
alert("Failed to delete contest.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async deleteFlagsFromContest(contestId: number): Promise<any> {
|
||||||
|
try {
|
||||||
|
const response = await fetch('api/DeleteFlagsFromContest', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ contest: contestId })
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to delete flags');
|
||||||
|
}
|
||||||
|
return await response.json();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error deleting flags:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async AddFlag(data: any): Promise<any> {
|
||||||
|
try {
|
||||||
|
const response = await fetch('api/AddFlag', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data)
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to add flag');
|
||||||
|
}
|
||||||
|
return await response.json();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error adding flag:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async DeleteFlag(flagId: number): Promise<any> {
|
||||||
|
let data = { flag: flagId };
|
||||||
|
let res = await fetch('api/DeleteFlag', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async setNewActiveFlag(flagImage: string, Email: string):Promise<any> {
|
||||||
|
const image = flagImage;
|
||||||
|
// set up the container for the image
|
||||||
|
const data = { FlagImage: image, email: Email };
|
||||||
|
const res = await fetch('/api/setNewActiveFlag', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type' : 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async setContestActive(contestId: number, email: string): Promise<any> {
|
||||||
|
try {
|
||||||
|
const response = await fetch('api/setContestActive', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ contest: contestId, email })
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to set contest active');
|
||||||
|
}
|
||||||
|
return await response.json();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error setting contest active:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async deleteImage(imageName: string): Promise<any> {
|
||||||
|
try {
|
||||||
|
const response = await fetch('api/DeleteImageReplaceFlags', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ images: imageName })
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to delete image');
|
||||||
|
}
|
||||||
|
return await response.json();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error deleting image:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async getActiveContest(Email: string): Promise<any>{
|
||||||
|
const data = { email: Email };
|
||||||
|
const res = await fetch('api/contests/getActiveContest', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type' : 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data)
|
||||||
|
});
|
||||||
|
if (res.ok) {
|
||||||
|
let contest = await res.json();
|
||||||
|
return contest.ContestID;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
import { TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { SocketIOService } from './socket-io.service';
|
||||||
|
|
||||||
|
describe('SocketIOService', () => {
|
||||||
|
let service: SocketIOService;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
TestBed.configureTestingModule({});
|
||||||
|
service = TestBed.inject(SocketIOService);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should be created', () => {
|
||||||
|
expect(service).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,48 @@
|
|||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { io, Socket } from 'socket.io-client';
|
||||||
|
import { Observable } from 'rxjs';
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: 'root'
|
||||||
|
})
|
||||||
|
export class SocketIOService {
|
||||||
|
private socket: Socket;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this.socket = io("/api/socket.io", {
|
||||||
|
path: '/api/socket.io',
|
||||||
|
transports: ['websocket'], // or ['polling', 'websocket'] if you want fallback
|
||||||
|
autoConnect: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
connect(): void {
|
||||||
|
if (!this.socket.connected) {
|
||||||
|
console.log("Attempting to connect...");
|
||||||
|
this.socket.connect();
|
||||||
|
|
||||||
|
this.socket.on("connect", () => console.log("Connected to Socket.IO!"));
|
||||||
|
this.socket.on("connect_error", (err) => console.error("Socket.IO Connection Error:", err));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
disconnect(): void {
|
||||||
|
if (this.socket.connected) {
|
||||||
|
this.socket.disconnect();
|
||||||
|
console.log("Disconnected from Socket.IO.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
listen<T = any>(eventName: string): Observable<T> {
|
||||||
|
return new Observable<T>((subscriber) => {
|
||||||
|
const handler = (data: T) => subscriber.next(data);
|
||||||
|
this.socket.on(eventName, handler);
|
||||||
|
|
||||||
|
return () => this.socket.off(eventName, handler); // cleanup
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
emit(eventName: string, data: any): void {
|
||||||
|
this.socket.emit(eventName, data);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
<h1>Thought you could pull a fast one eh?</h1>
|
||||||
|
<p>I dont think so</p>
|
||||||
|
<h2>👎</h2>
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { UNAUTHORIZEDComponent } from './unauthorized.component';
|
||||||
|
|
||||||
|
describe('UNAUTHORIZEDComponent', () => {
|
||||||
|
let component: UNAUTHORIZEDComponent;
|
||||||
|
let fixture: ComponentFixture<UNAUTHORIZEDComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [UNAUTHORIZEDComponent]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(UNAUTHORIZEDComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
import { Component } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-unauthorized',
|
||||||
|
imports: [],
|
||||||
|
templateUrl: './unauthorized.component.html',
|
||||||
|
styleUrl: './unauthorized.component.css'
|
||||||
|
})
|
||||||
|
export class UNAUTHORIZEDComponent {
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,160 @@
|
|||||||
|
.body {
|
||||||
|
height: 98vh;
|
||||||
|
display: grid;
|
||||||
|
|
||||||
|
/* columns and rows sizes */
|
||||||
|
grid-template-columns: auto auto auto auto auto auto;
|
||||||
|
grid-template-rows: auto auto auto auto auto;
|
||||||
|
|
||||||
|
background-color: lightgreen;
|
||||||
|
}
|
||||||
|
html {
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
.bg {
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
#Header {
|
||||||
|
grid-row: 1/2;
|
||||||
|
grid-column: 1/7;
|
||||||
|
background-color: green;
|
||||||
|
margin: 50px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#Header input {
|
||||||
|
height: 25px;
|
||||||
|
width: 150px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
#ContestsButt {
|
||||||
|
background-color: lawngreen;
|
||||||
|
}
|
||||||
|
#LogoutButt {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* past contests table */
|
||||||
|
#PastContests {
|
||||||
|
grid-column: 1/4;
|
||||||
|
grid-row: 2/6;
|
||||||
|
margin: 50px;
|
||||||
|
height: 500px;
|
||||||
|
text-align: center;
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
#Past_Contests {
|
||||||
|
margin: 10px;
|
||||||
|
height: 75%;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* record table */
|
||||||
|
#Record, #CurrentContest {
|
||||||
|
grid-column: 5/7;
|
||||||
|
grid-row: 2/3;
|
||||||
|
margin: 50px;
|
||||||
|
text-align: center;
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
#RecordTable, #Current_Contest {
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Usernames */
|
||||||
|
#Username {
|
||||||
|
grid-row: 3/5;
|
||||||
|
grid-column: 5/7;
|
||||||
|
background-color: green;
|
||||||
|
text-align: center;
|
||||||
|
margin: 50px;
|
||||||
|
}
|
||||||
|
#generate {
|
||||||
|
background-color: blue;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
#setname {
|
||||||
|
background-color: lawngreen;
|
||||||
|
}
|
||||||
|
#generate, #setname {
|
||||||
|
height: 25px;
|
||||||
|
width: 150px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* tooltips */
|
||||||
|
.tooltip {
|
||||||
|
font-weight: bold;
|
||||||
|
color: white;
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.tooltip:hover .tooltipText {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
.tooltip .tooltipText {
|
||||||
|
visibility: hidden;
|
||||||
|
height: auto;
|
||||||
|
background-color: gray;
|
||||||
|
color: black;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
padding: 5px;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* stuff with no ID */
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border: 3px solid black;
|
||||||
|
border-collapse: seperate;
|
||||||
|
border-spacing: 0;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
table thead {
|
||||||
|
top: 0;
|
||||||
|
position: sticky;
|
||||||
|
position: -webkit-sticky;
|
||||||
|
z-index: 1;
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
td {
|
||||||
|
border: 3px solid black;
|
||||||
|
text-align: center;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
width: 50%;
|
||||||
|
height: 50%;
|
||||||
|
background-color: lawngreen;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
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;
|
||||||
|
}
|
||||||
@ -0,0 +1,75 @@
|
|||||||
|
<div class="bg">
|
||||||
|
<div class="body">
|
||||||
|
<!-- header -->
|
||||||
|
<div id="Header">
|
||||||
|
<h1> Menu </h1>
|
||||||
|
<div class="tooltip">
|
||||||
|
?
|
||||||
|
<span class="tooltipText">
|
||||||
|
This is the main place for you, the <span style="color:white">User</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<input id="ContestsButt" type="button" value="Profile" (click)="navtoPage()">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- past contests -->
|
||||||
|
<div id="PastContests">
|
||||||
|
<h1> Past Contests </h1>
|
||||||
|
<div class="tooltip">
|
||||||
|
?
|
||||||
|
<span class="tooltipText">
|
||||||
|
This is every past contest that's still around
|
||||||
|
<br>
|
||||||
|
you can view the leaderboard or hop in to take a look
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<!-- past contest table -->
|
||||||
|
<div id="Past_Contests">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th> Contest Name </th>
|
||||||
|
<th> Flags </th>
|
||||||
|
<th> Leaderboard </th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="UPCTbody">
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- current contest-->
|
||||||
|
<div id="CurrentContest">
|
||||||
|
<h1> Current Contest </h1>
|
||||||
|
<div class="tooltip">
|
||||||
|
?
|
||||||
|
<span class="tooltipText">
|
||||||
|
This is where the current contest is shown
|
||||||
|
<br>
|
||||||
|
click <span style="color:lawngreen">Join</span> to join in on the fun
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<!-- Current Contest -->
|
||||||
|
<div id="Current_Contest">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<th> Current Contest </th>
|
||||||
|
<th> Flags </th>
|
||||||
|
<th> Join </th>
|
||||||
|
</thead>
|
||||||
|
<tbody id="UCCTbody">
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { UserMenuComponent } from './user-menu.component';
|
||||||
|
|
||||||
|
describe('UserMenuComponent', () => {
|
||||||
|
let component: UserMenuComponent;
|
||||||
|
let fixture: ComponentFixture<UserMenuComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [UserMenuComponent]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(UserMenuComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
|
||||||
|
import { Router } from '@angular/router'
|
||||||
|
import { Contest } from '../models/contest.model.js';
|
||||||
|
import { PopulateTable, InsertIntoTable, gotoPage, getContests } from '../Helper/Helpers.js';
|
||||||
|
@Component({
|
||||||
|
selector: 'app-user-menu',
|
||||||
|
imports: [],
|
||||||
|
templateUrl: './user-menu.component.html',
|
||||||
|
encapsulation: ViewEncapsulation.None,
|
||||||
|
styleUrl: './user-menu.component.css'
|
||||||
|
})
|
||||||
|
|
||||||
|
export class UserMenuComponent implements OnInit{
|
||||||
|
constructor(private router: Router){}
|
||||||
|
|
||||||
|
async ngOnInit(): Promise<void> {
|
||||||
|
let data: Contest[] = await getContests();
|
||||||
|
InsertIntoTable(data, this.router);
|
||||||
|
}
|
||||||
|
|
||||||
|
navtoPage(): void {
|
||||||
|
gotoPage(this.router, '/user-profile');
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,138 @@
|
|||||||
|
/*
|
||||||
|
Alex Miller
|
||||||
|
Jordan Latimer
|
||||||
|
|
||||||
|
CSS for Profile Page User Side
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
height: 98vh;
|
||||||
|
display: grid;
|
||||||
|
|
||||||
|
/* columns and rows sizes */
|
||||||
|
grid-template-columns: auto auto auto auto auto auto;
|
||||||
|
grid-template-rows: auto auto auto auto auto;
|
||||||
|
|
||||||
|
background-color: lightgreen;
|
||||||
|
}
|
||||||
|
html {
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
#Header {
|
||||||
|
grid-row: 1/2;
|
||||||
|
grid-column: 1/7;
|
||||||
|
background-color: green;
|
||||||
|
margin: 50px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#Header input {
|
||||||
|
height: 25px;
|
||||||
|
width: 150px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
#ContestsButt {
|
||||||
|
background-color: lawngreen;
|
||||||
|
}
|
||||||
|
#LogoutButt {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* past contests table */
|
||||||
|
#PastContests {
|
||||||
|
grid-column: 1/4;
|
||||||
|
grid-row: 2/6;
|
||||||
|
margin: 50px;
|
||||||
|
height: 500px;
|
||||||
|
text-align: center;
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
#Past_Contests {
|
||||||
|
margin: 10px;
|
||||||
|
height: 75%;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* record table */
|
||||||
|
#Record, #CurrentContest {
|
||||||
|
grid-column: 5/7;
|
||||||
|
grid-row: 2/3;
|
||||||
|
margin: 50px;
|
||||||
|
text-align: center;
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
#RecordTable, #Current_Contest {
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Usernames */
|
||||||
|
#Username {
|
||||||
|
grid-row: 3/5;
|
||||||
|
grid-column: 5/7;
|
||||||
|
background-color: green;
|
||||||
|
text-align: center;
|
||||||
|
margin: 50px;
|
||||||
|
}
|
||||||
|
#generate {
|
||||||
|
background-color: blue;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
#setname {
|
||||||
|
background-color: lawngreen;
|
||||||
|
}
|
||||||
|
#generate, #setname {
|
||||||
|
height: 25px;
|
||||||
|
width: 150px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* tooltips */
|
||||||
|
.tooltip {
|
||||||
|
font-weight: bold;
|
||||||
|
color: white;
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.tooltip:hover .tooltipText {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
.tooltip .tooltipText {
|
||||||
|
visibility: hidden;
|
||||||
|
height: auto;
|
||||||
|
background-color: gray;
|
||||||
|
color: black;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
padding: 5px;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* stuff with no ID */
|
||||||
|
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;
|
||||||
|
}
|
||||||
@ -0,0 +1,124 @@
|
|||||||
|
<!--
|
||||||
|
Alex Miller
|
||||||
|
Jordan Latimer
|
||||||
|
|
||||||
|
Profile Page for Users
|
||||||
|
-->
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>NMU CTF Profile Page</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- Header -->
|
||||||
|
<div id="Header">
|
||||||
|
<h1> Profile </h1>
|
||||||
|
<div class="tooltip">
|
||||||
|
?
|
||||||
|
<span class="tooltipText">
|
||||||
|
This is everything about your profile
|
||||||
|
<br>
|
||||||
|
you can view your Past Contests, Record,
|
||||||
|
<br>
|
||||||
|
and change your username
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<input id="ContestsButt" type="button" value="Back to Contests" (click)="navtoPage()">
|
||||||
|
<input id="LogoutButt" type="button" value="Logout" (click)="onLogout()">
|
||||||
|
</div>
|
||||||
|
<!-- Past contest table -->
|
||||||
|
<div id="PastContests">
|
||||||
|
<h1> Past Contests </h1>
|
||||||
|
<div class="tooltip">
|
||||||
|
?
|
||||||
|
<span class="tooltipText">
|
||||||
|
This is every past contest that's still around
|
||||||
|
<br>
|
||||||
|
you can see the <span style="color:white">Leaderboard</span> by clicking
|
||||||
|
<br>
|
||||||
|
on <span style="color:lawngreen">View</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<!-- past contest table -->
|
||||||
|
<div id="Past_Contests">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th> Contest Name </th>
|
||||||
|
<th> Flags </th>
|
||||||
|
<th> Leaderboard </th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="UPCTBody">
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- chaning username -->
|
||||||
|
<div id="Username">
|
||||||
|
<h1> Edit Username</h1>
|
||||||
|
<div class="tooltip">
|
||||||
|
?
|
||||||
|
<span class="tooltipText">
|
||||||
|
This is where you can change your username
|
||||||
|
<br>
|
||||||
|
simply click <span style="color:blue">Generate</span> and a random
|
||||||
|
<br>
|
||||||
|
username will be generated, keep going until you find one you like and
|
||||||
|
<br>
|
||||||
|
click <span style="color:lawngreen">Set Name</span> to set that as your username
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<!-- Name generator and logout button -->
|
||||||
|
<div id="Name">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<!-- users record -->
|
||||||
|
<div id="Record">
|
||||||
|
<h1> Record </h1>
|
||||||
|
<div class="tooltip">
|
||||||
|
?
|
||||||
|
<span class="tooltipText">
|
||||||
|
This is where you can view your <span style="color:white">Record</span>
|
||||||
|
<br>
|
||||||
|
to see how well you are doing with all <span style="color:white">Contests</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<!-- record table -->
|
||||||
|
<div id="RecordTable">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th> Completed </th>
|
||||||
|
<th> Total </th>
|
||||||
|
<th> Record </th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="URTbody">
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { UserProfileACComponent } from './user-profile-ac.component';
|
||||||
|
|
||||||
|
describe('UserProfileACComponent', () => {
|
||||||
|
let component: UserProfileACComponent;
|
||||||
|
let fixture: ComponentFixture<UserProfileACComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [UserProfileACComponent]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(UserProfileACComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,37 @@
|
|||||||
|
import { Component } from '@angular/core';
|
||||||
|
import { loadTable, getNewName, setNewName } from '../Helper/User-pfp';
|
||||||
|
import { Router } from '@angular/router';
|
||||||
|
import { gotoPage, logOut } from '../Helper/Helpers';
|
||||||
|
import { FormsModule } from '@angular/forms';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-user-profile-ac',
|
||||||
|
imports: [FormsModule],
|
||||||
|
templateUrl: './user-profile-ac.component.html',
|
||||||
|
styleUrl: './user-profile-ac.component.css'
|
||||||
|
})
|
||||||
|
export class UserProfileACComponent {
|
||||||
|
|
||||||
|
constructor(private router: Router){}
|
||||||
|
|
||||||
|
NameInput: string = '';
|
||||||
|
async ngOnInit(): Promise<void> {
|
||||||
|
this.NameInput = await loadTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
navtoPage(): void {
|
||||||
|
gotoPage(this.router, '/contest-page');
|
||||||
|
}
|
||||||
|
|
||||||
|
onGetNewName(): void{
|
||||||
|
this.NameInput = getNewName();
|
||||||
|
}
|
||||||
|
|
||||||
|
onSetNewName(): void{
|
||||||
|
setNewName(this.NameInput);
|
||||||
|
}
|
||||||
|
|
||||||
|
onLogout(): void{
|
||||||
|
logOut(this.router);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,138 @@
|
|||||||
|
/*
|
||||||
|
Alex Miller
|
||||||
|
Jordan Latimer
|
||||||
|
|
||||||
|
CSS for Profile Page User Side
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
height: 98vh;
|
||||||
|
display: grid;
|
||||||
|
|
||||||
|
/* columns and rows sizes */
|
||||||
|
grid-template-columns: auto auto auto auto auto auto;
|
||||||
|
grid-template-rows: auto auto auto auto auto;
|
||||||
|
|
||||||
|
background-color: lightgreen;
|
||||||
|
}
|
||||||
|
html {
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
#Header {
|
||||||
|
grid-row: 1/2;
|
||||||
|
grid-column: 1/7;
|
||||||
|
background-color: green;
|
||||||
|
margin: 50px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#Header input {
|
||||||
|
height: 25px;
|
||||||
|
width: 150px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
#ContestsButt {
|
||||||
|
background-color: lawngreen;
|
||||||
|
}
|
||||||
|
#LogoutButt {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* past contests table */
|
||||||
|
#PastContests {
|
||||||
|
grid-column: 1/4;
|
||||||
|
grid-row: 2/6;
|
||||||
|
margin: 50px;
|
||||||
|
height: 500px;
|
||||||
|
text-align: center;
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
#Past_Contests {
|
||||||
|
margin: 10px;
|
||||||
|
height: 75%;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* record table */
|
||||||
|
#Record, #CurrentContest {
|
||||||
|
grid-column: 5/7;
|
||||||
|
grid-row: 2/3;
|
||||||
|
margin: 50px;
|
||||||
|
text-align: center;
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
#RecordTable, #Current_Contest {
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Usernames */
|
||||||
|
#Username {
|
||||||
|
grid-row: 3/5;
|
||||||
|
grid-column: 5/7;
|
||||||
|
background-color: green;
|
||||||
|
text-align: center;
|
||||||
|
margin: 50px;
|
||||||
|
}
|
||||||
|
#generate {
|
||||||
|
background-color: blue;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
#setname {
|
||||||
|
background-color: lawngreen;
|
||||||
|
}
|
||||||
|
#generate, #setname {
|
||||||
|
height: 25px;
|
||||||
|
width: 150px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* tooltips */
|
||||||
|
.tooltip {
|
||||||
|
font-weight: bold;
|
||||||
|
color: white;
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.tooltip:hover .tooltipText {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
.tooltip .tooltipText {
|
||||||
|
visibility: hidden;
|
||||||
|
height: auto;
|
||||||
|
background-color: gray;
|
||||||
|
color: black;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
padding: 5px;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* stuff with no ID */
|
||||||
|
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;
|
||||||
|
}
|
||||||
@ -0,0 +1,125 @@
|
|||||||
|
<!--
|
||||||
|
Alex Miller
|
||||||
|
Jordan Latimer
|
||||||
|
|
||||||
|
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 User Profile Page</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- Header -->
|
||||||
|
<div id="Header">
|
||||||
|
<h1> Profile </h1>
|
||||||
|
<div class="tooltip">
|
||||||
|
?
|
||||||
|
<span class="tooltipText">
|
||||||
|
This is everything about your profile
|
||||||
|
<br>
|
||||||
|
you can view your Past Contests, Record,
|
||||||
|
<br>
|
||||||
|
and change your username
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<input id="ContestsButt" type="button" value="Back to Menu" (click)="navtoPage()">
|
||||||
|
<input id="LogoutButt" type="button" value="Logout" (click)="onLogout()">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- past contests -->
|
||||||
|
<div id="PastContests">
|
||||||
|
<h1> Past Contests </h1>
|
||||||
|
<div class="tooltip">
|
||||||
|
?
|
||||||
|
<span class="tooltipText">
|
||||||
|
This is every past contest that's still around
|
||||||
|
<br>
|
||||||
|
you can see the <span style="color:white">Leaderboard</span> by clicking
|
||||||
|
<br>
|
||||||
|
on <span style="color:lawngreen">View</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<!-- past contest table -->
|
||||||
|
<div id="Past_Contests">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th> Contest Name </th>
|
||||||
|
<th> Flags </th>
|
||||||
|
<th> Leaderboard </th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="UPCTBody">
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- usernames -->
|
||||||
|
<div id="Username">
|
||||||
|
<h1> Edit Username </h1>
|
||||||
|
<div class="tooltip">
|
||||||
|
?
|
||||||
|
<span class="tooltipText">
|
||||||
|
This is where you can change your username
|
||||||
|
<br>
|
||||||
|
simply click <span style="color:blue">Generate</span> and a random
|
||||||
|
<br>
|
||||||
|
username will be generated, keep going until you find one you like and
|
||||||
|
<br>
|
||||||
|
click <span style="color:lawngreen">Set Name</span> to set that as your username
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<!-- Name generator and logout button -->
|
||||||
|
<div id="Name">
|
||||||
|
<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>
|
||||||
|
<div class="tooltip">
|
||||||
|
?
|
||||||
|
<span class="tooltipText">
|
||||||
|
This is where you can view your <span style="color:white">Record</span>
|
||||||
|
<br>
|
||||||
|
to see how well you are doing with all <span style="color:white">Contests</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<!-- record table -->
|
||||||
|
<div id="RecordTable">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th> Completed </th>
|
||||||
|
<th> Total </th>
|
||||||
|
<th> Record </th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="URTbody">
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { UserProfileComponent } from './user-profile.component';
|
||||||
|
|
||||||
|
describe('UserProfileComponent', () => {
|
||||||
|
let component: UserProfileComponent;
|
||||||
|
let fixture: ComponentFixture<UserProfileComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [UserProfileComponent]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(UserProfileComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { loadTable } from '../Helper/User-pfp';
|
||||||
|
import { gotoPage, logOut } from '../Helper/Helpers';
|
||||||
|
import { Router } from '@angular/router';
|
||||||
|
import { FormsModule } from '@angular/forms';
|
||||||
|
import { getNewName, setNewName } from '../Helper/User-pfp';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-user-profile',
|
||||||
|
imports: [FormsModule],
|
||||||
|
templateUrl: './user-profile.component.html',
|
||||||
|
styleUrl: './user-profile.component.css'
|
||||||
|
})
|
||||||
|
export class UserProfileComponent implements OnInit {
|
||||||
|
|
||||||
|
constructor(private router: Router){}
|
||||||
|
|
||||||
|
NameInput: string = '';
|
||||||
|
async ngOnInit(): Promise<void> {
|
||||||
|
this.NameInput = await loadTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
navtoPage(): void {
|
||||||
|
gotoPage(this.router, '/user-menu');
|
||||||
|
}
|
||||||
|
|
||||||
|
onGetNewName(): void{
|
||||||
|
this.NameInput = getNewName();
|
||||||
|
}
|
||||||
|
|
||||||
|
onSetNewName(): void{
|
||||||
|
setNewName(this.NameInput);
|
||||||
|
}
|
||||||
|
|
||||||
|
onLogout(): void{
|
||||||
|
logOut(this.router);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="default">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>CTFFrontend</title>
|
||||||
|
<base href="/" />
|
||||||
|
<meta
|
||||||
|
http-equiv="Content-Security-Policy"
|
||||||
|
content="default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self'; connect-src 'self' ws://localhost:3000;"
|
||||||
|
/>
|
||||||
|
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<app-root></app-root>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue