fix(login): prevent flickering while token is fetched

inosca · Jul 20, 2022 · 56ee970 · 56ee970
1 parent 4e24d1e
commit 56ee970
Show file tree

Hide file tree

Showing 12 changed files with 221 additions and 197 deletions.
diff --git a/addon/components/link-street.hbs b/addon/components/link-street.hbs
@@ -1,7 +1,5 @@
 {{#if this.fetchStreet.isRunning}}
-  <div class="uk-flex uk-flex-center uk-flex-middle uk-margin-large-top">
-    <UkSpinner @ratio={{3}} />
-  </div>
+  <Loading />
 {{else}}
   {{#let @fieldComponent as |Field|}}
     {{#unless @buildingEntrance.street.isNew}}
@@ -74,7 +72,10 @@
     <div class="uk-flex-inline">
       <LinkTo
         class="uk-button
-          {{if @buildingEntrance.street.isNew "uk-button-primary" "uk-button-default"
+          {{if
+            @buildingEntrance.street.isNew
+            'uk-button-primary'
+            'uk-button-default'
           }}"
         @route="building.edit.entrance.edit.link-street"
         @models={{or
@@ -88,9 +89,9 @@
         }}
         @disabled={{not @buildingEntrance.locality.name.nameLong}}
         uk-tooltip="title: {{unless
-            @buildingEntrance.locality.name.nameLong
-            (t "ember-gwr.components.linkStreet.missingLocalityHint")
-          }}; container: {{this.config.modalContainer}}"
+          @buildingEntrance.locality.name.nameLong
+          (t 'ember-gwr.components.linkStreet.missingLocalityHint')
+        }}; container: {{this.config.modalContainer}}"
       >
         {{t
           (if
@@ -102,4 +103,4 @@
       </LinkTo>
     </div>
   {{/let}}
-{{/if}}
+{{/if}}
diff --git a/addon/components/loading.hbs b/addon/components/loading.hbs
@@ -0,0 +1,3 @@
+<div class="uk-flex uk-flex-center uk-flex-middle uk-margin-large-top">
+  <UkSpinner @ratio={{3}} />
+</div>
diff --git a/addon/components/login-modal.hbs b/addon/components/login-modal.hbs
@@ -1,83 +1,88 @@
-{{#if this.authFetch.showAuthModal}}
-  <UkCard
-    @color="default"
-    class="ember-ebau-gwr-login uk-width-2xlarge uk-margin-auto"
-    as |card|
-  >
-    <card.header>
-      <h2 class="uk-modal-title">
-        {{t "ember-gwr.components.loginModal.header"}}
-      </h2>
-    </card.header>
-    <card.body>
-      <div class="uk-grid-small" uk-grid>
-        <div class="uk-width-1-2">
-          <input
-            name="username"
-            class="uk-input"
-            placeholder={{t "ember-gwr.components.loginModal.username"}}
-            aria-label={{t "ember-gwr.components.loginModal.username"}}
-            value={{this.username}}
-            {{on "input" this.updateValue}}
-          />
-        </div>
-        <div class="uk-width-1-2">
-          <input
-            name="password"
-            type="password"
-            class="uk-input"
-            placeholder={{t "ember-gwr.components.loginModal.password"}}
-            aria-label={{t "ember-gwr.components.loginModal.password"}}
-            value={{this.password}}
-            {{on "input" this.updateValue}}
-          />
-        </div>
-        <div class="uk-width-1">
-          <PowerSelect
-            @renderInPlace={{true}}
-            @triggerClass="uk-select"
-            @options={{this.sortedMunicipalities}}
-            @selected={{find-by "id" this.municipality this.municipalities}}
-            @placeholder={{t "ember-gwr.components.loginModal.municipality"}}
-            @searchEnabled={{true}}
-            @searchField="name"
-            @searchPlaceholder={{t
-              "ember-gwr.components.loginModal.municipalitySearch"
-            }}
-            @noMatchesMessage={{t
-              "ember-gwr.components.loginModal.municipalityNoneFound"
-            }}
-            @onChange={{this.updateMunicipality}}
-            as |municipality|
-          >
-            {{municipality.name}}
-          </PowerSelect>
-        </div>
-      </div>
-    </card.body>
-    <card.footer class="uk-text-right">
-      <UkButton
-        @color="primary"
-        @disabled={{not (and this.username this.password this.municipality)}}
-        @loading={{this.authFetch.housingStatToken.isRunning}}
-        @onClick={{this.login}}
-      >
-        {{t "ember-gwr.components.loginModal.login"}}
-      </UkButton>
-    </card.footer>
-  </UkCard>
+{{#if this.authFetch.housingStatToken.isRunning}}
+  <Loading />
 {{else}}
-  <div class="uk-flex uk-flex-middle uk-flex-right">
-    <span class="uk-margin-right">
-      {{t
-        "ember-gwr.components.loginModal.loginInfo"
-        user=this.authFetch.username
-        municipality=(get
-          (find-by "id" this.authFetch.municipality this.municipalities) "name"
-        )
-      }}
-    </span>
-    <Logout />
-  </div>
-  {{yield}}
+  {{#if this.authFetch.showAuthModal}}
+    <UkCard
+      @color="default"
+      class="ember-ebau-gwr-login uk-width-2xlarge uk-margin-auto"
+      as |card|
+    >
+      <card.header>
+        <h2 class="uk-modal-title">
+          {{t "ember-gwr.components.loginModal.header"}}
+        </h2>
+      </card.header>
+      <card.body>
+        <div class="uk-grid-small" uk-grid>
+          <div class="uk-width-1-2">
+            <input
+              name="username"
+              class="uk-input"
+              placeholder={{t "ember-gwr.components.loginModal.username"}}
+              aria-label={{t "ember-gwr.components.loginModal.username"}}
+              value={{this.username}}
+              {{on "input" this.updateValue}}
+            />
+          </div>
+          <div class="uk-width-1-2">
+            <input
+              name="password"
+              type="password"
+              class="uk-input"
+              placeholder={{t "ember-gwr.components.loginModal.password"}}
+              aria-label={{t "ember-gwr.components.loginModal.password"}}
+              value={{this.password}}
+              {{on "input" this.updateValue}}
+            />
+          </div>
+          <div class="uk-width-1">
+            <PowerSelect
+              @renderInPlace={{true}}
+              @triggerClass="uk-select"
+              @options={{this.sortedMunicipalities}}
+              @selected={{find-by "id" this.municipality this.municipalities}}
+              @placeholder={{t "ember-gwr.components.loginModal.municipality"}}
+              @searchEnabled={{true}}
+              @searchField="name"
+              @searchPlaceholder={{t
+                "ember-gwr.components.loginModal.municipalitySearch"
+              }}
+              @noMatchesMessage={{t
+                "ember-gwr.components.loginModal.municipalityNoneFound"
+              }}
+              @onChange={{this.updateMunicipality}}
+              as |municipality|
+            >
+              {{municipality.name}}
+            </PowerSelect>
+          </div>
+        </div>
+      </card.body>
+      <card.footer class="uk-text-right">
+        <UkButton
+          @color="primary"
+          @disabled={{not (and this.username this.password this.municipality)}}
+          @loading={{this.authFetch.housingStatToken.isRunning}}
+          @onClick={{this.login}}
+        >
+          {{t "ember-gwr.components.loginModal.login"}}
+        </UkButton>
+      </card.footer>
+    </UkCard>
+  {{else}}
+    <div class="uk-flex uk-flex-middle uk-flex-right">
+      <span class="uk-margin-right">
+        {{t
+          "ember-gwr.components.loginModal.loginInfo"
+          user=this.authFetch.username
+          municipality=(get
+            (find-by "id" this.authFetch.municipality this.municipalities)
+            "name"
+          )
+        }}
+      </span>
+      <Logout />
+    </div>
+    {{yield}}
+  {{/if}}
 {{/if}}
diff --git a/addon/components/project-nav.hbs b/addon/components/project-nav.hbs
@@ -1,8 +1,6 @@
 <div {{did-insert this.onLoad}} {{did-update this.onLoad}}>
   {{#if this.constructionProject.all.isRunning}}
-    <div class="uk-flex uk-flex-center uk-flex-middle uk-margin-large-top">
-      <UkSpinner @ratio={{3}} />
-    </div>
+    <Loading />
   {{else}}
     {{#if this.displayLandingPage}}
       <ProjectLandingPage />

diff --git a/addon/services/auth-fetch.js b/addon/services/auth-fetch.js
@@ -26,13 +26,6 @@ export default class AuthFetchService extends Service {
 
   @task
   *housingStatToken(username, password, municipality) {
-    if (
-      this.config.username &&
-      this.config.password &&
-      this.config.municipality
-    ) {
-      ({ username, password, municipality } = this.config);
-    }
     const response = yield fetch(`/api/v1/housing-stat-token`, {
       method: "post",
       headers: {

diff --git a/addon/templates/building/edit/dwelling/edit.hbs b/addon/templates/building/edit/dwelling/edit.hbs
@@ -1,8 +1,6 @@
 <div>
   {{#if this.fetchDwelling.isRunning}}
-    <div class="uk-flex uk-flex-center uk-flex-middle uk-margin-large-top">
-      <UkSpinner @ratio={{3}} />
-    </div>
+    <Loading />
   {{else}}
     <ModelForm
       @model={{this.dwelling}}
@@ -37,21 +35,20 @@
 
       <Field
         @attr="floorType"
-        @type="select" @required={{true}}
+        @type="select"
+        @required={{true}}
         @gwrEnumOptions={{this.Models.Dwelling.floorTypeOptions}}
         @hint={{t "ember-gwr.dwelling.floorHint"}}
       />
 
-      {{#if (or
-        (eq changeset.floorType 3101)
-        (eq changeset.floorType 3401)
-        (and this.import this.import.data.floorNumber)
-      )}}
-        <Field
-          @attr="floorNumber"
-          @type="number"
-          @required={{true}}
-        />
+      {{#if
+        (or
+          (eq changeset.floorType 3101)
+          (eq changeset.floorType 3401)
+          (and this.import this.import.data.floorNumber)
+        )
+      }}
+        <Field @attr="floorNumber" @type="number" @required={{true}} />
       {{/if}}
 
       <Field @attr="multipleFloor" @type="checkbox" @required={{true}} />

diff --git a/addon/templates/building/edit/dwellings.hbs b/addon/templates/building/edit/dwellings.hbs
@@ -1,8 +1,6 @@
 <div>
   {{#if this.fetchDwellings.isRunning}}
-    <div class="uk-flex uk-flex-center uk-flex-middle uk-margin-large-top">
-      <UkSpinner @ratio={{3}} />
-    </div>
+    <Loading />
   {{else}}
     <LinkedModels
       @models={{this.fetchDwellings.lastSuccessful.value}}
@@ -25,7 +23,8 @@
           (t
             "ember-gwr.buildingEntrance.title"
             address=model.buildingEntrance.EDID
-          ) " - "
+          )
+          " - "
           model.buildingEntrance.fullAddressText
         }}
       </td>
@@ -50,4 +49,4 @@
       </td>
     </LinkedModels>
   {{/if}}
-</div>
+</div>
diff --git a/addon/templates/building/edit/entrance/edit/index.hbs b/addon/templates/building/edit/entrance/edit/index.hbs
@@ -1,8 +1,6 @@
 <div>
   {{#if this.fetchBuildingEntrance.isRunning}}
-    <div class="uk-flex uk-flex-center uk-flex-middle uk-margin-large-top">
-      <UkSpinner @ratio={{3}} />
-    </div>
+    <Loading />
   {{else}}
     <ModelForm
       @model={{this.buildingEntrance}}
@@ -42,19 +40,16 @@
           @disabled={{not this.buildingEntrance.isNew}}
         />
       {{/unless}}
-      {{!-- API rejects any modification of the buildingEntranceNo or isOfficial
-        fields on building entrances that are not linked to a street. --}}
+      {{! API rejects any modification of the buildingEntranceNo or isOfficial
+        fields on building entrances that are not linked to a street. }}
       <div
         uk-tooltip="title: {{if
-            this.hasNoStreet
-            (t "ember-gwr.buildingEntrance.missingStreetInfo")
-          }}
+          this.hasNoStreet
+          (t 'ember-gwr.buildingEntrance.missingStreetInfo')
+        }}
           ; container: {{this.config.modalContainer}}; pos: top-left"
       >
-        <Field
-          @attr="buildingEntranceNo"
-          @disabled={{this.hasNoStreet}}
-        />
+        <Field @attr="buildingEntranceNo" @disabled={{this.hasNoStreet}} />
         <Field
           @attr="isOfficialAddress"
           @type="checkbox"
@@ -96,4 +91,4 @@
       {{/unless}}
     </ModelForm>
   {{/if}}
-</div>
+</div>
diff --git a/addon/templates/building/edit/entrances.hbs b/addon/templates/building/edit/entrances.hbs
@@ -1,20 +1,18 @@
 <div>
   {{#if this.fetchEntrances.isRunning}}
-    <div class="uk-flex uk-flex-center uk-flex-middle uk-margin-large-top">
-      <UkSpinner @ratio={{3}} />
-    </div>
+    <Loading />
   {{else}}
     <LinkedModels
       @models={{this.entrances}}
       @modelName="entrance"
       @newRoute="building.edit.entrance.new"
-      {{!--
+      {{!
       TODO removing a entrance is not allowed if there is still a dwelling attached to it
       We also cannot remove an entrance if there is only one. This only applies for active
       instances of dwellings and building entrances. Since building entrance deactivation
       is an asynchronous process, we should check the mutation status of deactivated
       building entrances and dwellings, to ensure that the requirements hold.
-      --}}
+      }}
       @removeLink={{if (gt this.entrances.length 1) this.removeEntranceLink}}
       as |model|
     >

diff --git a/addon/templates/building/edit/form.hbs b/addon/templates/building/edit/form.hbs
@@ -12,9 +12,7 @@
 {{/if}}
 <div>
   {{#if (or this.fetchBuildingWork.isRunning this.fetchBuilding.isRunning)}}
-    <div class="uk-flex uk-flex-center uk-flex-middle uk-margin-large-top">
-      <UkSpinner @ratio={{3}} />
-    </div>
+    <Loading />
   {{else}}
     <ModelForm
       @model={{this.buildingWork}}