Merge branch 'dev'

Author: zhyale

package-lock.json

@@ -24,6 +24,7 @@
     "@angular/platform-browser-dynamic": "^9.0.4",
     "@angular/router": "^9.0.4",
     "@types/node": "^12.12.27",
+    "angularx-qrcode": "^2.3.5",
     "bcryptjs": "^2.4.3",
     "chart.js": "^2.9.4",
     "classlist.js": "^1.1.20150312",

package.json

@@ -23,6 +23,8 @@ import { HealthCheckComponent } from '../health-check/health-check.component';
 import { VipAppsComponent } from '../vip-apps/vip-apps.component';
 import { VipAppComponent } from '../vip-app/vip-app.component';
 import { RefererComponent } from '../referer/referer.component';
+import { AuthcodeRegisterComponent } from '../authcode-register/authcode-register.component';
+
 
 const routes: Routes = [
   { path: '', redirectTo: '/index.html', pathMatch: 'full' },
@@ -48,7 +50,8 @@ const routes: Routes = [
   { path: 'login', component: LoginFormComponent},
   { path: 'ssh', component: WebsshComponent },
   { path: 'health', component: HealthCheckComponent },
-  { path: 'referring/:app_id/:host', component: RefererComponent }
+  { path: 'referring/:app_id/:host', component: RefererComponent },
+  { path: 'authcode-register', component: AuthcodeRegisterComponent}
 ];
 
 @NgModule({

src/app/app-routing/app-routing.module.ts

@@ -67,6 +67,8 @@ import { HealthCheckComponent } from './health-check/health-check.component';
 import { VipAppsComponent } from './vip-apps/vip-apps.component';
 import { VipAppComponent } from './vip-app/vip-app.component';
 import { RefererComponent } from './referer/referer.component';
+import { QRCodeModule } from 'angularx-qrcode';
+import { AuthcodeRegisterComponent } from './authcode-register/authcode-register.component';
 
 @NgModule({
   exports:[
@@ -136,7 +138,8 @@ export class MaterialModule{}
     HealthCheckComponent,
     VipAppsComponent,
     VipAppComponent,
-    RefererComponent
+    RefererComponent,
+    AuthcodeRegisterComponent
   ],
   imports: [
     MaterialModule,
@@ -145,7 +148,8 @@ export class MaterialModule{}
     FlexLayoutModule,
     FormsModule,
     HttpClientModule,
-    AppRoutingModule
+    AppRoutingModule,
+    QRCodeModule
   ],
   providers: [MessageService, 
     ApplicationService,

src/app/app.module.ts

@@ -171,7 +171,7 @@ export class ApplicationDetailComponent implements OnInit {
 
     // get oauth config
     let self=this;  
-    this.applicationService.getResponseByURL('/janusec-admin/oauth/get',
+    this.applicationService.getResponseByURL('/janusec-admin/oauth/info',
       function(obj: OAuthInfo){
         if(obj != null) self.oauth=obj;
       });

src/app/application-detail/application-detail.component.ts

@@ -20,7 +20,10 @@ export class ApplicationService {
       is_super_admin:false, 
       is_cert_admin:false, 
       is_app_admin:false,
-      need_modify_pwd: false};
+      need_modify_pwd: false,
+      totp_key:"",
+      totp_verified: false
+    };
   certificates: Certificate[] = [];
   applications: Application[] = [];
   vip_apps: VipApp[] = [];

src/app/application.service.ts

@@ -0,0 +1,23 @@
+<div class="container">
+    <h1 i18n="@@authenticator_register">Authenticator Registration</h1>
+    <div i18n="@@authenticator_notice" class="notes">
+        Please scan the following QRCode with Google Authenticator, or Microsoft Authenticator:
+    </div>
+    <qrcode [qrdata]="qrData" [width]="256" [errorCorrectionLevel]="'M'"></qrcode>
+    <div>
+        <span i18n="@@input_key_notice">
+            Or input the Secret Key in your mobile app: 
+        </span>
+        {{ applicationService.auth_user.totp_key }}
+    </div>
+   <br>
+    <mat-form-field>
+        <mat-label i18n="@@input_code_notice">Input 6-digit Code</mat-label>
+        <input matInput [(ngModel)]="code" required>
+    </mat-form-field>
+
+    <section>
+        <button mat-button mat-stroked-button i18n="@@verify" (click)="verify()">Verify and Register</button>
+    </section>
+
+</div>

src/app/authcode-register/authcode-register.component.css

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AuthcodeRegisterComponent } from './authcode-register.component';
+
+describe('AuthcodeRegisterComponent', () => {
+  let component: AuthcodeRegisterComponent;
+  let fixture: ComponentFixture<AuthcodeRegisterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AuthcodeRegisterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AuthcodeRegisterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/authcode-register/authcode-register.component.html

@@ -0,0 +1,33 @@
+import { Component, OnInit } from '@angular/core';
+import { MessageService } from '../message.service';
+import { ApplicationService } from '../application.service';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-authcode-register',
+  templateUrl: './authcode-register.component.html',
+  styleUrls: ['./authcode-register.component.css']
+})
+export class AuthcodeRegisterComponent implements OnInit {
+  qrData: string;
+  code: string;
+
+  constructor(
+      public applicationService: ApplicationService,
+      private messageService: MessageService,
+      private router: Router) { }
+
+  ngOnInit(): void {
+      this.qrData = "otpauth://totp/" + this.applicationService.auth_user.username + "?secret=" + this.applicationService.auth_user.totp_key + "&issuer=JANUSEC";
+  }
+
+  verify() {
+    let body={action:"verify_totp", uid: this.applicationService.auth_user.username, code: this.code}
+    var self = this;
+      this.applicationService.getResponseByCustomBody(body, function() {
+        self.messageService.add('verify ok, please login');
+        self.router.navigate(['/login']);        
+      })
+  }
+
+}