From def892bb6cc2688590cbc8258233c5ae1500ec5a Mon Sep 17 00:00:00 2001 From: tufgniuz Date: Wed, 7 Sep 2022 22:28:27 +0700 Subject: [PATCH 01/10] Centered text of training selection --- .../profile/training-profile.component.html | 64 +++++++------- .../profile/training-profile.component.scss | 84 +++++++++---------- Angular2/src/environments/environment.ts | 4 +- Angular2/src/styles.scss | 1 - 4 files changed, 71 insertions(+), 82 deletions(-) diff --git a/Angular2/src/app/pages/training/profile/training-profile.component.html b/Angular2/src/app/pages/training/profile/training-profile.component.html index 689209ed5..480324942 100644 --- a/Angular2/src/app/pages/training/profile/training-profile.component.html +++ b/Angular2/src/app/pages/training/profile/training-profile.component.html @@ -23,43 +23,39 @@

{{ profile.name }}

-
-
-
-

{{ course.name }}

-

Training -

-

X Chapters

-

Xmin

+
    +
  • +

    {{ course.name }}

    + + Training + +

    + + + + + + + + + + + + + + + + + - -
- - - - - - - - - - - -
-
+ + + diff --git a/Angular2/src/app/pages/training/profile/training-profile.component.scss b/Angular2/src/app/pages/training/profile/training-profile.component.scss index 20e9d581c..2c8d0bd12 100644 --- a/Angular2/src/app/pages/training/profile/training-profile.component.scss +++ b/Angular2/src/app/pages/training/profile/training-profile.component.scss @@ -1,9 +1,43 @@ -// li.clickable { -// cursor: pointer; -// } +ul { + list-style: none; +} -.shadow { - box-shadow: 0px 4px 20px 5px rgba(0, 0, 0, 0.05); +.course-list { + display: flex; + flex-direction: column; + + .course-list-item { + display: flex; + justify-content: space-between; + align-items: center; + border-radius: 10px; + box-shadow: 0px 4px 20px 5px rgba(0, 0, 0, 0.05); + margin-bottom: 1.5rem; + padding: 1.8rem 4.3rem; + font-size: 1rem; + + h1 { + font-size: 1rem; + font-weight: 600; + } + + .label { + text-align: center; + border-radius: 50px; + } + + .label-l1 { + background-color: #4cc9f0; + } + + .label-l2 { + background-color: #F72585; + } + + .label-l3 { + background-color: #7C5FF4; + } + } } .border-l1 { @@ -18,45 +52,5 @@ border-left: 3.5px solid #7C5FF4; } -.box { - border-radius: 7px; - padding: 1em 2em; - - .box-title { - font-weight: 600; - min-width: 242px; - } - - .box-level { - border-radius: 33px; - padding: .3rem 1.3rem; - text-align: center; - text-transform: uppercase; - color: #fff; - } - - .easy { - background-color: #4CC9F0; - } - .competent { - background-color: #F72585; - } - - .advanced { - background-color: #7C5FF4; - } - - .box-text { - font-weight: 400; - } -} - -.btn { - font-weight: 600; - - .btn-dark { - background: #101F39; - } -} diff --git a/Angular2/src/environments/environment.ts b/Angular2/src/environments/environment.ts index aa800c437..e486e8f27 100644 --- a/Angular2/src/environments/environment.ts +++ b/Angular2/src/environments/environment.ts @@ -8,8 +8,8 @@ export const environment = { This config is about the endpoint where your api is running that is talking to the Angular UI DO NOT CHANGE HTTP TO HTTPS MANUALLY SHOULD BE HANDLED BY DEPLOY SCRIPTS */ - API_ENDPOINT: 'http://localhost:8888', - /* API_ENDPOINT: 'https://demo.securityknowledgeframework.org', */ + /* API_ENDPOINT: 'http://localhost:8888', */ + API_ENDPOINT: 'https://demo.securityknowledgeframework.org', AUTH_METHOD: 'skiploginprovider', /* diff --git a/Angular2/src/styles.scss b/Angular2/src/styles.scss index abb95336b..411add798 100644 --- a/Angular2/src/styles.scss +++ b/Angular2/src/styles.scss @@ -3,4 +3,3 @@ /* Importing Bootstrap SCSS file. */ @import '../node_modules/bootstrap/scss/bootstrap.scss'; - From 8f952bea3c77967508419a446d034deb2b008c78 Mon Sep 17 00:00:00 2001 From: tufgniuz Date: Mon, 12 Sep 2022 18:54:02 +0700 Subject: [PATCH 02/10] stuck with margin --- .../horizontaltopbar.component.html | 315 ++++++++++++++---- .../horizontaltopbar.module.ts | 9 + .../pages/dashboard/home/home.component.html | 222 +++++++----- .../pages/dashboard/home/home.component.scss | 53 +++ Angular2/src/assets/scss/app.scss | 1 - Angular2/src/environments/environment.ts | 6 +- 6 files changed, 452 insertions(+), 154 deletions(-) create mode 100644 Angular2/src/app/layouts/horizontaltopbar/horizontaltopbar.module.ts diff --git a/Angular2/src/app/layouts/horizontaltopbar/horizontaltopbar.component.html b/Angular2/src/app/layouts/horizontaltopbar/horizontaltopbar.component.html index dc8303f5f..879d35fee 100644 --- a/Angular2/src/app/layouts/horizontaltopbar/horizontaltopbar.component.html +++ b/Angular2/src/app/layouts/horizontaltopbar/horizontaltopbar.component.html @@ -2,19 +2,22 @@
- -
@@ -24,10 +27,19 @@
- - -
+ + +
@@ -35,18 +47,39 @@
- -
- +
- +
- +
@@ -54,52 +87,112 @@
-
- -
-
-
-
-
-
- -
+
- - Github + + Github GitHub
- - Gitter + + Gitter Gitter Chat
@@ -108,22 +201,39 @@
- +
-
+
-
-
Click here to activate the Tour on a specific page, it will explain per page the functionalities and how to use SKF.
+
+ Click here to activate the Tour on a specific page, it will explain per + page the functionalities and how to use SKF. +
@@ -201,7 +369,10 @@
Click here to activate the Tour on a specific page, it will explain per page
-
Click here to change the styling of the SKF application to Dark/Light mode.
+
+ Click here to change the styling of the SKF application to Dark/Light + mode. +
@@ -209,7 +380,9 @@
Click here to change the styling of the SKF application to Dark/Light mode.<
-
Click here to change the context of the used checklist types in SKF.
+
+ Click here to change the context of the used checklist types in SKF. +
@@ -217,7 +390,10 @@
Click here to change the context of the used checklist types in SKF.
-
The landing page of SKF, after the user login or when you skip the login.
+
+ The landing page of SKF, after the user login or when you skip the + login. +
@@ -225,7 +401,10 @@
The landing page of SKF, after the user login or when you skip the login.
-
Here you can create and manage your projects and results from the expert system wizard.
+
+ Here you can create and manage your projects and results from the expert + system wizard. +
@@ -233,7 +412,10 @@
Here you can create and manage your projects and results from the expert sys
-
Here you can view, create and manage your checklists and modify the expert system wizard.
+
+ Here you can view, create and manage your checklists and modify the + expert system wizard. +
@@ -241,7 +423,10 @@
Here you can view, create and manage your checklists and modify the expert s
-
Here you can view, create and manage your knowledge base items based on the checklist type.
+
+ Here you can view, create and manage your knowledge base items based on + the checklist type. +
@@ -249,7 +434,10 @@
Here you can view, create and manage your knowledge base items based on the
-
Here you can view, create and manage your code example items based on the checklist type.
+
+ Here you can view, create and manage your code example items based on + the checklist type. +
@@ -257,7 +445,10 @@
Here you can view, create and manage your code example items based on the ch
-
Here you can view, deploy and stop the vulnerable labs to train your security verification skills.
+
+ Here you can view, deploy and stop the vulnerable labs to train your + security verification skills. +
@@ -273,7 +464,9 @@
Here you can participate in trainings.
-
Here you can view, create and manage your users for the SKF application.
+
+ Here you can view, create and manage your users for the SKF application. +
diff --git a/Angular2/src/app/layouts/horizontaltopbar/horizontaltopbar.module.ts b/Angular2/src/app/layouts/horizontaltopbar/horizontaltopbar.module.ts new file mode 100644 index 000000000..b75a01dcd --- /dev/null +++ b/Angular2/src/app/layouts/horizontaltopbar/horizontaltopbar.module.ts @@ -0,0 +1,9 @@ +import { NgModule } from "@angular/core"; +import { SharedModule } from "src/app/shared/shared.module"; + +@NgModule({ + imports: [ + SharedModule + ] +}) +export class HorizontaltopbarModule { } diff --git a/Angular2/src/app/pages/dashboard/home/home.component.html b/Angular2/src/app/pages/dashboard/home/home.component.html index 7a7310b0b..3ff14b9dc 100644 --- a/Angular2/src/app/pages/dashboard/home/home.component.html +++ b/Angular2/src/app/pages/dashboard/home/home.component.html @@ -1,93 +1,137 @@ -
- -
-
-
-

Dashboard

-
-
    -
  1. Welcome to Dashboard
    2. -
-
-
+
+
    +
  • +
    +

    Developer

    +

    + Use the framework to build your software secure, with the tools in the + palm of your hand. +

    +
    + +
    • +
  • +
    +

    Pentester

    +

    + Use the framework to build your software secure, with the tools in the + palm of your hand. +

    +
    + +
    • +
  • +
    +

    Training Labs

    +

    + Use the framework to build your software secure, with the tools in the + palm of your hand. +

    +
    + +
    • +
  • +
    +

    Customize Checklist

    +

    + Use the framework to build your software secure, with the tools in the + palm of your hand. +

    -
+ + + + + + + + + + + + + + + + + -
-
-
-
-

Security Knowledge Framework

-
-
-

- OWASP-SKF 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 OWASP-ASVS/OWASP-MASVS or custom security checklists) and labs to practise security verification (using SKF-Labs, OWASP Juice-shop, and best practice code examples from SKF and the OWASP-Cheatsheets). + + + + + + + + + - 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 Secure Software Development Fundamentals Courses available on edX from OpenSSF. -

-
-
- -
- -
-
-
-
- -
Code examples
-

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.

-
- -
-
-
-
-
-
-
- -
Checklist
-

Show different checklists that you can select for reference material. - Click on the security control in the checklist to show the correlated knowledgebase item.

-
- -
-
-
-
-
-
-
- -
Knowledge Base
-

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.

-
- -
-
-
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -
-
-
- -
- SKF Labs
-

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.

-
- -
-
-
-
-
- -
-
-
-
+ + + + + + + + + + + + + + + + + + + +
+ diff --git a/Angular2/src/app/pages/dashboard/home/home.component.scss b/Angular2/src/app/pages/dashboard/home/home.component.scss index e69de29bb..32a1833ca 100644 --- a/Angular2/src/app/pages/dashboard/home/home.component.scss +++ b/Angular2/src/app/pages/dashboard/home/home.component.scss @@ -0,0 +1,53 @@ +ul { + list-style: none; +} + +// overrides + +// *, +// *::before, +// *::after { +// margin: 0 !important; +// padding: 0 !important; +// box-sizing: border-box !important; +// } + +// accordion + +.slides-container { + height: 100vh; +} + +.slides { + display: flex; + width: 100%; + height: 100%; + overflow: hidden; + color: #fff; + + .slide { + display: flex; + flex-direction: column; + justify-content: center; + height: 100%; + + .slide-title { + font-size: 32px; + font-weight: 700; + color: #fff; + } + + p { + text-align: justify; + font-size: 18px; + font-weight: 500; + } + } +} + +// slide colors + +#slide-developer { background-color: #7C5FF4;} +#slide-pentester { background-color: #F72585; } +#slide-training { background-color: #4CC9F0; } +#slide-checklist { background-color: #263BE0; } diff --git a/Angular2/src/assets/scss/app.scss b/Angular2/src/assets/scss/app.scss index 43310e157..6bfa75150 100644 --- a/Angular2/src/assets/scss/app.scss +++ b/Angular2/src/assets/scss/app.scss @@ -38,7 +38,6 @@ // Code examples highlight @import "./highlight.js/scss/github.scss"; - .badge { color: #ffffff; } diff --git a/Angular2/src/environments/environment.ts b/Angular2/src/environments/environment.ts index aa800c437..1b7f94a33 100644 --- a/Angular2/src/environments/environment.ts +++ b/Angular2/src/environments/environment.ts @@ -3,13 +3,13 @@ // The list of file replacements can be found in `angular.json`. export const environment = { - production: true, + production: false, /* This config is about the endpoint where your api is running that is talking to the Angular UI DO NOT CHANGE HTTP TO HTTPS MANUALLY SHOULD BE HANDLED BY DEPLOY SCRIPTS */ - API_ENDPOINT: 'http://localhost:8888', - /* API_ENDPOINT: 'https://demo.securityknowledgeframework.org', */ + /* API_ENDPOINT: 'http://localhost:8888', */ + API_ENDPOINT: 'https://demo.securityknowledgeframework.org', AUTH_METHOD: 'skiploginprovider', /* From 54e7d8c0965a41902572f1118f78257f07cef380 Mon Sep 17 00:00:00 2001 From: tufgniuz Date: Mon, 12 Sep 2022 20:48:29 +0700 Subject: [PATCH 03/10] fixing training selection page --- Angular2/src/app/app.component.html | 2 +- .../profile/training-profile.component.html | 60 +++++++++++++------ 2 files changed, 44 insertions(+), 18 deletions(-) diff --git a/Angular2/src/app/app.component.html b/Angular2/src/app/app.component.html index 90c6b6463..0680b43f9 100644 --- a/Angular2/src/app/app.component.html +++ b/Angular2/src/app/app.component.html @@ -1 +1 @@ - \ No newline at end of file + diff --git a/Angular2/src/app/pages/training/profile/training-profile.component.html b/Angular2/src/app/pages/training/profile/training-profile.component.html index 480324942..61dbd078a 100644 --- a/Angular2/src/app/pages/training/profile/training-profile.component.html +++ b/Angular2/src/app/pages/training/profile/training-profile.component.html @@ -1,5 +1,9 @@
- +

Loading, Please Wait...

 @@ -7,10 +11,17 @@
-
    -
  1. Training
    2. -
  2. {{profile?.name}}
    3. -
+
    +
  1. + Training +
    2. +
  2. + {{ profile?.name }} +
    3. +
@@ -20,21 +31,35 @@
-

{{ profile.name }}

+

{{ profile.name }}

    -
  • +

  • {{ course.name }}

    - - Training + + Training

    + - + @@ -50,9 +75,9 @@

    {{ course.name }}

    - - - + + +
@@ -60,4 +85,5 @@

{{ course.name }}

-
+
+ From 65bcf0b2afc45d0235220d9a06b60e1b6b62fa69 Mon Sep 17 00:00:00 2001 From: tufgniuz Date: Tue, 13 Sep 2022 12:31:18 +0700 Subject: [PATCH 04/10] Accordion and accordion items and links working. TODO: Accordion item hide and reveal --- .../pages/dashboard/home/home.component.html | 230 +++++++++--------- .../pages/dashboard/home/home.component.scss | 96 ++++---- .../assets/scss/custom/structure/_topbar.scss | 4 +- 3 files changed, 165 insertions(+), 165 deletions(-) diff --git a/Angular2/src/app/pages/dashboard/home/home.component.html b/Angular2/src/app/pages/dashboard/home/home.component.html index 3ff14b9dc..059f6842b 100644 --- a/Angular2/src/app/pages/dashboard/home/home.component.html +++ b/Angular2/src/app/pages/dashboard/home/home.component.html @@ -1,137 +1,125 @@ -
-
    -
  • -
    -

    Developer

    -

    +

    +
    +
    + +
    +

    Developer

    +

    Use the framework to build your software secure, with the tools in the - palm of your hand. + palm of your hands.

    +
    - -
    • -
  • -
    -

    Pentester

    -

    +

    +
    +
    +

    Pentester

    +

    Use the framework to build your software secure, with the tools in the - palm of your hand. + palm of your hands.

    +
    - -
    • -
  • -
    -

    Training Labs

    -

    +

    +
    +
    +

    Training Labs

    +

    Use the framework to build your software secure, with the tools in the - palm of your hand. + palm of your hands.

    +
    - -
    • -
  • -
    -

    Customize Checklist

    -

    +

    +
    +
    +

    Customize Checklist

    +

    Use the framework to build your software secure, with the tools in the - palm of your hand. + palm of your hands.

    +
    - -
    • -
+
+
+
- - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - -
+ + + + + + + + + + + + + + + + + + + diff --git a/Angular2/src/app/pages/dashboard/home/home.component.scss b/Angular2/src/app/pages/dashboard/home/home.component.scss index 32a1833ca..53e52ceb4 100644 --- a/Angular2/src/app/pages/dashboard/home/home.component.scss +++ b/Angular2/src/app/pages/dashboard/home/home.component.scss @@ -1,53 +1,65 @@ -ul { - list-style: none; +.container-fluid { + // margin: 0; + // padding: 0; + height: 100vh; } -// overrides +.accordion { + display: flex; + color: #fff; + height: 100%; -// *, -// *::before, -// *::after { -// margin: 0 !important; -// padding: 0 !important; -// box-sizing: border-box !important; -// } + .accordion-item { + display: flex; + flex-direction: column; + justify-content: center; + padding: 0 1.5rem; + // width: 10%; -// accordion + .action { + color: #fff; + display: block; + position: relative; + height: 100%; -.slides-container { - height: 100vh; -} + span { + position: absolute; + transform: rotate(270deg); + } + } -.slides { - display: flex; - width: 100%; - height: 100%; - overflow: hidden; - color: #fff; - - .slide { - display: flex; - flex-direction: column; - justify-content: center; - height: 100%; - - .slide-title { - font-size: 32px; - font-weight: 700; - color: #fff; - } - - p { - text-align: justify; - font-size: 18px; - font-weight: 500; - } + .accordion-title { + color: #fff; + font-weight: 700; + margin-bottom: 25px; + } + + .accordion-description { + font-weight: 500; + margin-bottom: 50px; } + } +} + +.btn { + color: #fff; + background: #101f39; + padding-left: 1.5rem; + padding-right: 1.5rem; + align-self: flex-start; } // slide colors -#slide-developer { background-color: #7C5FF4;} -#slide-pentester { background-color: #F72585; } -#slide-training { background-color: #4CC9F0; } -#slide-checklist { background-color: #263BE0; } +#developer { + background-color: #7c5ff4; +} +#pentester { + background-color: #f72585; +} +#training { + background-color: #4cc9f0; +} +#checklist { + background-color: #263be0; +} diff --git a/Angular2/src/assets/scss/custom/structure/_topbar.scss b/Angular2/src/assets/scss/custom/structure/_topbar.scss index 04d21318a..0d583ed02 100644 --- a/Angular2/src/assets/scss/custom/structure/_topbar.scss +++ b/Angular2/src/assets/scss/custom/structure/_topbar.scss @@ -355,7 +355,7 @@ body[data-topbar="dark"] { body[data-layout="horizontal"] { .navbar-brand-box { - width: auto; + width: 100%;; } .page-content { @@ -367,7 +367,7 @@ body[data-layout="horizontal"] { @media (max-width: 992px) { body[data-layout="horizontal"] { .page-content { - margin-top: 15px; + // margin-top: 15px; } } } From b3faaec36508745fe212761a66b2c8e3465b492c Mon Sep 17 00:00:00 2001 From: tufgniuz Date: Thu, 15 Sep 2022 00:06:12 +0700 Subject: [PATCH 05/10] Changed dashboard to an accordion based layoud --- .../pages/dashboard/home/home.component.html | 132 ++---------------- .../pages/dashboard/home/home.component.scss | 98 +++++++++---- .../pages/dashboard/home/home.component.ts | 112 ++++++++++----- 3 files changed, 158 insertions(+), 184 deletions(-) diff --git a/Angular2/src/app/pages/dashboard/home/home.component.html b/Angular2/src/app/pages/dashboard/home/home.component.html index 059f6842b..da8e14648 100644 --- a/Angular2/src/app/pages/dashboard/home/home.component.html +++ b/Angular2/src/app/pages/dashboard/home/home.component.html @@ -1,125 +1,21 @@ -
+
-
- -
-

Developer

-

- Use the framework to build your software secure, with the tools in the - palm of your hands. -

- + -
-

Pentester

-

- Use the framework to build your software secure, with the tools in the - palm of your hands. -

- -
-
-
-
-

Training Labs

-

- Use the framework to build your software secure, with the tools in the - palm of your hands. -

- -
-
-
-
-

Customize Checklist

-

- Use the framework to build your software secure, with the tools in the - palm of your hands. -

- +

{{ item.title }}

+

{{ item.description }}

+
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/Angular2/src/app/pages/dashboard/home/home.component.scss b/Angular2/src/app/pages/dashboard/home/home.component.scss index 53e52ceb4..72984cbf5 100644 --- a/Angular2/src/app/pages/dashboard/home/home.component.scss +++ b/Angular2/src/app/pages/dashboard/home/home.component.scss @@ -1,47 +1,79 @@ -.container-fluid { - // margin: 0; - // padding: 0; - height: 100vh; -} - -.accordion { - display: flex; - color: #fff; +/** 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-item { + .accordion { display: flex; - flex-direction: column; - justify-content: center; - padding: 0 1.5rem; - // width: 10%; + color: #fff; + height: 100%; + + /** Accordion item style when collapsed **/ + .accordion-item { + width: 10%; - .action { - color: #fff; - display: block; - position: relative; - height: 100%; + .accordion-action { + // height: 100%; - span { - position: absolute; - transform: rotate(270deg); + a { + display: flex; + justify-content: center; + align-items: center; + font-size: 36px; + font-weight: 700; + writing-mode: vertical-rl; + transform: rotate(180deg); + color: #fff; + height: 100%; + width: 100%; + } } - } - .accordion-title { - color: #fff; - font-weight: 700; - margin-bottom: 25px; + .accordion-content { + visibility: hidden; + + .accordion-title { + font-size: 80px; + color: #fff; + font-weight: 700; + margin-bottom: 25px; + } + + .accordion-description { + font-size: 24px; + font-weight: 500; + margin-bottom: 50px; + } + } } - .accordion-description { - font-weight: 500; - margin-bottom: 50px; + /** Accordion item style when active **/ + .active { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + padding: 0 2rem; + + .accordion-action { + display: none; + } + + .accordion-content { + visibility: visible; + } } } } .btn { + font-size: 18px; color: #fff; background: #101f39; padding-left: 1.5rem; @@ -49,7 +81,11 @@ align-self: flex-start; } -// slide colors +.btn:hover { + color: #fff; +} + +/** Background colors for the accordion items **/ #developer { background-color: #7c5ff4; diff --git a/Angular2/src/app/pages/dashboard/home/home.component.ts b/Angular2/src/app/pages/dashboard/home/home.component.ts index 838403dec..b11d336ef 100644 --- a/Angular2/src/app/pages/dashboard/home/home.component.ts +++ b/Angular2/src/app/pages/dashboard/home/home.component.ts @@ -5,51 +5,93 @@ import { JoyrideService } from 'ngx-joyride'; @Component({ selector: 'app-home', templateUrl: './home.component.html', - styleUrls: ['./home.component.scss'] + styleUrls: ['./home.component.scss'], }) -export class HomeComponent implements OnInit -{ - - constructor( - private readonly joyride: JoyrideService - ) { } - - ngOnInit(): void - { - - const priv_setting = localStorage.getItem("privilege"); - if (priv_setting === undefined || priv_setting === "" || priv_setting === null ) { - localStorage.setItem('privilege','manage'); +export class HomeComponent implements OnInit { + accordionItems: any[]; + constructor(/* private readonly joyride: JoyrideService */) {} + + ngOnInit(): void { + const priv_setting = localStorage.getItem('privilege'); + if ( + priv_setting === undefined || + priv_setting === '' || + priv_setting === null + ) { + localStorage.setItem('privilege', 'manage'); } - const theme_var = localStorage.getItem("theme"); - if (theme_var === undefined || theme_var === "" || theme_var === null ) { - localStorage.setItem("theme","light-theme.css"); + const theme_var = localStorage.getItem('theme'); + if (theme_var === undefined || theme_var === '' || theme_var === null) { + localStorage.setItem('theme', 'light-theme.css'); } - const cat_var = localStorage.getItem("categorySelector"); - if (cat_var === undefined || cat_var === "" || cat_var === null ) { - localStorage.setItem("categorySelector","1"); + const cat_var = localStorage.getItem('categorySelector'); + if (cat_var === undefined || cat_var === '' || cat_var === null) { + localStorage.setItem('categorySelector', '1'); } - if(localStorage.getItem('theme') == "light-theme.css"){ - document.getElementById('skf-logo-text-large').style.color = '#8184B2' ; - document.getElementById('skf-logo-text-small').style.color = '#8184B2' ; + if (localStorage.getItem('theme') == 'light-theme.css') { + document.getElementById('skf-logo-text-large').style.color = '#8184B2'; + document.getElementById('skf-logo-text-small').style.color = '#8184B2'; } + + this.accordionItems = [ + { + id: 'developer', + title: 'Developer', + description: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua', + routerLink: '/projects/manage', + display: true, + }, + { + id: 'pentester', + title: 'Pentester', + description: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua', + routerLink: '/labs/view', + display: false, + }, + { + id: 'training', + title: 'Training Labs', + description: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua', + routerLink: '/training/profiles', + display: false, + }, + { + id: 'checklist', + title: 'Customize Checklist', + description: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua', + routerLink: '/checklists/view', + display: false, + }, + ]; } - tour() - { - this.joyride.startTour({ - steps: ['styleInfo', 'tourInfo', 'checklistCat', - 'dashContent', 'projectContent', 'codeContent', - 'checkContent', 'knowledgebaseContent', 'userContent', - 'labContent', 'trainingContent' - ], - showPrevButton: true, - stepDefaultPosition: 'bottom', - themeColor: '#000', - showCounter: false, + expandItem(e: Event, currentItem: any) { + e.preventDefault(); + this.accordionItems.forEach((item) => { + item.display = false; + currentItem.display = true; }); } + + /* tour() */ + /* { */ + /* this.joyride.startTour({ */ + /* steps: ['styleInfo', 'tourInfo', 'checklistCat', */ + /* 'dashContent', 'projectContent', 'codeContent', */ + /* 'checkContent', 'knowledgebaseContent', 'userContent', */ + /* 'labContent', 'trainingContent' */ + /* ], */ + /* showPrevButton: true, */ + /* stepDefaultPosition: 'bottom', */ + /* themeColor: '#000', */ + /* showCounter: false, */ + /* }); */ + /* } */ } From a7e7ef5816b86951a887e078cc8b3bc4641b2892 Mon Sep 17 00:00:00 2001 From: tufgniuz Date: Thu, 15 Sep 2022 11:45:43 +0700 Subject: [PATCH 06/10] Fixed font-sizes with media-queries --- .../pages/dashboard/home/home.component.scss | 27 ++++++++++++++----- 1 file changed, 21 insertions(+), 6 deletions(-) diff --git a/Angular2/src/app/pages/dashboard/home/home.component.scss b/Angular2/src/app/pages/dashboard/home/home.component.scss index 72984cbf5..6274663dc 100644 --- a/Angular2/src/app/pages/dashboard/home/home.component.scss +++ b/Angular2/src/app/pages/dashboard/home/home.component.scss @@ -6,7 +6,7 @@ left: 0; right: 0; height: 100%; - overflow: hidden; + overflow-y: hidden; .accordion { display: flex; @@ -18,13 +18,13 @@ width: 10%; .accordion-action { - // height: 100%; + height: 100%; a { display: flex; justify-content: center; align-items: center; - font-size: 36px; + font-size: 24px; font-weight: 700; writing-mode: vertical-rl; transform: rotate(180deg); @@ -35,18 +35,21 @@ } .accordion-content { + padding-left: 10rem; + padding-right: 6rem; visibility: hidden; .accordion-title { - font-size: 80px; + font-size: 40px; color: #fff; font-weight: 700; margin-bottom: 25px; } .accordion-description { - font-size: 24px; + font-size: 18px; font-weight: 500; + text-align: justify; margin-bottom: 50px; } } @@ -73,7 +76,7 @@ } .btn { - font-size: 18px; + font-size: 1.2rem; color: #fff; background: #101f39; padding-left: 1.5rem; @@ -99,3 +102,15 @@ #checklist { background-color: #263be0; } + +/** MEDIA QERIES **/ + +@media (min-width: 1824px) { + .accordion-title { + font-size: 80px; + } + + .accordion-description { + font-size: 24px; + } +} From d4a3c721a5f156a4538ef0f68f54e65d137b5e69 Mon Sep 17 00:00:00 2001 From: tufgniuz Date: Thu, 15 Sep 2022 14:30:16 +0700 Subject: [PATCH 07/10] Animation added to accordion and removed unused imports in training-profiles --- .../pages/dashboard/home/home.component.scss | 40 +++++++++-- .../profiles/training-profiles.component.html | 66 ++++++++++--------- .../profiles/training-profiles.component.ts | 60 ++++++++--------- Angular2/src/environments/environment.ts | 30 ++++----- 4 files changed, 114 insertions(+), 82 deletions(-) diff --git a/Angular2/src/app/pages/dashboard/home/home.component.scss b/Angular2/src/app/pages/dashboard/home/home.component.scss index 6274663dc..fc57294a0 100644 --- a/Angular2/src/app/pages/dashboard/home/home.component.scss +++ b/Angular2/src/app/pages/dashboard/home/home.component.scss @@ -6,7 +6,7 @@ left: 0; right: 0; height: 100%; - overflow-y: hidden; + overflow: hidden; .accordion { display: flex; @@ -37,7 +37,7 @@ .accordion-content { padding-left: 10rem; padding-right: 6rem; - visibility: hidden; + visibility: none; .accordion-title { font-size: 40px; @@ -61,15 +61,47 @@ flex-direction: column; justify-content: center; align-items: center; - width: 100%; padding: 0 2rem; + animation-name: expand; + animation-duration: 0.8s; + animation-timing-function: linear; + animation-fill-mode: forwards; .accordion-action { display: none; } .accordion-content { - visibility: visible; + animation-name: showContent; + animation-duration: 0.8s; + animation-timing-function: linear; + animation-fill-mode: forwards; + + // .accordion-description { + // display: none; + // } + } + + @keyframes showContent { + 0% { + opacity: 0; + } + 95% { + fill-opacity: 0.1; + } + 100% { + visibility: visible; + opacity: 1; + } + } + + @keyframes expand { + 0% { + width: 10%; + } + 100% { + width: 100%; + } } } } diff --git a/Angular2/src/app/pages/training/profiles/training-profiles.component.html b/Angular2/src/app/pages/training/profiles/training-profiles.component.html index b2c51a3d3..05ff81442 100644 --- a/Angular2/src/app/pages/training/profiles/training-profiles.component.html +++ b/Angular2/src/app/pages/training/profiles/training-profiles.component.html @@ -1,52 +1,54 @@
- +

Loading, Please Wait...

 - - - - - - - - - - - - - - -

Training Profiles

- +
-
+
-
- -
-
-

{{profile.name}}

-

X Courses

-
+
+ +
+
+

{{ profile.name }}

+

X Courses

-
-
-

{{profile.text | slice:0:130}} ...

-
- Explore courses +
+
+
+

{{ profile.text | slice: 0:130 }} ...

-
+ Explore courses +
+
-
+
+ diff --git a/Angular2/src/app/pages/training/profiles/training-profiles.component.ts b/Angular2/src/app/pages/training/profiles/training-profiles.component.ts index 6b9704bbb..7886782cb 100644 --- a/Angular2/src/app/pages/training/profiles/training-profiles.component.ts +++ b/Angular2/src/app/pages/training/profiles/training-profiles.component.ts @@ -1,6 +1,4 @@ import { Component, OnDestroy, OnInit } from '@angular/core'; -/* import { DomSanitizer } from '@angular/platform-browser'; */ -/* import { MatIconRegistry } from '@angular/material/icon'; */ import { Profile } from '../../../core/models/course.model'; import { TrainingService } from '../../../core/services/training.service'; import { Subscription } from 'rxjs'; @@ -8,39 +6,39 @@ import { Router } from '@angular/router'; import { NgxSpinnerService } from 'ngx-spinner'; @Component({ - selector: 'app-training-profiles', - templateUrl: './training-profiles.component.html', - styleUrls: ['./training-profiles.component.scss'] + selector: 'app-training-profiles', + templateUrl: './training-profiles.component.html', + styleUrls: ['./training-profiles.component.scss'], }) export class TrainingProfilesComponent implements OnInit, OnDestroy { - public profiles: Profile[] = []; - private subscriptions: Subscription[] = []; + public profiles: Profile[] = []; + private subscriptions: Subscription[] = []; - constructor( - private trainingService: TrainingService, - private router: Router, - private spinner: NgxSpinnerService, - /* private domSanitizer: DomSanitizer, */ - /* private matIconRegistery: MatIconRegistry */ - ) { } + constructor( + private trainingService: TrainingService, + private router: Router, + private spinner: NgxSpinnerService + ) {} - ngOnInit(): void { - this.spinner.show(); - this.subscriptions.push(this.trainingService.getProfiles().subscribe(profiles => { - this.profiles = profiles; - this.spinner.hide(); - })); - } + ngOnInit(): void { + this.spinner.show(); + this.subscriptions.push( + this.trainingService.getProfiles().subscribe((profiles) => { + this.profiles = profiles; + this.spinner.hide(); + }) + ); + } - onSelectProfile(profile: Profile) { - this.router.navigate(['training', 'profile', profile.id]); - } + onSelectProfile(profile: Profile) { + this.router.navigate(['training', 'profile', profile.id]); + } - ngOnDestroy(): void { - this.subscriptions.forEach(sub => { - if (sub) { - sub.unsubscribe(); - } - }); - } + ngOnDestroy(): void { + this.subscriptions.forEach((sub) => { + if (sub) { + sub.unsubscribe(); + } + }); + } } diff --git a/Angular2/src/environments/environment.ts b/Angular2/src/environments/environment.ts index 1b7f94a33..fb7346b71 100644 --- a/Angular2/src/environments/environment.ts +++ b/Angular2/src/environments/environment.ts @@ -3,29 +3,29 @@ // The list of file replacements can be found in `angular.json`. export const environment = { - production: false, - /* + production: true, + /* This config is about the endpoint where your api is running that is talking to the Angular UI DO NOT CHANGE HTTP TO HTTPS MANUALLY SHOULD BE HANDLED BY DEPLOY SCRIPTS */ - /* API_ENDPOINT: 'http://localhost:8888', */ - API_ENDPOINT: 'https://demo.securityknowledgeframework.org', - AUTH_METHOD: 'skiploginprovider', + /* API_ENDPOINT: 'http://localhost:8888', */ + API_ENDPOINT: 'https://demo.securityknowledgeframework.org', + AUTH_METHOD: 'skiploginprovider', - /* + /* This config is about wether to show the SKF lab deployment options, True || False -> This affects the way the lab page is shown with deployment buttons */ - KUBERNETES_ENABLED: 'True', + KUBERNETES_ENABLED: 'True', - /* + /* config need to be there but is not used - feeling wacky might refactor later */ - KRAKEND_ENDPOINT: '', - OPENID_ISSUER: '', - OPENID_REDIRECT_URI: '', - OPENID_CLIENT_ID: '', - OPENID_RESPONSE_TYPE: '', - OPENID_USE_SILENT_REFRESH: true, - OPENID_SCOPE: '', + KRAKEND_ENDPOINT: '', + OPENID_ISSUER: '', + OPENID_REDIRECT_URI: '', + OPENID_CLIENT_ID: '', + OPENID_RESPONSE_TYPE: '', + OPENID_USE_SILENT_REFRESH: true, + OPENID_SCOPE: '', }; From 8faaeeda1268c24002dbe504dc3b21f2d80ebdab Mon Sep 17 00:00:00 2001 From: tufgniuz Date: Thu, 15 Sep 2022 17:11:06 +0700 Subject: [PATCH 08/10] Fixed console TypeError: undefined in training-profile component --- .../profile/training-profile.component.html | 91 +++++++++++-------- .../profile/training-profile.component.scss | 85 ++++++++--------- 2 files changed, 91 insertions(+), 85 deletions(-) diff --git a/Angular2/src/app/pages/training/profile/training-profile.component.html b/Angular2/src/app/pages/training/profile/training-profile.component.html index 689209ed5..6d7a553d8 100644 --- a/Angular2/src/app/pages/training/profile/training-profile.component.html +++ b/Angular2/src/app/pages/training/profile/training-profile.component.html @@ -1,5 +1,9 @@
- +

Loading, Please Wait...

 @@ -7,10 +11,17 @@
-
    -
  1. Training
    2. -
  2. {{profile?.name}}
    3. -
+
    +
  1. + Training +
    2. +
  2. + {{ profile?.name }} +
    3. +
@@ -20,48 +31,48 @@
-

{{ profile.name }}

+

{{ profile?.name }}

-
-
+
+

{{ course?.name }}

+

-

{{ course.name }}

-

Training -

-

X Chapters

-

Xmin

- - - - -
- - - - - - - - - - - + easy: course.name.includes('Easy'), + competent: course.name.includes('Competent'), + advanced: course.name.includes('Advanced') + }" + > + Training +

+

X Chapters

+

Xmin

+ + + + +
-
+
+ diff --git a/Angular2/src/app/pages/training/profile/training-profile.component.scss b/Angular2/src/app/pages/training/profile/training-profile.component.scss index 20e9d581c..c1f211e39 100644 --- a/Angular2/src/app/pages/training/profile/training-profile.component.scss +++ b/Angular2/src/app/pages/training/profile/training-profile.component.scss @@ -1,62 +1,57 @@ -// li.clickable { -// cursor: pointer; -// } - .shadow { - box-shadow: 0px 4px 20px 5px rgba(0, 0, 0, 0.05); + box-shadow: 0px 4px 20px 5px rgba(0, 0, 0, 0.05); } .border-l1 { - border-left: 3.5px solid #4cc9f0; + border-left: 3.5px solid #4cc9f0; } .border-l2 { - border-left: 3.5px solid #F72585; + border-left: 3.5px solid #f72585; } .border-l3 { - border-left: 3.5px solid #7C5FF4; + border-left: 3.5px solid #7c5ff4; } .box { - border-radius: 7px; - padding: 1em 2em; - - .box-title { - font-weight: 600; - min-width: 242px; - } - - .box-level { - border-radius: 33px; - padding: .3rem 1.3rem; - text-align: center; - text-transform: uppercase; - color: #fff; - } - - .easy { - background-color: #4CC9F0; - } - - .competent { - background-color: #F72585; - } - - .advanced { - background-color: #7C5FF4; - } - - .box-text { - font-weight: 400; - } -} + border-radius: 7px; + padding: 1em 2em; -.btn { + .box-title { font-weight: 600; - - .btn-dark { - background: #101F39; - } + min-width: 242px; + } + + .box-level { + border-radius: 33px; + padding: 0.3rem 1.3rem; + text-align: center; + text-transform: uppercase; + color: #fff; + } + + .easy { + background-color: #4cc9f0; + } + + .competent { + background-color: #f72585; + } + + .advanced { + background-color: #7c5ff4; + } + + .box-text { + font-weight: 400; + } } +.btn { + font-weight: 600; + + .btn-dark { + background: #101f39; + } +} From e524e69409c04e45d5aa82d23fd498cb63693086 Mon Sep 17 00:00:00 2001 From: tufgniuz Date: Thu, 15 Sep 2022 17:36:05 +0700 Subject: [PATCH 09/10] Fixed alignment issues --- .../profile/training-profile.component.html | 18 ++-- .../profile/training-profile.component.scss | 93 ++++++++++--------- 2 files changed, 62 insertions(+), 49 deletions(-) diff --git a/Angular2/src/app/pages/training/profile/training-profile.component.html b/Angular2/src/app/pages/training/profile/training-profile.component.html index 61dbd078a..bf50e5f27 100644 --- a/Angular2/src/app/pages/training/profile/training-profile.component.html +++ b/Angular2/src/app/pages/training/profile/training-profile.component.html @@ -31,17 +31,22 @@
-

{{ profile.name }}

+

{{ profile?.name }}

  • -

    {{ course.name }}

    +

    {{ course.name }}

    + 0 Chapters + 0min diff --git a/Angular2/src/app/pages/training/profile/training-profile.component.scss b/Angular2/src/app/pages/training/profile/training-profile.component.scss index 2c8d0bd12..b64a534a8 100644 --- a/Angular2/src/app/pages/training/profile/training-profile.component.scss +++ b/Angular2/src/app/pages/training/profile/training-profile.component.scss @@ -1,56 +1,63 @@ ul { - list-style: none; + list-style: none; } .course-list { + display: flex; + flex-direction: column; + + .course-list-item { + background-color: #fff; display: flex; - flex-direction: column; - - .course-list-item { - display: flex; - justify-content: space-between; - align-items: center; - border-radius: 10px; - box-shadow: 0px 4px 20px 5px rgba(0, 0, 0, 0.05); - margin-bottom: 1.5rem; - padding: 1.8rem 4.3rem; - font-size: 1rem; - - h1 { - font-size: 1rem; - font-weight: 600; - } - - .label { - text-align: center; - border-radius: 50px; - } - - .label-l1 { - background-color: #4cc9f0; - } - - .label-l2 { - background-color: #F72585; - } - - .label-l3 { - background-color: #7C5FF4; - } + justify-content: space-between; + align-items: center; + border-radius: 10px; + box-shadow: 0px 4px 20px 5px rgba(0, 0, 0, 0.05); + margin-bottom: 1.25rem; + padding: 1.8rem 4.3rem; + font-size: 1rem; + + h1 { + font-size: 1rem; + min-width: 340px; } -} -.border-l1 { - border-left: 3.5px solid #4cc9f0; -} + .label { + text-align: center; + border-radius: 50px; + padding: 0.5rem 2rem; + } -.border-l2 { - border-left: 3.5px solid #F72585; -} + .label-l1 { + background-color: #4cc9f0; + color: #fff; + } + + .label-l2 { + background-color: #f72585; + color: #fff; + } + + .label-l3 { + background-color: #7c5ff4; + color: #fff; + } -.border-l3 { - border-left: 3.5px solid #7C5FF4; + .btn { + font-size: 16px; + min-width: 200px; + } + } } +.border-clr-1 { + border-left: 5px solid #4cc9f0; +} +.border-clr-2 { + border-left: 5px solid #f72585; +} +.border-clr-3 { + border-left: 5px solid #7c5ff4; +} From c53fcc3e198f621fe26f9f1e219c5bda45986025 Mon Sep 17 00:00:00 2001 From: tufgniuz Date: Thu, 15 Sep 2022 23:07:15 +0700 Subject: [PATCH 10/10] Smoother accordion content animation --- .../pages/dashboard/home/home.component.scss | 27 ++++++++++++------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/Angular2/src/app/pages/dashboard/home/home.component.scss b/Angular2/src/app/pages/dashboard/home/home.component.scss index fc57294a0..585337c8b 100644 --- a/Angular2/src/app/pages/dashboard/home/home.component.scss +++ b/Angular2/src/app/pages/dashboard/home/home.component.scss @@ -37,7 +37,7 @@ .accordion-content { padding-left: 10rem; padding-right: 6rem; - visibility: none; + visibility: hidden; .accordion-title { font-size: 40px; @@ -62,8 +62,9 @@ justify-content: center; align-items: center; padding: 0 2rem; + animation-name: expand; - animation-duration: 0.8s; + animation-duration: 0.5s; animation-timing-function: linear; animation-fill-mode: forwards; @@ -73,21 +74,20 @@ .accordion-content { animation-name: showContent; - animation-duration: 0.8s; + animation-duration: 0.5s; animation-timing-function: linear; animation-fill-mode: forwards; - - // .accordion-description { - // display: none; - // } } @keyframes showContent { 0% { opacity: 0; } + 90% { + opacity: 0.1; + } 95% { - fill-opacity: 0.1; + opacity: 0.5; } 100% { visibility: visible; @@ -97,8 +97,17 @@ @keyframes expand { 0% { - width: 10%; + width: 0%; } + 25% { + width: 25%; + } + 50% { + width: 50%; + } + // 75% { + // width: 75%; + // } 100% { width: 100%; }