added comrad welcome

src/app/components/floating-column/add-new-account/add-new-account.component.html

@@ -1,11 +1,18 @@
-<div class="panel">
+<div class="panel" [class.comrad__background]="isComrad">
-    <h3 class="panel__title">Add new account</h3>
+    <h3 class="panel__title" [class.comrad__text]="isComrad">Add new account</h3>
 
+    <h2 class="comrad__title" *ngIf="isComrad">Welcome Comrad!</h2>
     <form (ngSubmit)="onSubmit()">
-        <label>Please provide your account:</label>
+        <label [class.comrad__text]="isComrad">Please provide your <span *ngIf="isComrad">comrad</span> account:</label>
-        <input type="text" class="form-control form-control-sm form-color" [(ngModel)]="mastodonFullHandle" name="mastodonFullHandle"
+        <input type="text" class="form-control form-control-sm form-color" [(ngModel)]="mastodonFullHandle" name="mastodonFullHandle" [class.comrad__input]="isComrad"
             placeholder="@nickname@mastodon.social" />
         <br />
-        <button type="submit" class="btn btn-success btn-sm">Submit</button>
+        <button type="submit" class="btn btn-success btn-sm"  [class.comrad__button]="isComrad">Submit</button>
     </form>
+
+    <div *ngIf="isComrad" class="comrad__video">
+        <iframe width="300" height="170" src="https://www.youtube.com/embed/NzBjnoRG7Mo?feature=oembed&autoplay=1&auto_play=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+
+    </div>
 </div>

src/app/components/floating-column/add-new-account/add-new-account.component.scss

@@ -1,6 +1,11 @@
 @import "variables";
 @import "panel"; 
 
+.panel {
+    
+    background-position: 0 100%;
+}
+
 .form-color {
     background-color: $column-color;
     border-color: $button-border-color;
@@ -11,4 +16,46 @@
     }
     height: 29px;
     padding: 0 5px 0 5px; 
+}
+
+$comrad_yellow: #ffcc00;
+$comrad_red:  #a50000;
+.comrad {
+    &__title {
+        font-size: 18px;
+        margin-left: 5px;
+        color: $comrad_yellow;
+        font-weight: bold;
+    }
+
+    &__text {
+        color: $comrad_yellow;
+    }
+
+    &__button {
+        background: $comrad_yellow;
+        border-color: $comrad_yellow;
+        color: $comrad_red;
+    }
+
+    &__video {
+        width: 300px;  
+        // height: 200px;
+        padding-top: 20px;
+        margin: auto;
+        // outline: 1px solid greenyellow;
+    }
+
+    &__input {
+        color: $comrad_red;
+        border-color: $comrad_yellow;
+        background: $comrad_yellow;
+    }
+
+    &__background {
+        transition: all 3s;
+        background-image: url("assets/img/juche-background.jpg");        
+        background-color: $comrad_red;
+        background-position: 0 0;
+    }
 }

src/app/components/floating-column/add-new-account/add-new-account.component.ts

@@ -14,8 +14,21 @@ import { NotificationService } from '../../../services/notification.service';
 })
 export class AddNewAccountComponent implements OnInit {
     private blockList = ['gab.com', 'gab.ai', 'exited.eu', 'cyzed.com'];
+    private comradList = ['juche.town'];
 
-    @Input() mastodonFullHandle: string;
+    private username: string;
+    private instance: string;
+    isComrad: boolean;
+
+    private _mastodonFullHandle: string;
+    @Input()
+    set mastodonFullHandle(value: string) {
+        this._mastodonFullHandle = value;
+        this.checkComrad();
+    }
+    get mastodonFullHandle(): string {
+        return this._mastodonFullHandle;
+    }
 
     constructor(
         private readonly notificationService: NotificationService,
@@ -25,17 +38,34 @@ export class AddNewAccountComponent implements OnInit {
     ngOnInit() {
     }
 
-    onSubmit(): boolean {
+    checkComrad(): any {
         let fullHandle = this.mastodonFullHandle.split('@').filter(x => x != null && x !== '');
+        this.username = fullHandle[0];
+        this.instance = fullHandle[1];
 
-        const username = fullHandle[0];
+        if (this.username && this.instance) {
-        const instance = fullHandle[1];
+            let cleanInstance = this.instance.replace('http://', '').replace('https://', '').toLowerCase();
+            for (let b of this.comradList) {
+                if (cleanInstance == b || cleanInstance.includes(`.${b}`)) {
+                    this.isComrad = true;
+                    return;
+                }
+            }
+        }
 
-        this.checkBlockList(instance);
+        this.isComrad = false;
+    }
 
-        this.checkAndCreateApplication(instance)
+    onSubmit(): boolean {
+        // let fullHandle = this.mastodonFullHandle.split('@').filter(x => x != null && x !== '');
+        // const username = fullHandle[0];
+        // const instance = fullHandle[1];
+
+        this.checkBlockList(this.instance);
+
+        this.checkAndCreateApplication(this.instance)
             .then((appData: AppData) => {
-                this.redirectToInstanceAuthPage(username, instance, appData);
+                this.redirectToInstanceAuthPage(this.username, this.instance, appData);
             })
             .catch((err: HttpErrorResponse) => {
                 if (err instanceof HttpErrorResponse) {
@@ -50,10 +80,10 @@ export class AddNewAccountComponent implements OnInit {
         return false;
     }
 
-    private checkBlockList(instance: string){
+    private checkBlockList(instance: string) {
         let cleanInstance = instance.replace('http://', '').replace('https://', '').toLowerCase();
         for (let b of this.blockList) {
-            if (cleanInstance == b || cleanInstance.includes(`.${b}`)) {                
+            if (cleanInstance == b || cleanInstance.includes(`.${b}`)) {
                 let content = '<div style="width:100%; height:100%; background-color: black;"><iframe style="pointer-events: none;" width="100%" height="100%" src="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&autoplay=1&showinfo=0&controls=0" allow="autoplay; fullscreen"></div>';
 
                 document.open();