Replace less with scss, add homepage widgets, add registrars selector and registrars page (#2114)

* Replace less compiler with scss

* Replace less with scss, add homepage widgets, add registrars selector and registrars page

console-webapp/src/app/settings/contact/contact.component.html

@@ -2,6 +2,15 @@
   <mat-progress-bar mode="indeterminate"></mat-progress-bar>
 </div>
 <div *ngIf="!loading">
+  <div
+    class="contact__empty-contacts"
+    *ngIf="contactService.contacts.length === 0"
+  >
+    <mat-icon class="contact__empty-contacts-icon secondary-text"
+      >apps_outage</mat-icon
+    >
+    <h1>No contacts found</h1>
+  </div>
   <div *ngFor="let group of groupedData">
     <div class="contact__cards-wrapper" *ngIf="group.contacts.length">
       <h3>{{ group.label }}s</h3>

console-webapp/src/app/settings/contact/contact.component.scss

@@ -37,6 +37,18 @@
     justify-content: flex-start;
     margin: 2rem 0;
   }
+  &__empty-contacts {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
+  &__empty-contacts-icon {
+    width: 4rem;
+    height: 4rem;
+    font-size: 4rem;
+    margin-top: 1.5rem;
+  }
 }
 .contact-details {
   &__input {

console-webapp/src/app/settings/contact/contact.component.ts

@@ -77,7 +77,7 @@ class ContactDetailsEventsResponder {
 @Component({
   selector: 'app-contact-details-dialog',
   templateUrl: 'contact-details.component.html',
-  styleUrls: ['./contact.component.less'],
+  styleUrls: ['./contact.component.scss'],
 })
 export class ContactDetailsDialogComponent {
   contact: Contact;
@@ -140,7 +140,7 @@ export class ContactDetailsDialogComponent {
 @Component({
   selector: 'app-contact',
   templateUrl: './contact.component.html',
-  styleUrls: ['./contact.component.less'],
+  styleUrls: ['./contact.component.scss'],
 })
 export default class ContactComponent {
   loading: boolean = false;
@@ -158,7 +158,7 @@ export default class ContactComponent {
   }
 
   public get groupedData() {
-    return this.contactService.contacts.reduce((acc, contact) => {
+    return this.contactService.contacts?.reduce((acc, contact) => {
       contact.types.forEach((type) => {
         acc
           .find((group: GroupedContacts) => group.value === type)

console-webapp/src/app/settings/registrars/registrars.component.html

@@ -1 +0,0 @@
-<p>registrars component works!</p>

console-webapp/src/app/settings/registrars/registrars.component.spec.ts

@@ -1,36 +0,0 @@
-// Copyright 2023 The Nomulus Authors. All Rights Reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//     http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import RegistrarsComponent from './registrars.component';
-
-describe('RegistrarsComponent', () => {
-  let component: RegistrarsComponent;
-  let fixture: ComponentFixture<RegistrarsComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [RegistrarsComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(RegistrarsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

console-webapp/src/app/settings/registrars/registrars.component.ts

@@ -1,22 +0,0 @@
-// Copyright 2023 The Nomulus Authors. All Rights Reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//     http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-registrars',
-  templateUrl: './registrars.component.html',
-  styleUrls: ['./registrars.component.less'],
-})
-export default class RegistrarsComponent {}

console-webapp/src/app/settings/security/security.component.ts

@@ -20,7 +20,7 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 @Component({
   selector: 'app-security',
   templateUrl: './security.component.html',
-  styleUrls: ['./security.component.less'],
+  styleUrls: ['./security.component.scss'],
   providers: [SecurityService],
 })
 export default class SecurityComponent {

console-webapp/src/app/settings/settings.component.ts

@@ -17,7 +17,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
 @Component({
   selector: 'app-settings',
   templateUrl: './settings.component.html',
-  styleUrls: ['./settings.component.less'],
+  styleUrls: ['./settings.component.scss'],
   encapsulation: ViewEncapsulation.None,
 })
 export class SettingsComponent {}

console-webapp/src/app/settings/users/users.component.ts

@@ -17,6 +17,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-users',
   templateUrl: './users.component.html',
-  styleUrls: ['./users.component.less'],
+  styleUrls: ['./users.component.scss'],
 })
 export default class UsersComponent {}

console-webapp/src/app/settings/whois/whois.component.less

@@ -1,13 +0,0 @@
-// Copyright 2023 The Nomulus Authors. All Rights Reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//     http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.

console-webapp/src/app/settings/whois/whois.component.ts

@@ -17,6 +17,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-whois',
   templateUrl: './whois.component.html',
-  styleUrls: ['./whois.component.less'],
+  styleUrls: ['./whois.component.scss'],
 })
 export default class WhoisComponent {}