Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/update frontend view #000 #687

Draft
wants to merge 31 commits into
base: develop
Choose a base branch
from
Draft

Feature/update frontend view #000 #687

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
e27605b
remove all wave images
mrtrkmn Oct 5, 2021
5f33022
add new background
mrtrkmn Oct 5, 2021
8c49647
update backgrounds remove wave background
mrtrkmn Oct 5, 2021
6c83213
rename info to help
mrtrkmn Oct 5, 2021
fe7adf5
update information on index page
mrtrkmn Oct 5, 2021
3d0e642
info to help
mrtrkmn Oct 5, 2021
476456c
new pixel font is added
mrtrkmn Oct 6, 2021
ee49d1a
css is changed with new design
mrtrkmn Oct 6, 2021
d5c880f
base html is adjusted accor. new design
mrtrkmn Oct 6, 2021
c02436d
not include box shadow
mrtrkmn Oct 6, 2021
edd6c1b
templates updated with new design
mrtrkmn Oct 6, 2021
e43433c
buttons and fonts updated on vue components
mrtrkmn Oct 6, 2021
7667a4f
vue components re-rendered for new design
mrtrkmn Oct 6, 2021
933570e
IF logo updated, cyber skills logo added on index page
mrtrkmn Oct 6, 2021
1e6a6f1
Ported over to vue for dynamic icons
Mikkelhost Oct 6, 2021
48ca844
Ported over to vue for dynamic icons
Mikkelhost Oct 6, 2021
313208c
Removed background and added to css instead
Mikkelhost Oct 6, 2021
ea58ae6
Added inverted logos and background
Mikkelhost Oct 6, 2021
50353e8
builded js
Mikkelhost Oct 6, 2021
14f4941
Started and made good progress on dark theme
Mikkelhost Oct 6, 2021
d8bf4a0
Added and compiled latest js changes
Mikkelhost Oct 6, 2021
c5778c8
new logos added amigo modified
mrtrkmn Oct 22, 2021
326f513
templates are updated with google icons library
mrtrkmn Oct 22, 2021
b496be0
vue components updated to apply toogle theme feature
mrtrkmn Oct 22, 2021
fc9b5d6
white haaukins logo added
mrtrkmn Oct 22, 2021
8801ce7
challenges template updated with new icon
mrtrkmn Oct 22, 2021
7636d16
login template updated with vue component
mrtrkmn Oct 22, 2021
723535a
render logo and switch components
mrtrkmn Oct 22, 2021
66c408b
js is re-compiled
mrtrkmn Oct 22, 2021
5bb4dac
Fixed logos not updating with polling
Mikkelhost Mar 7, 2022
c6dcd1e
fixed switch color when scrolling
Mikkelhost Mar 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions svcs/amigo/amigo.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,7 @@ func (am *Amigo) Handler(hooks Hooks, guacHandler http.Handler) http.Handler {
m := http.NewServeMux()

m.HandleFunc("/", am.handleIndex())
m.HandleFunc("/info", am.handleInfo())
m.HandleFunc("/help", am.handleHelp())
m.HandleFunc("/challenges", am.handleChallenges())
m.HandleFunc("/teams", am.handleTeams())
m.HandleFunc("/hosts", am.handleHostsInformation())
Expand Down Expand Up @@ -285,15 +285,15 @@ func (am *Amigo) handleGuacConnection(hook func(t *store.Team) error, next http.
}
}

func (am *Amigo) handleInfo() http.HandlerFunc {
infoTemplate := wd + "/svcs/amigo/resources/private/info.tmpl.html"
func (am *Amigo) handleHelp() http.HandlerFunc {
infoTemplate := wd + "/svcs/amigo/resources/private/help.tmpl.html"
tmpl, err := parseTemplates(infoTemplate)
if err != nil {
log.Println("error info tmpl: ", err)
}
return func(w http.ResponseWriter, r *http.Request) {
w.Header().Add("Strict-Transport-Security", "max-age=31536000; includeSubDomains")
if r.URL.Path != "/info" {
if r.URL.Path != "/help" {
http.NotFound(w, r)
return
}
Expand Down
9 changes: 4 additions & 5 deletions svcs/amigo/resources/private/base.tmpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{.EventName}}</title>
<link rel="stylesheet" href="/assets/css/amigo.css">
<link href="https://fonts.googleapis.com/css?family=Orbitron|Ubuntu&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Audiowide&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/assets/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined" rel="stylesheet">
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
Expand All @@ -23,13 +22,13 @@
<main id="content">

{{ template "content" . }}
<img class="wave-bg-footer" src="/assets/img/smallwave-footer.png">

</main>

<footer class="footer">
<div class="container text-center">
<p style="margin:0px">
Powered by <a href="https://github.com/aau-network-security/haaukins">Haaukins</a> at AAU
<p style="margin:0px; font-size: x-large; color: #68737d">
This platform, <a href="https://github.com/aau-network-security/haaukins">Haaukins</a>, Powered by Aalborg University
</p>
</div>
</footer>
Expand Down
8 changes: 4 additions & 4 deletions svcs/amigo/resources/private/challenges.tmpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
{{ define "content"}}
<img class="wave-bg-general" src="/assets/img/wave-general-bot.png">
<!--<img class="wave-bg-general" src="/assets/img/background.png">-->
<div class="container" id="challengespage">
<div class="row mb-botpage">
<div class="col-lg-4 col-md-0"></div>
<div class="col-lg-4 col-md-6">
<h1 class="text-center mt-toppage mb-2"><i class="fas fa-flag-checkered"></i> Challenges</h1>
<div class="col-lg-6 col-md-6" style="margin-left: 24%">
<h1 class="text-center mt-toppage mb-2"><span class="material-icons-outlined" style="font-size:xxx-large ">flag</span> Challenges</h1>
</div>
<div class="col-lg-4 col-md-6 text-center">
<div class="col-lg-2 mt-5 text-center " style="margin-left: 8%">
<div id="reset-frontend"></div>
<div id="reset-frontend-resp"></div>
</div>
Expand Down
29 changes: 14 additions & 15 deletions svcs/amigo/resources/private/info.tmpl.html → svcs/amigo/resources/private/help.tmpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
{{ define "content" }}
<img class="wave-bg-general" src="/assets/img/wave-general-bot.png" xmlns="http://www.w3.org/1999/html">
<div class="container" id="infopage">
<div class="row mb-botpage">
<div class="col-lg-4 col-md-0"></div>
<div class="col-lg-12 col-md-0">
<h1 class="text-center mt-toppage mb-2"><i class="fa fa-info-circle " aria-hidden="true"></i> Information Point</h1>
<h1 class="text-center mt-toppage mb-2"><span class="material-icons-outlined" style="font-size:xxx-large ">help_outline</span> Help</h1>
</div>
<div class= "col-lg-12 col-md-12" style="text-align: right">
<a href="https://github.com/aau-network-security/haaukins/edit/master/svcs/amigo/resources/private/info.tmpl.html"><i class="fas fa-edit " aria-hidden="true"></i> Edit this page</a>
Expand All @@ -28,16 +27,16 @@ <h1 class="text-center mt-toppage mb-2"><i class="fa fa-info-circle " aria-hidde
{{ end }}

{{ if or (eq .IsVPN 0) (eq .IsVPN 2) }}
<a {{ if eq .IsVPN 0 }} class="nav-item nav-link active" {{ else }} class="nav-item nav-link" {{ end }} id="copy-clipboard-tab" data-toggle="tab" href="#copy-clipboard" role="tab">Copy / Paste</a>
<a class="nav-item nav-link" id="conn-error-tab" data-toggle="tab" href="#conn-error" role="tab">Connection Error</a>
<a {{ if eq .IsVPN 0 }} class="nav-item nav-link active" {{ else }} class="nav-item nav-link" {{ end }} id="copy-clipboard-tab" data-toggle="tab" href="#copy-clipboard" role="tab" style="z-index: 1;"><i class="fas fa-clipboard"></i> Copy / Paste</a>
<a class="nav-item nav-link" style="z-index: 1;"id="conn-error-tab" data-toggle="tab" href="#conn-error" role="tab"><i class="fas fa-exclamation-circle"></i> Connection Error</a>
{{ end }}
</div>
<div class="tab-content p-3" id="nav-tabContent">
{{ if or (eq .IsVPN 1) (eq .IsVPN 2 ) }}
<div class="tab-pane fade show active" id="vpn-conn" role="tabpanel" aria-labelledby="vpn-conn-tab">

In order to have VPN connection into virtualized lab environment on Haaukins,
you need to install Wireguard client for your computer. <br><br>
you need to install Wireguard client for your computer. <br>

<b>Installation guideline for variety of clients are available on official website of Wireguard.</b>

Expand Down Expand Up @@ -100,18 +99,18 @@ <h1 class="text-center mt-toppage mb-2"><i class="fa fa-info-circle " aria-hidde

<li> Download application from <a href="https://www.wireguard.com/install/">installation page</a></li>
<li> Import configuration file as shown for MacOS</li>
<li> Make sure handshake is successfully done.</li><br>
<li> Make sure handshake is successfully done.</li>
</div>
{{ end }}

{{ if or (eq .IsVPN 0) (eq .IsVPN 2) }}
<div {{ if eq .IsVPN 0 }} class="tab-pane fade show active" {{ else }} class="tab-pane fade" {{ end }} id="copy-clipboard" role="tabpanel" aria-labelledby="copy-clipboard-tab">
<p class="dark-color">
In order to copy from Host to VM on the browser and the way around, these are the following command:
<br><br>
<br>
<li> On Windows & Linux: <strong class="text-black">Ctrl+Alt+Shift</strong></li>
<li> On MacOS: <strong class="text-black">Ctrl+Command+Shift</strong></li>
<br><br>
<br>
You might need to logout and login to VM cause sometimes keyboard combination is getting broken.
For example, when you type A it writes E.
</p>
Expand All @@ -126,18 +125,18 @@ <h1 class="text-center mt-toppage mb-2"><i class="fa fa-info-circle " aria-hidde
</div>
<p class="p-2 mt-2 dark-color mb-0">
There are multiple reasons behind this error for example:
<br><br>
<br>
<li> The VM crashed and you can not connect it </li>
<li> There might be multiple open tabs with same VM instance</li>
<li> After a while without any activity the VM goes into sleep mode</li>
<li> There might be poor internet connection</li>
<br><br>
<br>
In order to solve this error try out those steps:
<br><br>
1. Close all the VM Tabs<br>
2. Log out and login on event page<br>
3. Click <strong>RESET Kali Machine</strong> button from challenges page<br>
4. In case you still get the error create a new team
<br>
<li> Close all the VM Tabs</li>
<li> Log out and login on event page</li>
<li> Click <strong>RESET Kali Machine</strong> button from challenges page</li>
<li> In case you still get the error create a new team</li>
</p>
</div>
{{ end }}
Expand Down
6 changes: 3 additions & 3 deletions svcs/amigo/resources/private/hosts.tmpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
{{ define "content"}}
<img class="wave-bg-general" src="/assets/img/wave-general-bot.png">
<!--<img class="wave-bg-general" src="/assets/img/background.png">-->
<div class="container" id="hostspage">
<div class="row mb-botpage">
<div class="col-lg-4 col-md-0"></div>
<div class="col-lg-12 col-md-0">
<h1 class="text-center mt-toppage mb-2"><i class="fas fa-file-alt"></i> Hosts</h1>
<h1 class="text-center mt-toppage mb-2"><span class="material-icons-outlined" style="font-size:xxx-large ">dns</span> DNS </h1>
<div class= "col-lg-12 col-md-12" style="text-align: right">
<a href="https://github.com/aau-network-security/haaukins/edit/master/svcs/amigo/resources/private/hosts.tmpl.html"><i class="fas fa-edit " aria-hidden="true"></i> Edit this page</a>
</div>
<div role="alert" class="alert alert-primary mt-3" style="text-align: center;">
<i class="fa fa-info-circle " aria-hidden="true"></i> <strong>DNS Records</strong>
<i class="fas fa-globe "></i> <strong>DNS Records</strong>
<p> Use following hosts information below to enable reverse DNS lookup when using nmap tool.</p>
<p> Given records can be appended to <b>/etc/hosts</b> file on virtual environment.</p>
<p> It can also be directly browsed from virtual environment. </p>
Expand Down
68 changes: 1 addition & 67 deletions svcs/amigo/resources/private/index.tmpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,69 +1,3 @@
{{ define "content" }}
<img class="wave-bg-index" src="/assets/img/wave-index.png">
<div class="container" id="indexpage">
<div class="row">
<div class="col-sm-12 col-lg-8 offset-lg-2">
<h1 class="text-center mt-toppage">Haaukins</h1>
<h4 class="text-center"> A platform for Cyber Security Exercises</h4>
<p class="text-center">
Founded by <a class="color-sec-aau" href="http://danishcybersecurityclusters.dk/">Danish Cyber Security Clusters</a> and supported by
</p>
<a href="https://www.industriensfond.dk/">
<img class="w-100 mx-auto d-block" style="max-width: 300px; padding: 3vh 0 4vh 0;" src="/assets/img/index/ind-logo.png">
</a>
<p class="text-center">
Developed at <a class="color-sec-aau" href="http://es.aau.dk/">Aalborg University</a> (Department of Electronic Systems) by:
</p>
<div class="row aau-developer mt-5">
<div class="col-sm-5 text-center">
<img src="/assets/img/haaukins-login.png">
</div>
<div class="col-sm-7 mt-3 mt-sm-0">
<p><a href="https://mrturkmen.com">Ahmet Turkmen</a> (Research Assistant)</p>
<p><a href="https://github.com/gianmarcomennecozzi">Gian Marco Mennecozzi</a> (Research Assistant)</p>
<p><a href="https://github.com/kdhageman">Kaspar Hageman</a> (Ph.D. Student)</p>
<p><a href="https://github.com/tpanum">Thomas Kobber Panum</a> (Ph.D. Student)</p>
<p><a href="https://github.com/eyJhb">Johan Hempel Bengtson</a> (Student Helper)</p>
</div>
</div>
<div class="card-deck py-4">
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Tips and tricks</h5>
<div class="card-text">
Stuck at a certain challenge? Or do you just want to know more about a certain topic?
</div>
</div>
<div class="card-footer">
<a href="https://aau-network-security.github.io/tips-and-tricks/" target="_blank">Visit the tips &amp; tricks page</a>
</div>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Survey</h5>
<p>You can help us improve the platform by taking our survey to let us know about your experiences!</p>
</div>
<div class="card-footer">
<a href="https://www.survey-xact.dk/LinkCollector?key=KDRVSTDJJN15" target="_blank">Fill out the survey here</a>
</div>
</div>
</div>
<p class="text-center">
Feel free to join our local Facebook Group:
</p>
<p class="text-center facebook-aau">
<a href="https://www.facebook.com/groups/957517617737780"><i class="fab fa-facebook" aria-hidden="true"></i>&nbsp;AAU Hackers &amp; Friends</a>
</p>
<ul class="text-center mb-botpage sponsor">
<li><a href="https://eadania.dk/"> <img src="/assets/img/index/da-90.png"></a></li>
<li><a href="https://www.dtu.dk/"><img src="/assets/img/index/dtu-90.png"></a></li>
<li><a href="https://kea.dk/"> <img src="/assets/img/index/
kea-90.jpg"></a></li>
<li><a href="https://happy42.dk/"> <img src="/assets/img/index/happy-90.png"></a></li>
<li><a href="https://www.eaaa.dk/"><img src="/assets/img/index/eaa-90.png"></a></li>
<li><a href="https://www.cbs.dk/"><img src="/assets/img/index/cbs.png"></a></li>
</ul>
</div>
</div>
</div>
<div class="container" id="indexpage"></div>
{{ end }}
8 changes: 5 additions & 3 deletions svcs/amigo/resources/private/js/src/components/ChallegesPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<template>
<div id="challenges-board" v-bind:style= "[this.isLabAssigned ? {}: { 'pointer-events': 'none', 'opacity': '0.5' }]">

<div class="row mt-2" v-for="category in challengesFromAmigo" v-bind:key="category[0].challenge.category">
<div class="category-header col-md-12 mb-3">
<h3>{{category[0].challenge.category}}</h3>
Expand Down Expand Up @@ -32,7 +31,6 @@ export default {
}
},
created: function() {

this.connectToWS();
},
methods: {
Expand Down Expand Up @@ -104,6 +102,7 @@ export default {
color: #fff;
background-color: #211A52;
border-color: #211A52;
box-shadow: 4px 4px #00e6cc
}
.btn-haaukins:hover{
color: #fff;
Expand All @@ -125,12 +124,15 @@ export default {
.btn-success{
background-color: #6ab55f;
border-color: #6ab55f;
box-shadow: 4px 4px #00ff41;
}
.btn-success:hover{
background-color: #55a04a;
border-color: #55a04a;
}
.chal-name-font{
font-size: 14px;
font-size: 1.12em;

}

</style>
6 changes: 5 additions & 1 deletion svcs/amigo/resources/private/js/src/components/ChallengeModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div>
<b-modal ref="modal" id="challengeModal" centered hide-footer hide-header >
<b-modal size="lg" ref="modal" title="challenge.name" id="challengeModal" centered hide-footer hide-header>
<div class="modal-body">
<button type="button" class="close" v-on:click="$bvModal.hide('challengeModal')">
<span aria-hidden="true">×</span>
Expand Down Expand Up @@ -86,4 +86,8 @@ export default {
color: #211A52;
text-decoration: none;
}
* {
font-family: inherit!important;
}

</style>
Loading