Revert "Revert "fixing merge conflicts""

This reverts commit 0199444.

.codeclimate.yml

@@ -0,0 +1,24 @@
+version: "2"
+languages:
+  TypeScript: true
+  JavaScript: true
+plugins:
+  nodesecurity:
+    enabled: true
+  eslint:
+    enabled: true
+  tslint:
+    enabled: true
+    config: tslint.json
+  scss-lint:
+    enabled: true
+ratings:
+  paths:
+  - "**.js"
+  - "**.ts"
+  - "**.css"
+  - "**.scss"
+exclude_paths:
+- "protractor/"
+- ".*"
+- "*config.js"

.scss-lint.yml

@@ -0,0 +1,23 @@
+linters:
+
+  # configuring the linter to best practices
+  DuplicateProperty:
+    ignore_consecutive:
+      - background
+      - transition
+
+  # loosening the linter for the personal styles of our local devs
+  HexNotation:
+    enabled: false
+  StringQuotes:
+    enabled: false
+  ColorKeyword:
+    enabled: false
+  Comment:
+    enabled: false
+  LeadingZero:
+    enabled: false
+  PropertySortOrder:
+    enabled: false
+  ImportPath:
+    enabled: false

README.md

@@ -1,5 +1,11 @@
 # Valkyrie Demo
 
+## running the auto-linter
+
+```
+npm run clean
+```
+
 ## setting up a dev server
 
 Install dependencies:

client/app/app.component.ts

@@ -1,25 +1,23 @@
-import { Component } from '@angular/core';
-import { OnInit } from '@angular/core';
+import { Component } from "@angular/core";
+import { OnInit } from "@angular/core";
 
-import { CryptoService } from './crypto.service';
-import { GraphService } from './graph.service';
-
-var $ = require('jquery');
+import { CryptoService } from "./crypto.service";
+import { GraphService } from "./graph.service";
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
+  selector: "app-root",
+  templateUrl: "./app.component.html",
   styleUrls: [
-    './styles/base.scss',
+    "./styles/base.scss",
   ],
 })
 export class AppComponent implements OnInit {
-  title = 'Callisto'; // only used as an example, not a necessary variable
-  graph = new GraphService();
-  crypto = new CryptoService();
-  // angular lifecycle hooks ref: https://angular.io/guide/lifecycle-hooks
+  public title = "Callisto"; // only used as an example, not a necessary variable
+  public graph = new GraphService();
+  public crypto = new CryptoService();
 
-  ngOnInit() {
+  // angular lifecycle hooks ref: https://angular.io/guide/lifecycle-hooks
+  public ngOnInit() {
     this.graph.generateGraph();
     this.crypto.run();
   }

client/app/app.module.ts

@@ -1,9 +1,8 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-
-import { AppComponent } from './app.component';
-import { FirstStepComponent } from './first-step.component';
+import { NgModule } from "@angular/core";
+import { BrowserModule } from "@angular/platform-browser";
 
+import { AppComponent } from "./app.component";
+import { FirstStepComponent } from "./first-step.component";
 
 @NgModule({
   declarations: [
@@ -17,7 +16,7 @@ import { FirstStepComponent } from './first-step.component';
   bootstrap: [
     AppComponent,
     FirstStepComponent,
-  ]
+  ],
 })
 export class AppModule {
 }

client/app/first-step.component.html

@@ -12,6 +12,6 @@
     <input type="submit" value="submit" />
   </form>
   <p class="subtext">RETURNS: RID USING OPRF</p>
-  <p class='RID-display'>435489THJ2WI3J4290WJPEOIRYT08345U2JTWER8UG934JTWUERGO</p>
+  <p class='rid-display'>435489THJ2WI3J4290WJPEOIRYT08345U2JTWER8UG934JTWUERGO</p>
   <p class="explainer">(Lorem Ipsum) as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
 </section>

client/app/first-step.component.ts

@@ -1,12 +1,11 @@
-import { Component } from '@angular/core';
-
+import { Component } from "@angular/core";
 
 @Component({
-  selector: 'content-root',
-  templateUrl: './first-step.component.html',
+  selector: "content-root",
+  templateUrl: "./first-step.component.html",
   styleUrls: [
-    './styles/base.scss',
-    './styles/step.scss',
+    "./styles/base.scss",
+    "./styles/step.scss",
   ],
 })
 export class FirstStepComponent {

client/app/graph.service.ts

@@ -1,10 +1,10 @@
 // classes ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
 export class GraphService {
 
-  generateGraph() {
-    console.log('graph initialization');
-    console.log('graph initialization');
-    console.log('graph initialization');
+  public generateGraph() {
+    console.log("graph initialization");
+    console.log("graph initialization");
+    console.log("graph initialization");
   }
 
 }

client/app/styles/_meta.scss

@@ -3,10 +3,11 @@
 $font-body: "Montserrat", sans-serif;
 $font-headers: "Playfair Display", serif;
 
+$color-white: #fff;
 $color-dark-blue: #385C6C;
 $color-gray-1: #F1F3F4;
 $color-gray-2: #4F4F4F;
-$color-gray-3: #777777;
+$color-gray-3: #777;
 $color-gray-4: #353E42;
 
 $breakpoint-sm: 768px;

client/app/styles/base.scss

@@ -28,14 +28,14 @@ content-root {
 }
 
 .starter-card {
-  color: white;
+  color: $color-white;
   background-color: $color-gray-4;
   background-image: url("/../assets/headerimage.png");
   background-size: cover;
   padding: 20px 5%;
 
   a {
-    color: white;
+    color: $color-white;
     text-decoration: none;
   }
 

client/app/styles/step.scss

@@ -11,7 +11,7 @@ section {
   }
 }
 
-.RID-display {
+.rid-display {
   color: $color-dark-blue;
   letter-spacing: 2px;
   text-align: center;
@@ -39,21 +39,21 @@ section {
     font-size: 0.85rem;
     letter-spacing: 1px;
     border: 1px solid $color-dark-blue;
-    background-color: white;
+    background-color: $color-white;
     white-space: nowrap;
   }
 
   li:not(:last-child) {
     margin-right: 20px;
   }
 
-  li.activated-step {
-    color: white;
+  .activated-step {
+    color: $color-white;
     background-color: $color-dark-blue;
   }
 }
 
-form.input-row {
+.input-row {
   display: flex;
   align-items: center;
   margin: 40px 0;
@@ -88,7 +88,7 @@ form.input-row {
 
   > [type="submit"] {
     flex: 1;
-    color: white;
+    color: $color-white;
     background-color: $color-dark-blue;
     font-size: 0.85rem;
     letter-spacing: 1px;

client/main.ts

@@ -1,11 +1,10 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { enableProdMode } from "@angular/core";
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
 
-import { AppModule } from './app/app.module';
+import { AppModule } from "./app/app.module";
 
-
-if (process.env.NODE_ENV === 'production') {
+if (process.env.NODE_ENV === "production") {
   enableProdMode();
 }
 platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.log(err));
+  .catch((err) => console.log(err));

client/polyfills.ts

@@ -1,4 +1,4 @@
 // Evergreen browsers require these
-import 'core-js/es7/reflect';
+import "core-js/es7/reflect";
 // Zone JS is required by default for angular itself
-import 'zone.js/dist/zone';
+import "zone.js/dist/zone";

client/vendor.ts

@@ -1,8 +1,8 @@
 // Angular
-import '@angular/platform-browser';
-import '@angular/platform-browser-dynamic';
-import '@angular/core';
-import '@angular/common';
+import "@angular/common";
+import "@angular/core";
+import "@angular/platform-browser";
+import "@angular/platform-browser-dynamic";
 
 // RxJS
-import 'rxjs';
+import "rxjs";