Added badges to the code snippet button

Signed-off-by: the-pro <[email protected]>

data/datacreator.ts

@@ -79,8 +79,7 @@ async function createChallenges () {
  mitigationUrl: showMitigations ? mitigationUrl : null,
  disabledEnv: config.get('challenges.safetyOverride') ? null : effectiveDisabledEnv,
  tutorialOrder: tutorial ? tutorial.order : null,
- findIt: false,
- fixIt: false
+ codingChallengeStatus: 0
  })
  } catch (err) {
  logger.error(`Could not insert Challenge ${name}: ${err.message}`)

frontend/src/app/Models/challenge.model.ts

@@ -18,6 +18,5 @@ export interface Challenge {
  tutorialOrder?: number
  hasTutorial?: boolean
  hasSnippet?: boolean
- findIt?: boolean
- fixIt?: boolean
+ codingChallengeStatus?: number
 }

frontend/src/app/score-board/score-board.component.html

@@ -183,9 +183,15 @@
  (click)="showCodeSnippet(challenge.key,challenge.name)"
  [matTooltip]="('INFO_VULNERABLE_CODE_SNIPPET' | translate)"
  matTooltipPosition="above"
- [class] = "generateClass(challenge)"
+ class='code-snippet-button'
+ [color]="generateColor(challenge)"
+ >
+ <mat-icon
+ [matBadge]="generateBadge(challenge)"
+ matBadgeSize="medium"
+ matBadgePosition="right"
+ matBadgeColor="warn"
  >
- <mat-icon>
  code
  </mat-icon>
  </button>

frontend/src/app/score-board/score-board.component.scss

@@ -84,12 +84,3 @@ mat-table {
  margin-left: 15px;
 }
 
-.dark-green {
- background-color: rgb(104, 159, 56) !important;
- margin-left: 8px;
-}
-
-.green {
- background-color: rgb(98, 126, 74) !important;
- margin-left: 8px;
-}

frontend/src/app/score-board/score-board.component.ts

@@ -365,16 +365,30 @@ export class ScoreBoardComponent implements OnInit {
  dialogRef.afterClosed().subscribe(result => {
  for (const challenge of this.challenges) {
  if (challenge.name === name) {
- if (!challenge.findIt) { challenge.findIt = result.findIt }
- if (!challenge.fixIt) { challenge.fixIt = result.fixIt }
+ if (challenge.codingChallengeStatus < 1) {
+ challenge.codingChallengeStatus = result.findIt ? 1 : challenge.codingChallengeStatus
+ }
+ if (challenge.codingChallengeStatus < 2) {
+ challenge.codingChallengeStatus = result.fixIt ? 2 : challenge.codingChallengeStatus
+ }
  }
  }
  })
  }
 
- generateClass (challenge: Challenge) {
- if (challenge.fixIt) return 'dark-green'
- else if (challenge.findIt) return 'green'
- else return 'code-snippet-button'
+ generateColor (challenge: Challenge) {
+ switch (challenge.codingChallengeStatus) {
+ case 2:
+ return 'accent'
+ case 1:
+ return 'accent'
+ default:
+ return 'primary'
+ }
+ }
+
+ generateBadge (challenge: Challenge) {
+ if (challenge.codingChallengeStatus === 0) return ''
+ return `${challenge.codingChallengeStatus}/2`
  }
 }

models/challenge.ts

@@ -18,8 +18,7 @@ export = (sequelize, { STRING, INTEGER, BOOLEAN, NUMBER }) => {
  solved: BOOLEAN,
  disabledEnv: STRING,
  tutorialOrder: NUMBER,
- findIt: BOOLEAN,
- fixIt: BOOLEAN
+ codingChallengeStatus: NUMBER
  })
  return Challenge
 }

routes/vulnCodeFixes.ts

@@ -77,7 +77,7 @@ export const checkCorrectFix = () => async (req: Request<{}, {}, VerdictRequestB
  }
 
  if (selectedFix === fixData.correct) {
- await models.Challenge.update({ fixIt: true }, { where: { key: key } })
+ await models.Challenge.update({ codingChallengeStatus: 2 }, { where: { key: key } })
  res.status(200).json({
  verdict: true
  })

routes/vulnCodeSnippet.ts

@@ -175,7 +175,7 @@ exports.checkVulnLines = () => async (req: Request<{}, {}, VerdictRequestBody>,
  const selectedLines: number[] = req.body.selectedLines
  const verdict = getVerdict(vulnLines, selectedLines)
  if (verdict) {
- await models.Challenge.update({ findIt: true }, { where: { key: req.body.key } })
+ await models.Challenge.update({ codingChallengeStatus: 1 }, { where: { key: req.body.key } })
  res.status(200).json({
  verdict: true
  })