-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #69 from project-callisto/content-and-flow
general frontend implementation
- Loading branch information
Showing
15 changed files
with
172 additions
and
356 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { Component, Input } from "@angular/core"; | ||
|
|
||
| @Component({ | ||
| selector: "step-nav", | ||
| templateUrl: "./templates/nav.component.html", | ||
| styleUrls: [ | ||
| "./styles/base.scss", | ||
| "./styles/nav.scss", | ||
| ], | ||
| }) | ||
| export class NavComponent { | ||
| @Input() public sectionStep: number = 0; | ||
| private maxSteps: number = 6; | ||
| private Array: ArrayConstructor = Array; // angular templates dont have Array by default | ||
|
|
||
| private stepToID(key: number): string { | ||
| return "#" + [ | ||
| "first-step", | ||
| "second-step", | ||
| "third-step", | ||
| "fourth-step", | ||
| "fifth-step", | ||
| "sixth-step", | ||
| ][key]; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| @import "_meta"; | ||
|
|
||
| .step-display { | ||
| list-style: none; | ||
| display: flex; | ||
| justify-content: center; | ||
| margin: 0 0 20px; | ||
| padding: 0; | ||
| } | ||
|
|
||
| a { | ||
| text-transform: uppercase; | ||
| text-decoration: none; | ||
| white-space: nowrap; | ||
| padding: 10px; | ||
| color: $palette-dark-blue; | ||
| background-color: $palette-white; | ||
| font-size: 0.85rem; | ||
| letter-spacing: 1px; | ||
| border: 1px solid $palette-dark-blue; | ||
| } | ||
|
|
||
| .activated-step a { | ||
| color: $palette-white; | ||
| background-color: $palette-dark-blue; | ||
| } | ||
|
|
||
| .activated-step a:hover, | ||
| .activated-step a:active, | ||
| .activated-step a:focus, | ||
| a:hover, | ||
| a:active, | ||
| a:focus { | ||
| color: $palette-dark-blue; | ||
| background-color: $color-step-hover-background; | ||
| border-color: $color-step-hover-border; | ||
| } | ||
|
|
||
| li { | ||
| margin: 15px 0; | ||
| } | ||
|
|
||
| li:not(:last-child) { | ||
| margin-right: 20px; | ||
| } | ||
|
|
||
|
|
||
| .step-explainer { | ||
| @media (max-width: $breakpoint-md) { | ||
| display: none; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,66 +1,25 @@ | ||
| <section *ngIf="shown" id='first-step'> | ||
| <h2 class="main-header text-centered">User Inputs</h2> | ||
| <ul class="step-display"> | ||
| <li class="activated-step"> | ||
| <a href="#first-step"><span class="step-explainer">STEP</span> 1</a> | ||
| </li> | ||
| <li> | ||
| <a href="#second-step"><span class="step-explainer">STEP</span> 2</a> | ||
| </li> | ||
| <li> | ||
| <a href="#third-step"><span class="step-explainer">STEP</span> 3</a> | ||
| </li> | ||
| <li> | ||
| <a href="#fourth-step"><span class="step-explainer">STEP</span> 4</a> | ||
| </li> | ||
| <li> | ||
| <a href="#fifth-step"><span class="step-explainer">STEP</span> 5</a> | ||
| </li> | ||
| <li> | ||
| <a href="#sixth-step"><span class="step-explainer">STEP</span> 6</a> | ||
| </li> | ||
| </ul> | ||
|
|
||
| <article *ngIf="shown" id='first-step'> | ||
| <h2 id='first-step-h2' class="main-header text-centered">User Inputs</h2> | ||
| <step-nav [sectionStep]=1></step-nav> | ||
| <p>Our encryption method uses four key techniques: client-side encryption, oblivious pseudorandom function over an elliptic curve, secure multi-cloud key federation, and linear secret sharing. Our white paper explains these techniques in more detail. This demo focuses on highlighting client-side encryption and linear secret sharing. Data inputs will not be stored.</p> | ||
| <p>To begin, enter a user name and a perpetrator name.</p> | ||
|
|
||
| <form | ||
| class="perp-name-form" | ||
| action="#" | ||
| > | ||
| <p>To begin, enter a user name and a perpetrator name.</p> | ||
|
|
||
| <form class="perp-name-form" action="#"> | ||
| <div class='input-row'> | ||
| <div> | ||
| <span class="subtext">ENTER USER NAME</span> | ||
| <input | ||
| #userInput | ||
| required | ||
| type="text" | ||
| id="userInput" | ||
| /> | ||
| <input #userInput required type="text" id="userInput" /> | ||
| </div> | ||
| <div> | ||
| <span class="subtext">ENTER PERP NAME</span> | ||
| <input | ||
| #perpInput | ||
| required | ||
| type="text" | ||
| id="perpInput" | ||
| /> | ||
| <input #perpInput required type="text" id="perpInput" /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <p class="subtext">K<sub>RECORD</sub>, a randomly generated key to encrypt user name and perp name</p> | ||
| <code class='rid-display calc-display-value calc-display' id="calc-rid">{{ recordKey }}</code> | ||
|
|
||
| <div class="align-right-on-large"> | ||
| <input | ||
| class="btn advance-button" | ||
| value="next" | ||
| type="submit" | ||
| (click)="perpSubmit($event, perpInput.value, userInput.value);" | ||
| /> | ||
| </div> | ||
|
|
||
| </div> | ||
| <p class="subtext">K<sub>RECORD</sub>, a randomly generated key to encrypt user name and perp name</p> | ||
| <code class='calc-display-value' id="calc-rid">{{ recordKey }}</code> | ||
| <div class="align-right-on-large"> | ||
| <input class="btn advance-button" value="next" type="submit" (click)="perpSubmit($event, perpInput.value, userInput.value);" /> | ||
| </div> | ||
| </form> | ||
| </section> | ||
|
|
||
| </article> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,9 @@ | ||
| <section id='first-step'> | ||
| <article id='first-step'> | ||
| <h2 class="main-header text-centered">Introduction</h2> | ||
| <p><a href="https://projectcallisto.org">Callisto</a> is a nonprofit organization that detects serial predators of sexual assault and harassment. We do this by creating a reporting platform that allows victims to submit the identity of their perpetrators into a matching escrow; this information can only be decrypted by a Callisto Options Counselor (a lawyer) if another victim names the same perpetrator. If there is a match, the Options Counselor will decrypt the identity of the serial predator and matched victims, and will reach out to the victims to discuss their options towards pursuing justice. Information about these victims are also protected under attorney-client privilege.</p> | ||
| <p>It is critical that any reporting tool for sexual assault and harassment protects the data of both the victims and the accused. This demo application aims to show the advanced cryptographic techniques that Callisto uses to ensure a safe and trusted reporting experience.</p> | ||
| <p><b>For more details about our cryptography approach, read <a href="#">our technical white paper.</a></b></p> | ||
| <div class="align-right-on-large"> | ||
| <button class="advance-button btn" (click)="advanceStep.emit();">next</button> | ||
| </div> | ||
| </section> | ||
| </article> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| <!-- | ||
| navStep is 0 indexed | ||
| sectionStep is 1 indexed | ||
| stepToID is 0 indexed | ||
| user display is 1 indexed | ||
| --> | ||
| <ul class="step-display"> | ||
| <li | ||
| *ngFor="let navStep of Array.from(Array(maxSteps).keys())" | ||
| [ngClass]="{'activated-step': (navStep + 1)===sectionStep}" | ||
| > | ||
| <a [href]="stepToID(navStep)"><span class="step-explainer">STEP</span> {{navStep + 1}}</a> | ||
| </li> | ||
| </ul> |
Oops, something went wrong.