Attempt to improve gui design

README.md

@@ -110,6 +110,9 @@ License
 This is free software under a 2-clause BSD license. The full text of the license can
 be found in the [LICENSE](LICENSE) file included in this respository.
 
+Images `src/assets/images/person_looking_at_computer.svg` and `src/assets/images/world_connected.svg`
+are taken from <https://undraw.co>, [full license](https://undraw.co/license).
+
 
 [Backend Configuration]:            https://github.com/zonemaster/zonemaster/blob/master/docs/public/configuration/backend.md
 [GUI Configuration]:                https://github.com/zonemaster/zonemaster/blob/master/docs/public/configuration/gui.md

e2e/FR03.e2e-spec.ts

@@ -11,17 +11,17 @@ test.describe('Zonemaster test FR03 - [All appropriate fields should be writable
   test('should be able to write in the main input', async ({ page }) => {
     const testString = 'afnic.fr';
 
-    const domainInput = page.locator('#input_domain_form');
+    const domainInput = page.locator('#input-domain-form');
     await domainInput.type(testString);
     await expect(domainInput).toHaveValue(testString);
 
     await showOptions(page);
 
-    const nsInput = page.locator('input[formControlName="ns"]');
+    const nsInput = page.locator('input[formControlName="ns"]').first();
     await nsInput.type(testString);
     await expect(nsInput).toHaveValue(testString);
 
-    const keytagInput = page.locator('input[formControlName="keytag"]');
+    const keytagInput = page.locator('input[formControlName="keytag"]').first();
     await keytagInput.type(testString);
     await expect(keytagInput).toHaveValue(testString);
   });

e2e/FR05.e2e-spec.ts

@@ -21,15 +21,12 @@ test.describe('Zonemaster test FR05 - [Supports internationalization]', () => {
     test(`should have ${language} language option`, async ({ page }) => {
       const langNavLink = page.locator(`select#languageSelection > option[lang="${code}"]`);
       await expect(langNavLink).toHaveCount(1);
+      await expect(langNavLink).toHaveAttribute('lang', code);
     })
 
     test(`should switch to ${language}`, async ({ page }) => {
       await setLang(page, code);
-      await expect(page.locator('input#input_domain_form')).toHaveAttribute('placeholder', expected);
-
-      const langNavLink = page.locator(`select#languageSelection > option[lang="${code}"]`);
-      await expect(langNavLink).toHaveCount(1);
-      await expect(langNavLink).toHaveAttribute('lang', code);
+      await expect(page.locator('label[for="input-domain-form"]')).toHaveText(expected);
     })
   }
 });

e2e/FR08.e2e-spec.ts

@@ -9,6 +9,6 @@ test.describe('Zonemaster test FR08 - [Presence of a default fallback language -
   });
 
   test('should have a fallback language - English', async ({ page }) => {
-    await expect(page.locator('input#input_domain_form')).toHaveAttribute('placeholder', 'Domain name');
+    await expect(page.locator('label[for="input-domain-form"]')).toHaveText('Domain name');
   });
 });

e2e/FR09.e2e-spec.ts

@@ -9,9 +9,9 @@ test.describe('Zonemaster test FR09 - [Once a language is chosen, all other link
   });
 
   test('should keep french when opening faq page', async ({ page }) => {
-    await expect(page.locator('input#input_domain_form')).toHaveAttribute('placeholder', 'Nom de domaine');
+    await expect(page.locator('label[for="input-domain-form"]')).toHaveText('Nom de domaine');
     await page.locator('a.nav-link[routerlink="/faq"]').click();
-    await expect(page.locator('section.main > div > h1')).toHaveText('FAQ');
+    await expect(page.locator('main h1')).toHaveText('Questions fréquentes');
     await expect(page.locator('a.nav-link[routerlink="/run-test"]')).toHaveText("Lancer un test");
   });
 });

e2e/FR10.e2e-spec.ts

@@ -1,6 +1,6 @@
 const { test, expect } = require('@playwright/test');
 
-import { goToHome, clearBrowserCache } from './utils/app.utils';
+import { goToHome, clearBrowserCache, showOptions } from './utils/app.utils';
 
 test.describe('Zonemaster test FR10 - [On launching the URL opens with a default simple view]', () => {
   test.beforeEach(async ({ page }) => {
@@ -9,21 +9,21 @@ test.describe('Zonemaster test FR10 - [On launching the URL opens with a default
   });
 
   test('should have [Run domain test] label visible', async ({ page }) => {
-    await expect(page.locator('h1', { hasText: 'Run domain test'})).toBeVisible();
+    await expect(page.locator('h1', { hasText: 'Check how your domain is doing'})).toBeVisible();
   });
 
   test('should have [Options] label visible and NOT selected', async ({ page }) => {
-    await expect(page.locator('label', { hasText: 'Options' })).toBeVisible();
+    await expect(page.locator('#advanced-toggle', { hasText: 'Show options' })).toBeVisible();
 
     await expect(page.locator('#advanced-toggle')).toHaveAttribute('aria-expanded', 'false');
   });
 
 
   test('should have [Nameservers label] NOT visible', async ({ page }) => {
-    await expect(page.locator('h4', { hasText: 'Nameservers'})).toBeHidden();
+    await expect(page.locator('legend', { hasText: 'Nameservers'})).toBeHidden();
   });
 
   test('should have [DS records label] NOT visible', async ({ page }) => {
-    await expect(page.locator('h4', { hasText: 'Delegation Signers (DS records)'})).toBeHidden();
+    await expect(page.locator('legend', { hasText: 'DS records'})).toBeHidden();
   });
 });

e2e/FR15.e2e-spec.ts

@@ -10,7 +10,7 @@ test.describe('Zonemaster test FR15 - [The advanced view should look the same in
 
   test('should match the domain page with options on', async ({ page}) => {
     await showOptions(page);
-    // Force wait 0.4s, for the switch animation to finish
+    // Force wait 0.4s, for the button icon animation to finish
     await page.waitForTimeout(400);
     expect(await page.screenshot()).toMatchSnapshot('domain_with_options.png');
   });

e2e/FR16.e2e-spec.ts

@@ -10,10 +10,10 @@ test.describe('Zonemaster test FR16 - [The advanced view should have a text desc
   });
 
   test('should have a link to the proper faq answer', async ({ page }) => {
-    const alert = page.locator('.alert.alert-info');
+    const alert = page.locator('#advanced-options aside .alert');
     await expect(alert).toBeVisible();
     await expect(alert.locator('a')).toHaveAttribute('routerlink', '/faq');
-    await expect(alert.locator('a')).toHaveAttribute('fragment', 'q12');
+    await expect(alert.locator('a')).toHaveAttribute('fragment', 'what-is-an-undelegated-domain-test');
   });
 
   test('should have a description text in multi languages', async ({ page }) => {
@@ -26,7 +26,7 @@ test.describe('Zonemaster test FR16 - [The advanced view should have a text desc
     for (const {lang, text} of testSuite) {
       await setLang(page, lang);
       await showOptions(page);
-      await expect(page.locator('.alert.alert-info a')).toContainText(text);
+      await expect(page.locator('#advanced-options aside .alert a')).toContainText(text);
     }
   });
 });

e2e/FR17.e2e-spec.ts

@@ -14,25 +14,25 @@ test.describe.serial('Zonemaster test FR17 - [Able to specify delegation paramet
   });
 
   test('should have one ns and digest form', async () => {
-    await expect(page.locator('div[formArrayName] .row')).toHaveCount(2);
+    await expect(page.locator('div[formArrayName] fieldset')).toHaveCount(2);
     await expect(page.locator('input[formControlName="keytag"]')).toHaveCount(1);
     await expect(page.locator('input[formControlName="ns"]')).toHaveCount(1);
   });
 
   test('should be possible to add new ns form', async () => {
-    await page.locator('div[formArrayName="nameservers"] .row:first-child .btn.add').click();
+    await page.locator('input[formControlName="ns"]').first().type('test');
     await expect(page.locator('input[formControlName="ns"]')).toHaveCount(2);
     await expect(page.locator('input[formControlName="keytag"]')).toHaveCount(1);
   });
 
   test('should be possible to add new digest form', async () => {
-    await page.locator('div[formArrayName="ds_info"] .row:first-child .btn.add').click();
+    await page.locator('input[formControlName="keytag"]').first().type('1234');
     await expect(page.locator('input[formControlName="ns"]')).toHaveCount(2);
     await expect(page.locator('input[formControlName="keytag"]')).toHaveCount(2);
   });
 
   test('should be possible to delete ns forms', async () => {
-    await page.locator('div[formArrayName="nameservers"] .row:first-child .btn.delete').click();
+    await page.locator('div[formArrayName="nameservers"] fieldset:first-child button.delete').click();
     await expect(page.locator('input[formControlName="ns"]')).toHaveCount(1);
     await expect(page.locator('input[formControlName="keytag"]')).toHaveCount(2);
   });

e2e/FR18.e2e-spec.ts

@@ -10,7 +10,7 @@ test.describe('Zonemaster test FR18 - [The GUI should be able to run tests by ju
 
   test('should display progress bar',  async ({ page }) => {
     await expect(page.locator('.progress-bar')).toBeHidden();
-    await page.locator('#input_domain_form').type('progress.afNiC.Fr');
+    await page.locator('#input-domain-form').type('progress.afNiC.Fr');
     await page.locator('div button.launch').click();
     await expect(page.locator('.progress-bar')).toBeVisible({ timeout: 10000});
   });

e2e/FR19.e2e-spec.ts

@@ -11,7 +11,7 @@ test.describe('Zonemaster test FR19 - [The GUI should be able to run the test wi
 
   test('should NOT display progress bar when we add a NS ip',  async ({ page }) => {
     await expect(page.locator('.progress-bar')).toBeHidden();
-    await page.locator('#input_domain_form').type('progress.afNiC.Fr');
+    await page.locator('#input-domain-form').type('progress.afNiC.Fr');
     await page.locator('input[formControlName="ip"]').type('192.134.4.1');
     await page.locator('div button.launch').click();
 
@@ -28,7 +28,7 @@ test.describe('Zonemaster test FR19 - [The GUI should be able to run the test wi
 
   test('should display progress bar when we add a NS name',  async ({ page }) => {
     await expect(page.locator('.progress-bar')).toBeHidden();
-    await page.locator('#input_domain_form').type('progress.afNiC.Fr');
+    await page.locator('#input-domain-form').type('progress.afNiC.Fr');
     await page.locator('input[formControlName="ns"]').type('ns1.nic.fr');
     await page.locator('div button.launch').click();
     await expect(page.locator('.progress-bar')).toBeVisible({ timeout: 10000 });

e2e/FR20.e2e-spec.ts

@@ -12,13 +12,13 @@ test.describe('Zonemaster test FR20 - [The user must be able to submit one or mo
   test('should display progress bar when we add a DS entry and launch a test',  async ({ page }) => {
     await expect(page.locator('.progress-bar')).toBeHidden();
 
-    await page.locator('#input_domain_form').type('progress.afNiC.Fr');
+    await page.locator('#input-domain-form').type('progress.afNiC.Fr');
 
-    await page.locator('input[formControlName="keytag"]').type('37610');
-    await page.locator('input[formControlName="digest"]').type('d2681e301f632bd76544e6d5b6631a12d97b5479ff07cd24efecd19203c77db3');
+    await page.locator('input[formControlName="keytag"]').first().type('37610');
+    await page.locator('input[formControlName="digest"]').first().type('d2681e301f632bd76544e6d5b6631a12d97b5479ff07cd24efecd19203c77db3');
 
-    await page.locator('select[formControlName="algorithm"]').selectOption({ label: '8 - RSASHA256'});
-    await page.locator('select[formControlName="digtype"]').selectOption({ label: '2 - SHA-256'});
+    await page.locator('select[formControlName="algorithm"]').first().selectOption({ label: '8 - RSASHA256'});
+    await page.locator('select[formControlName="digtype"]').first().selectOption({ label: '2 - SHA-256'});
 
     await page.locator('div button.launch').click();
     await expect(page.locator('.progress-bar')).toBeVisible({ timeout: 10000 });

e2e/FR21.e2e-spec.ts

@@ -18,15 +18,15 @@ test.describe.serial('Zonemaster test FR21 - [Able to provide a summarized resul
 
   test('should display summary',  async () => {
     await expect(page.locator('.progress-bar')).toBeHidden();
-    await page.locator('#input_domain_form').type('results.afNiC.Fr');
+    await page.locator('#input-domain-form').type('results.afNiC.Fr');
     await page.locator('div button.launch').click();
 
-    await expect(page.locator('div.result.container')).toBeVisible({ timeout: 10000 });
+    await expect(page.locator('section.result')).toBeVisible({ timeout: 10000 });
 
-    const messageCountBadges = page.locator('.nav.nav-pills.vertical-align.filter > li > a');
+    const messageCountBadges = page.locator('fieldset.severity-levels label');
     const expectedLabels = ['All', 'Info', 'Notice', 'Warning', 'Error', 'Critical'];
 
-    await expect(messageCountBadges).toHaveCount(6);
+    await expect(messageCountBadges).toHaveCount(expectedLabels.length);
 
     for (const idx in expectedLabels) {
       await expect(messageCountBadges.nth(idx)).toContainText(expectedLabels[idx]);
@@ -35,15 +35,15 @@ test.describe.serial('Zonemaster test FR21 - [Able to provide a summarized resul
 
   test('should display number of each level',  async () => {
     const expectedCounts = ['52', '49', '3', '0', '0', '0'];
-    const messageCountBadges = page.locator('.nav.nav-pills.vertical-align.filter > li > a > span.badge');
+    const messageCountBadges = page.locator('fieldset.severity-levels label span.badge');
 
     for (const idx in expectedCounts) {
       await expect(messageCountBadges.nth(idx)).toHaveText(expectedCounts[idx]);
     }
   });
 
   test('should display summary with good colors',  async () => {
-    const filterButtons = page.locator('.nav.nav-pills.vertical-align.filter > li > a');
+    const filterButtons = page.locator('fieldset.severity-levels input[type="checkbox"]');
 
     for (const idx of [1, 2, 3, 4, 5]) {
       await filterButtons.nth(idx).click();

e2e/FR22.e2e-spec.ts

@@ -13,12 +13,12 @@ test.describe('Zonemaster test FR22 - [Provide the possibility to see more infor
   test('should display full messages',  async({ page }) => {
     await expect(page.locator('.progress-bar')).toBeHidden();
 
-    await page.locator('#input_domain_form').type('results.afNiC.Fr');
-    await page.locator('div button.launch').click();
+    await page.locator('#input-domain-form').type('results.afNiC.Fr');
+    await page.locator('button.launch').click();
 
     // Basic header is the second one
     const basicHeader = page.locator('.result h3').nth(1);
-    const basicTestcases = page.locator('#module-BASIC article');
+    const basicTestcases = page.locator('#module-BASIC section');
 
     // Basic02 header is the second one in the Basic results
     const basic02Header = page.locator('#module-BASIC h4').nth(1);

e2e/FR26.e2e-spec.ts

@@ -10,8 +10,8 @@ test.describe('Zonemaster test FR26 - [Should be able to show a progress bar wit
 
   test('should display progress bar',  async ({ page }) => {
     await expect(page.locator('.progress-bar')).toBeHidden();
-    await page.locator('#input_domain_form').type('progress.afNiC.Fr');
-    await page.locator('div button.launch').click();
+    await page.locator('#input-domain-form').type('progress.afNiC.Fr');
+    await page.locator('button.launch').click();
     await expect(page.locator('.progress-bar')).toBeVisible({ timeout: 10000});
     await expect(page.locator('.progress-value')).toHaveText('50%');
   });

e2e/navigation.e2e-spec.ts

@@ -17,43 +17,43 @@ test.describe('Navigation should be consistent and honor browser behaviour', ()
 
     // Create a new test
     await expect(page).toHaveURL(domainCheckUrl);
-    await page.locator('#input_domain_form').type(firstDomain);
-    await page.locator('div button.launch').click();
+    await page.locator('#input-domain-form').type(firstDomain);
+    await page.locator('button.launch').click();
     // Verify that when the test finishes the browser is redirect to the result page with an url /result/<id1>.
     // The "run domain test" form is visible.
-    await expect(page.locator('.result-header > h2')).toHaveText(firstDomain, { timeout: 10000 });
-    await expect(page.locator('div.result.container')).toBeVisible();
+    await expect(page.locator('section.result h2')).toContainText(firstDomain, { timeout: 10000 });
+    await expect(page.locator('section.result')).toBeVisible();
     await expect(page.locator('form.domain')).toBeVisible();
     await expect(page).toHaveURL(firstTestUrl);
     // Press the back button in the browser.
     await page.goBack()
     // Verify that only the "run domain test" form is displayed. The url should be /run-test.
     await expect(page).toHaveURL(domainCheckUrl);
-    await expect(page.locator('div.result.container')).not.toBeVisible();
+    await expect(page.locator('section.result')).not.toBeVisible();
     await expect(page.locator('form.domain')).toBeVisible();
     // Press the forward button in the browser.
     await page.goForward();
     // Verify that the previous test result is displayed with the url /result/<id1>.
     // The "run domain test" form should still be visible.
-    await expect(page.locator('.result-header > h2')).toHaveText(firstDomain, { timeout: 10000 });
-    await expect(page.locator('div.result.container')).toBeVisible();
+    await expect(page.locator('section.result h2')).toContainText(firstDomain, { timeout: 10000 });
+    await expect(page.locator('section.result')).toBeVisible();
     await expect(page.locator('form.domain')).toBeVisible();
     await expect(page).toHaveURL(firstTestUrl);
     // Create a second test for an other domain from the result page.
-    await page.locator('#input_domain_form').type(secondDomain);
+    await page.locator('#input-domain-form').type(secondDomain);
     await page.locator('div button.launch').click();
     // When the second test finishes the url should change to /result/<id2>.
     // The result for the second test should be displayed and the "run domain test" form should still be visible.
-    await expect(page.locator('.result-header > h2')).toHaveText(secondDomain, { timeout: 10000 });
-    await expect(page.locator('div.result.container')).toBeVisible();
+    await expect(page.locator('section.result h2')).toContainText(secondDomain, { timeout: 10000 });
+    await expect(page.locator('section.result')).toBeVisible();
     await expect(page.locator('form.domain')).toBeVisible();
     await expect(page).toHaveURL(secondTestUrl);
     // Refresh the page.
     await page.reload();
     // The "run domain test" form is not visible, instead a Result header is displayed.
     await expect(page.locator('h1')).toHaveText('Result');
-    await expect(page.locator('div.result.container')).toBeVisible({ timeout: 10000 });
-    await expect(page.locator('.result-header > h2')).toHaveText(secondDomain);
+    await expect(page.locator('section.result')).toBeVisible({ timeout: 10000 });
+    await expect(page.locator('section.result h2')).toContainText(secondDomain);
     await expect(page.locator('form.domain')).not.toBeVisible();
   });
 });

src/app/app.component.css

@@ -3,3 +3,7 @@ app-root {
     display: flex;
     flex-direction: column;
 }
+
+main {
+    flex-grow: 1;
+}

src/app/app.component.html

@@ -1,13 +1,7 @@
 <app-navigation></app-navigation>
+<app-message-banner></app-message-banner>
 <app-alert></app-alert>
-<main>
+<main class="container">
   <router-outlet></router-outlet>
 </main>
 <app-footer></app-footer>
-
-
-
-
-
-
-

src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import {ViewEncapsulation} from '@angular/core';
+import { ViewEncapsulation } from '@angular/core';
 
 @Component({
   selector: 'app-root',
@@ -10,6 +10,4 @@ import {ViewEncapsulation} from '@angular/core';
   encapsulation: ViewEncapsulation.None
 })
 export class AppComponent {
-  title = 'app';
 }
-