refactor: add terms to config service, css terms improvement, stepper improvement
MODIFY
config.json
config.json
{
- "language": "de",
+ "language": "en",
"supportedLanguages": ["de", "en"],
"endpoint": "https://vagrantguest/pas/apiman",
"hero": {
"url": "https://vagrantguest/pas/keycloak",
"realm": "PAS",
"clientId": "devportal"
+ },
+ "terms": {
+ "enabled": true,
+ "termsLink": "https://www.apache.org/licenses/LICENSE-2.0",
+ "privacyLink": "https://www.apache.org/licenses/LICENSE-2.0"
}
}

MODIFY
src/app/components/marketplace-api-terms/marketplace-api-terms.component.html
src/app/components/marketplace-api-terms/marketplace-api-terms.component.html
+<script src="marketplace-api-terms.component.ts"></script>
<mat-form-field appearance="fill">
<mat-label>Licence Type</mat-label>
<textarea
<mat-card-title>Agreement</mat-card-title>
<mat-card-content>
<p>
- <mat-checkbox color="primary" [(ngModel)]="acceptedTerms" (change)="onClick()"
+ <mat-checkbox
+ color="primary"
+ [(ngModel)]="acceptedTerms"
+ (change)="onClick()"
>I agree to the
- <a [href]="termsLink">terms and conditions</a></mat-checkbox
+ <a [href]="termsLink" class="primary"
+ >terms and conditions</a
+ ></mat-checkbox
>
</p>
<p>
- <mat-checkbox color="primary" [(ngModel)]="acceptedPrivacyTerms" (change)="onClick()"
- >I accept the <a [href]="privacyLink">privacy policy</a></mat-checkbox
+ <mat-checkbox
+ color="primary"
+ [(ngModel)]="acceptedPrivacyTerms"
+ (change)="onClick()"
+ >I accept the
+ <a [href]="privacyLink" class="primary">privacy policy</a></mat-checkbox
>
</p>
</mat-card-content>

MODIFY
src/app/components/marketplace-api-terms/marketplace-api-terms.component.ts
src/app/components/marketplace-api-terms/marketplace-api-terms.component.ts
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { ConfigService } from '../../services/config/config.service';
@Component({
selector: 'app-marketplace-api-terms',
@@ -9,8 +10,8 @@ export class MarketplaceApiTermsComponent implements OnInit {
@Output() agreedTermsAndPrivacy = new EventEmitter<boolean>();
acceptedTerms = false;
acceptedPrivacyTerms = false;
- termsLink = 'https://www.apache.org/licenses/LICENSE-2.0';
- privacyLink = 'https://www.apache.org/licenses/LICENSE-2.0';
+ termsLink: string;
+ privacyLink: string;
terms: string =
'Apache License\n' +
@@ -65,7 +66,10 @@ export class MarketplaceApiTermsComponent implements OnInit {
'\n' +
'END OF TERMS AND CONDITIONS';
- constructor() {}
+ constructor(private configService: ConfigService) {
+ this.termsLink = this.configService.getTerms().termsLink;
+ this.privacyLink = this.configService.getTerms().privacyLink;
+ }
ngOnInit(): void {}

MODIFY
src/app/components/marketplace-signup-stepper/marketplace-signup-stepper.component.html
src/app/components/marketplace-signup-stepper/marketplace-signup-stepper.component.html
<button
mat-raised-button
color="primary"
- (click)="nextStep1(stepper)"
+ matStepperNext
+ (click)="nextAfterClientSelect()"
>
{{ "COMMON.NEXT" | translate }}
</button>
</mat-card>
</mat-step>
<mat-step
+ *ngIf="termsEnabled"
label="{{ 'WIZARD.SECOND_STEP_LABEL' | translate }}"
[completed]="agreedTermsAndPrivacy"
>
mat-raised-button
matStepperNext
color="primary"
- (click)="nextStep2()"
+ (click)="nextAfterTermsAgreed()"
>
{{ "COMMON.NEXT" | translate }}
</button>

MODIFY
src/app/components/marketplace-signup-stepper/marketplace-signup-stepper.component.ts
src/app/components/marketplace-signup-stepper/marketplace-signup-stepper.component.ts
@@ -3,33 +3,28 @@ import { ActivatedRoute } from '@angular/router';
import { HeroService } from '../../services/hero/hero.service';
import { TranslateService } from '@ngx-translate/core';
import { IClientSummary } from '../../interfaces/ICommunication';
-import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
-import { MatStepper } from '@angular/material/stepper';
import { SnackbarService } from '../../services/snackbar/snackbar.service';
-import {SignUpService} from "../../services/sign-up/sign-up.service";
+import { ConfigService } from '../../services/config/config.service';
@Component({
selector: 'app-marketplace-signup-stepper',
templateUrl: './marketplace-signup-stepper.component.html',
styleUrls: ['./marketplace-signup-stepper.component.scss'],
- providers: [
- {
- provide: STEPPER_GLOBAL_OPTIONS,
- useValue: { showError: true },
- },
- ],
})
export class MarketplaceSignupStepperComponent implements OnInit {
selectedClients = new Set<IClientSummary>();
agreedTermsAndPrivacy: boolean | undefined;
+ termsEnabled: boolean;
constructor(
private heroService: HeroService,
private route: ActivatedRoute,
private translator: TranslateService,
private snackbar: SnackbarService,
- private signUpService: SignUpService
- ) {}
+ private configService: ConfigService
+ ) {
+ this.termsEnabled = this.configService.getTerms().enabled;
+ }
ngOnInit(): void {
this.setUpHero();
@@ -49,16 +44,15 @@ export class MarketplaceSignupStepperComponent implements OnInit {
this.agreedTermsAndPrivacy = $event;
}
- nextStep1(stepper: MatStepper) {
+ nextAfterClientSelect() {
if (this.selectedClients.size == 0) {
this.snackbar.showErrorSnackBar(
this.translator.instant('WIZARD.APPLICATION_ERROR')
);
}
- stepper.next();
}
- nextStep2() {
+ nextAfterTermsAgreed() {
if (!this.agreedTermsAndPrivacy)
this.snackbar.showErrorSnackBar(
this.translator.instant('WIZARD.TERMS_ERROR')

MODIFY
src/app/interfaces/IConfig.ts
src/app/interfaces/IConfig.ts
@@ -6,6 +6,7 @@ export interface IConfig {
navigation: INavigation;
footer: IFooter;
auth: IAuthProvider;
+ terms: ITerms;
}
export interface IHero {
@@ -41,3 +42,9 @@ export interface IAuthProvider {
realm: string;
clientId: string;
}
+
+export interface ITerms {
+ enabled: boolean;
+ termsLink: string;
+ privacyLink: string;
+}

MODIFY
src/app/services/config/config.service.ts
src/app/services/config/config.service.ts
@@ -6,6 +6,7 @@ import {
IFooter,
IHero,
INavigation,
+ ITerms,
} from '../../interfaces/IConfig';
@Injectable({
@@ -50,4 +51,8 @@ export class ConfigService {
getAuth(): IAuthProvider {
return { ...this.config.auth };
}
+
+ getTerms(): ITerms {
+ return { ...this.config.terms };
+ }
}

refactor: add terms to config service, css terms improvement, stepper improvement