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

Jump to bottom

UI/dashboard #808

Open
wants to merge 11 commits into
base: soo
Choose a base branch
from
Open

UI/dashboard #808

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
def892b
Centered text of training selection
tuffgniuz Sep 7, 2022
8f952be
stuck with margin
tuffgniuz Sep 12, 2022
54e7d8c
fixing training selection page
tuffgniuz Sep 12, 2022
65bcf0b
Accordion and accordion items and links working. TODO: Accordion item…
tuffgniuz Sep 13, 2022
b3faaec
Changed dashboard to an accordion based layoud
tuffgniuz Sep 14, 2022
a7e7ef5
Fixed font-sizes with media-queries
tuffgniuz Sep 15, 2022
d4a3c72
Animation added to accordion and removed unused imports in training-p…
tuffgniuz Sep 15, 2022
8faaeed
Fixed console TypeError: undefined in training-profile component
tuffgniuz Sep 15, 2022
e524e69
Fixed alignment issues
tuffgniuz Sep 15, 2022
6ffaada
Merged with uit/training/courses. Fixed console errors and alignment
tuffgniuz Sep 15, 2022
c53fcc3
Smoother accordion content animation
tuffgniuz Sep 15, 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
2 changes: 1 addition & 1 deletion Angular2/src/app/app.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<router-outlet></router-outlet>
<router-outlet></router-outlet>
315 changes: 254 additions & 61 deletions Angular2/src/app/layouts/horizontaltopbar/horizontaltopbar.component.html
View file
Open in desktop

Large diffs are not rendered by default.

9 changes: 9 additions & 0 deletions Angular2/src/app/layouts/horizontaltopbar/horizontaltopbar.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { NgModule } from "@angular/core";
import { SharedModule } from "src/app/shared/shared.module";

@NgModule({
imports: [
SharedModule
]
})
export class HorizontaltopbarModule { }
108 changes: 18 additions & 90 deletions Angular2/src/app/pages/dashboard/home/home.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,93 +1,21 @@
<div class="container-fluid">
<!-- start page title -->
<div class="row">
<div class="col-12">
<div class="page-title-box d-flex align-items-center justify-content-between">
<h4 class="mb-0 font-size-18 head-four">Dashboard</h4>
<div class="page-title-right">
<ol class="breadcrumb m-0">
<li class="breadcrumb-item active text-primary">Welcome to Dashboard</li>
</ol>
</div>
</div>
<div class="container-fill">
<div class="accordion">
<div
class="accordion-item"
*ngFor="let item of accordionItems"
[ngClass]="{ active: item.display }"
id="{{ item.id }}"
>
<div class="accordion-action" (click)="expandItem($event, item)">
<a href="">{{ item.title }}</a>
</div>
</div>
<!-- end page title -->
<div class="row pt-5">
<div class="col-lg-12 text-center">
<div class="home-wrapper">
<div class="mb-5">
<p class="h1 heading-dark">Security Knowledge Framework</p>
</div>
<div class="container">
<p class="intro">
<a href="https://owasp.org/www-project-security-knowledge-framework/">OWASP-SKF</a> is an open source web application that explains secure coding principles in multiple programming languages. The goal of OWASP-SKF is to help you learn and integrate security by design in your software development and build applications that are secure by design. OWASP-SKF does this through manageable software development projects with checklists (using <a href="https://owasp.org/www-project-application-security-verification-standard/">OWASP-ASVS</a>/<a href="https://owasp.org/www-project-mobile-security-testing-guide/">OWASP-MASVS</a> or custom security checklists) and labs to practise security verification (using SKF-Labs, <a href="https://owasp.org/www-project-juice-shop/">OWASP Juice-shop</a>, and best practice code examples from SKF and the <a href="https://cheatsheetseries.owasp.org">OWASP-Cheatsheets</a>).

If you want a simple set of courses on the fundamentals of developing secure software that don’t involve programming exercises, you might instead consider the <a href="https://openssf.org/edx-courses/">Secure Software Development Fundamentals Courses available on edX from OpenSSF</a>.
</p>
</div>
<div class="py-4">
<button (click)="tour()" class="btn btn-primary btn-lg">Start tour</button>
</div>

<div class="row justify-content-center">
<div class="col-md-3 d-flex align-items-stretch">
<div class="card mt-4 maintenance-box">
<div class="card-body d-flex flex-column">
<i class="bx bx-code-alt mb-4 h1 text-primary"></i>
<h5 class="font-size-15 text-primary text-uppercase">Code examples</h5>
<p class="mb-0">The code examples show how to approach some common functionalities and how to apply the secure coding principles!
We have secure code examples in different languages.</p>
<div class="mt-auto pt-3">
<button type="button" routerLink="/code-example/view" class="btn btn-primary btn-sm">Learn More</button>
</div>
</div>
</div>
</div>
<div class="col-md-3 d-flex align-items-stretch">
<div class="card mt-4 maintenance-box">
<div class="card-body d-flex flex-column">
<i class="bx bx-list-check mb-4 h1 text-primary"></i>
<h5 class="font-size-15 text-primary text-uppercase">Checklist</h5>
<p class="mb-0">Show different checklists that you can select for reference material.
Click on the security control in the checklist to show the correlated knowledgebase item.</p>
<div class="mt-auto pt-3">
<button type="button" routerLink="/checklists/view" class="btn btn-primary btn-sm">Learn More</button>
</div>
</div>
</div>
</div>
<div class="col-md-3 d-flex align-items-stretch">
<div class="card mt-4 maintenance-box">
<div class="card-body d-flex flex-column">
<i class="bx bx-book mb-4 h1 text-primary"></i>
<h5 class="font-size-15 text-primary text-uppercase">Knowledge Base</h5>
<p class="mb-0">All the information which is correlated throughout the project can be found here!
Need specific information on the spot then search through the Knowledge base items.</p>
<div class="mt-auto pt-3">
<button type="button" routerLink="/knowledgebase/view" class="btn btn-primary btn-sm">Learn More</button>
</div>
</div>
</div>
</div>

<div class="col-md-3 d-flex align-items-stretch">
<div class="card mt-4 maintenance-box">
<div class="card-body d-flex flex-column">
<i class="bx bxs-flask mb-4 h1 text-primary"></i>
<h5 class="font-size-15 text-primary text-uppercase">
SKF Labs</h5>
<p class="mb-0">We created SKF Labs for Developers and security specialist to train their security testing skills.
Also provided are write-ups for the labs to teach the correct testing methodology.</p>
<div class="mt-auto pt-3">
<button type="button" routerLink="/labs/view" class="btn btn-primary btn-sm">Learn More</button>
</div>
</div>
</div>
</div>
</div>
<!-- end row -->
</div>
<div class="accordion-content">
<h1 class="accordion-title">{{ item.title }}</h1>
<p class="accordion-description">{{ item.description }}</p>
<button class="btn" routerLink="{{ item.routerLink }}">
Get started
</button>
</div>
</div>
</div> <!-- container-fluid -->
</div>
</div>
157 changes: 157 additions & 0 deletions Angular2/src/app/pages/dashboard/home/home.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,157 @@
/** container-fill css overrides to fill up the whole page content between the topnav and footer **/
.container-fill {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
overflow: hidden;

.accordion {
display: flex;
color: #fff;
height: 100%;

/** Accordion item style when collapsed **/
.accordion-item {
width: 10%;

.accordion-action {
height: 100%;

a {
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: 700;
writing-mode: vertical-rl;
transform: rotate(180deg);
color: #fff;
height: 100%;
width: 100%;
}
}

.accordion-content {
padding-left: 10rem;
padding-right: 6rem;
visibility: hidden;

.accordion-title {
font-size: 40px;
color: #fff;
font-weight: 700;
margin-bottom: 25px;
}

.accordion-description {
font-size: 18px;
font-weight: 500;
text-align: justify;
margin-bottom: 50px;
}
}
}

/** Accordion item style when active **/
.active {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 2rem;

animation-name: expand;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode: forwards;

.accordion-action {
display: none;
}

.accordion-content {
animation-name: showContent;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}

@keyframes showContent {
0% {
opacity: 0;
}
90% {
opacity: 0.1;
}
95% {
opacity: 0.5;
}
100% {
visibility: visible;
opacity: 1;
}
}

@keyframes expand {
0% {
width: 0%;
}
25% {
width: 25%;
}
50% {
width: 50%;
}
// 75% {
// width: 75%;
// }
100% {
width: 100%;
}
}
}
}
}

.btn {
font-size: 1.2rem;
color: #fff;
background: #101f39;
padding-left: 1.5rem;
padding-right: 1.5rem;
align-self: flex-start;
}

.btn:hover {
color: #fff;
}

/** Background colors for the accordion items **/

#developer {
background-color: #7c5ff4;
}
#pentester {
background-color: #f72585;
}
#training {
background-color: #4cc9f0;
}
#checklist {
background-color: #263be0;
}

/** MEDIA QERIES **/

@media (min-width: 1824px) {
.accordion-title {
font-size: 80px;
}

.accordion-description {
font-size: 24px;
}
}
Loading