<file_sep>import { Component, OnInit } from '@angular/core';
import {SecurityService} from '../services/security.service'
@Component({
  selector: 'app-encoder-decoder',
  templateUrl: './encoder-decoder.component.html',
  styleUrls: ['./encoder-decoder.component.css']
})
export class EncoderDecoderComponent implements OnInit {

  constructor(private securityService:SecurityService) { }

  ngOnInit(): void {
    
  }
  word:string;
  encodedWord:string;
  decodedWord:string;
  errorMessage:string;
  loading;
  encoder(){
    this.loading=true;
    this.securityService.encoder(this.word).subscribe((encodedWord)=>{
      this.decodedWord = null;
      this.encodedWord=encodedWord.result;
      this.errorMessage="";
      this.loading=false;
    },
    (error) => {this.errorMessage = error.statusText});
  }

  decoder(){
    this.loading=true;
    this.securityService.decoder(this.word).subscribe((decodedWord)=>{
      this.encodedWord = null;
      this.decodedWord=decodedWord.result;
      console.log(this.decodedWord)
      this.errorMessage="";
      if(this.decodedWord == null){
        this.errorMessage = "String can't be decoded"
      }

      this.loading=false;
    },
    (error) => {this.errorMessage = error.statusText});
  }
}
<file_sep>import { SymmetricComponent } from './symmetric/symmetric.component';
import { AsymmetricComponent } from './asymmetric/asymmetric.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { EncoderDecoderComponent } from './encoder-decoder/encoder-decoder.component';
import { HasherComponent } from './hasher/hasher.component';
import { MainComponent } from './main/main.component';
import { PasswordCrackerComponent } from './password-cracker/password-cracker.component';


const routes: Routes = [
  {path:"encoder-decoder",component:EncoderDecoderComponent},
  {path:"password-cracker",component:PasswordCrackerComponent},
  {path:"hasher",component:HasherComponent},
  {path:"symmetric",component:SymmetricComponent},
  {path:"asymmetric",component:AsymmetricComponent},
  {path:"",component:MainComponent},
  {path:"**",component:MainComponent}

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
<file_sep>import { Component, OnInit } from '@angular/core';
import { SecurityService } from 'src/app/services/security.service';
import { StorageService } from 'src/app/services/storage.service';

@Component({
  selector: 'app-import-from',
  templateUrl: './import-from.component.html',
  styleUrls: ['./import-from.component.css']
})
export class ImportFromComponent implements OnInit {
  fingerprint = '';

  submitted = false;

  success = false;

  errorMessage = '';

  publicKey = '';

  alreadyExists = false;

  constructor(
    private securityService: SecurityService,
    private storageService: StorageService
  ) { }

  ngOnInit(): void {
  }

  onSubmit(): void {
    this.submitted = true;
    this.securityService.importKey(this.fingerprint).subscribe(
      data => {
        this.publicKey=data.public;
        if(this.publicKey!='Bad Fingerprint') {
        this.storageService.importKey(this.fingerprint,this.publicKey);
        }

      },
      error => this.errorMessage=error.message,
      ()=> {this.success=true; this.submitted=false}
    )
  }

  checkFingerprint(fingerprint) {
    this.alreadyExists = this.storageService.publicKeyExists(fingerprint);
  }
}
<file_sep>import { SecurityService } from './../../services/security.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-symmetric-encryption',
  templateUrl: './symmetric-encryption.component.html',
  styleUrls: ['./symmetric-encryption.component.css']
})
export class SymmetricEncryptionComponent implements OnInit {

  message = '';

  algorithms = [
    '3DES', 'CAST5', 'BLOWFISH', 'AES', 'AES192', 'AES256', 'TWOFISH', 'CAMELLIA128', 'CAMELLIA192', 'CAMELLIA256'
  ]

  chosenAlgorithm = '';

  passphrase;

  submitted = false;

  result;

  errorMessage;

  constructor(
    private securityService : SecurityService
  ) { }

  ngOnInit(): void {
  }

  encrypt() : void {
    this.submitted = true;
    this.securityService.symEncrypt(this.message,this.chosenAlgorithm,this.passphrase).subscribe(
      data => {this.submitted=false; this.result=data.result; this.passphrase=data.password.length ? data.password : this.passphrase},
      error => {console.log(error); this.errorMessage=error.message},
    )
  }


}
<file_sep>import { Component, OnInit } from '@angular/core';
import { SecurityService } from 'src/app/services/security.service';
import { StorageService } from 'src/app/services/storage.service';

@Component({
  selector: 'app-import-own',
  templateUrl: './import-own.component.html',
  styleUrls: ['./import-own.component.css']
})
export class ImportOwnComponent implements OnInit {
  submitted = false;

  success = false;

  errorMessage = '';

  publicKey = '';

  fingerprint = '';

  alreadyExists = false;

  constructor(
    private securityService: SecurityService,
    private storageService: StorageService
  ) { }

  ngOnInit(): void {
  }

  onSubmit(): void {
    this.submitted = true;
    this.securityService.importOwnKey(this.publicKey).subscribe(
      data => {
        this.fingerprint=data.fingerprint;
        if(this.fingerprint!='Bad Public Key') {
          this.storageService.importKey(this.fingerprint,this.publicKey);
        }

      },
      error => this.errorMessage=error.message,
      ()=> {this.success=true; this.submitted=false}
    )
  }

}
<file_sep># University Project for [Security Module]

# Frontend

# The tasks: 

![alt text](./1.jpg)
![alt text](./2.jpg)
<file_sep>import { SecurityService } from './../../services/security.service';
import { StorageService } from './../../services/storage.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-asymmetric-encryption',
  templateUrl: './asymmetric-encryption.component.html',
  styleUrls: ['./asymmetric-encryption.component.css']
})
export class AsymmetricEncryptionComponent implements OnInit {

  fingerprint;

  message = '';

  submitted = false;

  success = false;

  errorMessage = '';

  result = '';
  constructor(
    private storageService: StorageService,
    private securityService: SecurityService
  ) { }

  ngOnInit(): void {
  }

  onSubmit(): void {
    this.submitted = true;
    this.securityService.asymEncrypt(this.message,this.storageService.getPublicKey(this.fingerprint)).subscribe(
      data => {
        this.result = data.result;
      },
      error => {this.errorMessage = error.message},
      () => {this.submitted= false; this.success = true;}
    )
  }

  changeFingerprint(fingerprint): void {
    this.fingerprint = this.storageService.publicKeyExists(fingerprint) ? fingerprint : null;
  }
}
<file_sep>import { Component, OnInit } from '@angular/core';
import { SecurityService } from '../services/security.service';

@Component({
  selector: 'app-hasher',
  templateUrl: './hasher.component.html',
  styleUrls: ['./hasher.component.css']
})
export class HasherComponent implements OnInit {
  algorithms = ['md5',
    'sha1',
    'ripemd160',
    'sha256',
    'sha384',
    ];
  constructor(private securityService:SecurityService) { }

  ngOnInit(): void {
  }
  word:string;
  hashedWord:string;
  errorMessage;
  loading;
  algorithm:string="Select Algorithm";
  hasher(){
    this.loading=true;
    this.securityService.hash(this.word,this.algorithm).subscribe((hashedWord)=>{
      this.hashedWord=hashedWord.hash;
      this.loading=false;

    },error => {this.errorMessage = error.message},);
    
  }
}
<file_sep>import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { ImportFromComponent } from './import-from.component';

describe('ImportFromComponent', () => {
  let component: ImportFromComponent;
  let fixture: ComponentFixture<ImportFromComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ ImportFromComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ImportFromComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});
<file_sep>export const environment = {
  production: true,
  baseURL:"https://protect-messages.herokuapp.com/api/security/"
};
<file_sep>import { Component, OnInit } from '@angular/core';
import { StorageService } from './../../services/storage.service';
import { SecurityService } from './../../services/security.service';

@Component({
  selector: 'app-sign',
  templateUrl: './sign.component.html',
  styleUrls: ['./sign.component.css']
})
export class SignComponent implements OnInit {

  fingerprint;

  message = '';

  passphrase = '';

  submitted = false;

  success = false;

  errorMessage = '';

  result = '';
  constructor(
    private storageService: StorageService,
    private securityService: SecurityService
  ) { }

  ngOnInit(): void {
  }

  onSubmit(): void {
    this.submitted = true;
    this.securityService.sign(this.message,this.storageService.getPrivateKey(this.fingerprint),this.passphrase).subscribe(
      data => {
        this.result = data.result;
      },
      error => {this.errorMessage = error.message},
      () => {this.submitted= false; this.success = true;}
    )
  }

  changeFingerprint(fingerprint): void {
    this.fingerprint = this.storageService.privateKeyExists(fingerprint) ? fingerprint : null;
  }
}
<file_sep>import { Component, OnInit } from '@angular/core';
import { SecurityService } from '../services/security.service';

@Component({
  selector: 'app-password-cracker',
  templateUrl: './password-cracker.component.html',
  styleUrls: ['./password-cracker.component.css']
})
export class PasswordCrackerComponent implements OnInit {

  types = ['dictionary',
  'bruteforce',
  'hybrid'];
  algorithms = ['md5',
  'sha1',
  'ripemd160',
  'sha256',
  'sha384',
  ];
  constructor(private securityService:SecurityService) { }

ngOnInit(): void {
}
algorithm:string="Select Algorithm";
password:string;
crackedPassword:string;
attackChoice:string="Select Attack Type";
notfound;
errorMessage;
loading=false;
cracker(){
  this.loading=true;
  this.notfound=false;
  this.securityService.cracker(this.password,this.attackChoice,this.algorithm).subscribe((crackedPassword)=>{
    if(crackedPassword.password=="<PASSWORD>"){
      this.notfound=true;
    }
    else{
      this.notfound=false;
      this.crackedPassword=<PASSWORD>;
    }
    this.loading=false;
  },error => {this.errorMessage = error.message},);

  
}

}
<file_sep>import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { ButtonsModule, WavesModule, CardsModule } from 'angular-bootstrap-md';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { EncoderDecoderComponent } from './encoder-decoder/encoder-decoder.component';
import { HasherComponent } from './hasher/hasher.component';
import { PasswordCrackerComponent } from './password-cracker/password-cracker.component';
import { MainComponent } from './main/main.component';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BadgeModule, IconsModule } from 'angular-bootstrap-md';
import { SymmetricComponent } from './symmetric/symmetric.component';
import { AsymmetricComponent } from './asymmetric/asymmetric.component';
import { SymmetricEncryptionComponent } from './symmetric/symmetric-encryption/symmetric-encryption.component';
import { SymmetricDecryptionComponent } from './symmetric/symmetric-decryption/symmetric-decryption.component';
import { GenKeysComponent } from './asymmetric/gen-keys/gen-keys.component';
import { ListKeysComponent } from './asymmetric/list-keys/list-keys.component';
import { ImportKeysComponent } from './asymmetric/import-keys/import-keys.component';
import { AsymmetricEncryptionComponent } from './asymmetric/asymmetric-encryption/asymmetric-encryption.component';
import { AsymmetricDecryptionComponent } from './asymmetric/asymmetric-decryption/asymmetric-decryption.component';
import { SignComponent } from './asymmetric/sign/sign.component';
import { VerifyComponent } from './asymmetric/verify/verify.component';
import { ImportOwnComponent } from './asymmetric/import-own/import-own.component';
import { ImportFromComponent } from './asymmetric/import-keys/import-from/import-from.component';

@NgModule({
  declarations: [
    AppComponent,
    EncoderDecoderComponent,
    HasherComponent,
    PasswordCrackerComponent,
    MainComponent,
    SymmetricComponent,
    AsymmetricComponent,
    SymmetricEncryptionComponent,
    SymmetricDecryptionComponent,
    GenKeysComponent,
    ListKeysComponent,
    ImportKeysComponent,
    AsymmetricEncryptionComponent,
    AsymmetricDecryptionComponent,
    SignComponent,
    VerifyComponent,
    ImportOwnComponent,
    ImportFromComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MDBBootstrapModule.forRoot(),
    CardsModule,
    WavesModule,
    IconsModule,
    BadgeModule,
    ButtonsModule,
    FormsModule,
    HttpClientModule


  ],
  providers: [HttpClientModule],
  bootstrap: [AppComponent]
})
export class AppModule { }
<file_sep>import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class SecurityService {

  constructor(private http: HttpClient) { }

  routeEndpoint = '';
  encoder(word:string): Observable<any> {
    this.routeEndpoint="base64encode";
    return this.http.post<any>(environment.baseURL + this.routeEndpoint, {message:word})
  }
  decoder(word:string): Observable<any> {
    this.routeEndpoint="base64decode";
    return this.http.post<any>(environment.baseURL + this.routeEndpoint, {message:word})
  }
  hash(word:string,algorithm:string): Observable<any>{
    this.routeEndpoint="hash";
    return this.http.post<any>(environment.baseURL + this.routeEndpoint, {message:word,algorithm:algorithm });

  }

  cracker(hash:string,type:string,algorithm): Observable<any>{
    this.routeEndpoint="crack/"+type;
    return this.http.post<any>(environment.baseURL + this.routeEndpoint, {message:hash,algorithm:algorithm });
  }

  symEncrypt(message: string, algorithm: string, passphrase: string): Observable<any> {
    this.routeEndpoint = 'symetrique/chiffrer';
    return this.http.post<any>(environment.baseURL+this.routeEndpoint,{message : message, algorithm: algorithm, password: <PASSWORD>})
  }

  symDecrypt(message: string, passphrase: string): Observable<any> {
    this.routeEndpoint = 'symetrique/dechiffrer';
    return this.http.post<any>(environment.baseURL+this.routeEndpoint,{encrypted : message, password: <PASSWORD>});
  }

  genKeys(passphrase: string, algorithm: string): Observable<any> {
    this.routeEndpoint = 'asymetrique/genkeys';
    return this.http.post<any>(environment.baseURL + this.routeEndpoint, {passphrase: passphrase, algorithm: algorithm});
  }

  importKey(fingerprint: string): Observable<any> {
    this.routeEndpoint= 'asymetrique/import';
    return this.http.get<any>(environment.baseURL+this.routeEndpoint+'?fingerprint='+fingerprint);
  }

  importOwnKey(publicKey: string): Observable<any> {
    this.routeEndpoint= 'asymetrique/import';
    return this.http.post<any>(environment.baseURL+this.routeEndpoint,{public: publicKey})
  }

  asymEncrypt(message: string, publicKey: string): Observable<any> {
    this.routeEndpoint = 'asymetrique/chiffrer';
    return this.http.post<any>(environment.baseURL+this.routeEndpoint,{message: message, recipient_public_key_data: publicKey});
  }

  asymDecrypt(message: string, privateKey: string, passphrase: string): Observable<any> {
    this.routeEndpoint = 'asymetrique/dechiffrer';
    return this.http.post<any>(environment.baseURL+this.routeEndpoint,{encrypted: message, local_private_key_data: privateKey, passphrase: passphrase})
  }

  sign(message: string, privateKey: string, passphrase: string,): Observable<any> {
    this.routeEndpoint= 'asymetrique/sign';
    return this.http.post<any>(environment.baseURL+this.routeEndpoint,{message: message, passphrase: <PASSWORD>, local_private_key_data: privateKey});
  }

  verify(encrypted: string, signer_public_key: string): Observable<any> {
    this.routeEndpoint = 'asymetrique/verify';
    return this.http.post<any>(environment.baseURL+this.routeEndpoint,{encrypted,signer_public_key});
  }
}
<file_sep>import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class StorageService {

  constructor() {
  }

  saveKeys(fingerprint: string, privateKey: string, publicKey: string): void {
    localStorage.setItem(fingerprint,JSON.stringify(
      {
        'publicKey' : publicKey,
        'privateKey' : privateKey
      }
    ));
    this.addFingerprint(fingerprint);

  }

  private addFingerprint(fingerprint: string) {
    const fingerprints = localStorage.getItem('fingerprints');
    if (!fingerprints) {
      localStorage.setItem('fingerprints',JSON.stringify([fingerprint]));
    }
    else {
      const fingerprintsArray = JSON.parse(fingerprints);
      fingerprintsArray.push(fingerprint);
      localStorage.setItem('fingerprints',
      JSON.stringify(fingerprintsArray
    ));
    }
  }

  getKeys(fingerprint: string) {
    return JSON.parse(localStorage.getItem(fingerprint));
  }

  getFingerPrints() {
    return JSON.parse(localStorage.getItem('fingerprints'));
  }

  importKey(fingerprint:string, publicKey: string) {
    if (localStorage.getItem(fingerprint)==null) {
      localStorage.setItem(fingerprint, JSON.stringify({'publicKey':publicKey}));
      this.addFingerprint(fingerprint);
    }
    else {
      localStorage.setItem(fingerprint, JSON.stringify({'publicKey':publicKey}));
    }

  }

  privateKeyExists(fingerprint: string): boolean {
    const keys = JSON.parse(localStorage.getItem(fingerprint));
    return keys && keys.privateKey ;
  }

  publicKeyExists(fingerprint: string): boolean {
    const keys = JSON.parse(localStorage.getItem(fingerprint));
    return keys && keys.publicKey ;
  }

  getPublicKey(fingerprint: string): string {
    const keys = JSON.parse(localStorage.getItem(fingerprint));
    return keys.publicKey;
  }

  getPrivateKey(fingerprint: string): string {
    return (JSON.parse(localStorage.getItem(fingerprint))).privateKey;
  }

}
<file_sep>import { StorageService } from './../../services/storage.service';
import { SecurityService } from './../../services/security.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-gen-keys',
  templateUrl: './gen-keys.component.html',
  styleUrls: ['./gen-keys.component.css']
})
export class GenKeysComponent implements OnInit {

  passphrase = '';

  algorithms = ['RSA','DSA'];

  chosenAlgorithm = '';

  submitted = false;

  errorMessage;

  privateKey = '';

  publicKey = '';

  fingerPrint = '';

  success = false;

  constructor(
    private securityService: SecurityService,
    private storageService: StorageService
  ) { }

  ngOnInit(): void {
  }

  onSubmit(): void {
    this.submitted = true;
    this.securityService.genKeys(this.passphrase, this.chosenAlgorithm).subscribe(
      data => {
        this.fingerPrint= data.fingerprint;
        this.publicKey = data.public;
        this.privateKey = data.secret;
        this.storageService.saveKeys(this.fingerPrint,this.privateKey,this.publicKey);
      },
      error => this.errorMessage = error.message,
      () => {this.success = true ; this.submitted = false;}
    )
  }

}
<file_sep>import { SecurityService } from './../../services/security.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-symmetric-decryption',
  templateUrl: './symmetric-decryption.component.html',
  styleUrls: ['./symmetric-decryption.component.css']
})
export class SymmetricDecryptionComponent implements OnInit {

  message = '';

  passphrase = '';

  algorithm = '';

  submitted = false;

  result;

  errorMessage;

  constructor(
    private securityService: SecurityService
  ) { }

  ngOnInit(): void {
  }

  decrypt() : void {
    this.submitted = true;
    this.securityService.symDecrypt(this.message,this.passphrase).subscribe(
      data => {this.submitted=false; this.result=data.result;console.log(data); this.algorithm = data.algorithm},
      error => {console.log(error); this.errorMessage=error.message},
    )
  }

}
<file_sep>import { StorageService } from './../../services/storage.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-list-keys',
  templateUrl: './list-keys.component.html',
  styleUrls: ['./list-keys.component.css']
})
export class ListKeysComponent implements OnInit {
  fingerprints : string[];

  chosenFingerprint = '';
  chosenPublicKey = '';
  chosenPrivateKey = '';
  constructor(
    private storageService: StorageService
  ) { }

  ngOnInit(): void {
    this.fingerprints = this.storageService.getFingerPrints();
  }

  setKeyData(fingerprint: string): void {
    const data = this.storageService.getKeys(fingerprint);
    if (data) {
      this.chosenFingerprint=fingerprint;
      this.chosenPrivateKey=data.privateKey;
      this.chosenPublicKey=data.publicKey;
    }
  }

}
