[bug] Remove scroll from login screen (#1283)

src/app/accounts/login.component.html

@@ -1,96 +1,98 @@
-<div class="login-header">
+<div id="login-page">
-  <a
+  <div class="login-header">
-    href="#"
+    <a
-    appStopClick
+      href="#"
-    (click)="settings()"
+      appStopClick
-    class="environment-urls-settings-icon"
+      (click)="settings()"
-    attr.aria-label="{{ 'settings' | i18n }}"
+      class="environment-urls-settings-icon"
+      attr.aria-label="{{ 'settings' | i18n }}"
+    >
+      <i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
+      {{ "settings" | i18n }}
+    </a>
+  </div>
+  <form
+    id="login-page"
+    #form
+    (ngSubmit)="submit()"
+    [appApiAction]="formPromise"
+    attr.aria-hidden="{{ showingModal }}"
   >
-    <i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
+    <div id="content" class="content">
-    {{ "settings" | i18n }}
+      <img class="logo-image" alt="Bitwarden" />
-  </a>
+      <p class="lead">{{ "loginOrCreateNewAccount" | i18n }}</p>
-</div>
+      <div class="box last">
-<form
+        <div class="box-content">
-  id="login-page"
+          <div class="box-content-row" appBoxRow>
-  #form
+            <label for="email">{{ "emailAddress" | i18n }}</label>
-  (ngSubmit)="submit()"
-  [appApiAction]="formPromise"
-  attr.aria-hidden="{{ showingModal }}"
->
-  <div id="content" class="content">
-    <img class="logo-image" alt="Bitwarden" />
-    <p class="lead">{{ "loginOrCreateNewAccount" | i18n }}</p>
-    <div class="box last">
-      <div class="box-content">
-        <div class="box-content-row" appBoxRow>
-          <label for="email">{{ "emailAddress" | i18n }}</label>
-          <input
-            id="email"
-            type="text"
-            name="Email"
-            [(ngModel)]="email"
-            required
-            appInputVerbatim="false"
-          />
-        </div>
-        <div class="box-content-row box-content-row-flex" appBoxRow>
-          <div class="row-main">
-            <label for="masterPassword">{{ "masterPass" | i18n }}</label>
             <input
-              id="masterPassword"
+              id="email"
-              type="{{ showPassword ? 'text' : 'password' }}"
+              type="text"
-              name="MasterPassword"
+              name="Email"
-              class="monospaced"
+              [(ngModel)]="email"
-              [(ngModel)]="masterPassword"
               required
-              appInputVerbatim
+              appInputVerbatim="false"
             />
           </div>
-          <div class="action-buttons">
+          <div class="box-content-row box-content-row-flex" appBoxRow>
-            <a
+            <div class="row-main">
-              class="row-btn"
+              <label for="masterPassword">{{ "masterPass" | i18n }}</label>
-              href="#"
+              <input
-              appStopClick
+                id="masterPassword"
-              appBlurClick
+                type="{{ showPassword ? 'text' : 'password' }}"
-              role="button"
+                name="MasterPassword"
-              appA11yTitle="{{ 'toggleVisibility' | i18n }}"
+                class="monospaced"
-              (click)="togglePassword()"
+                [(ngModel)]="masterPassword"
-            >
+                required
-              <i
+                appInputVerbatim
-                class="bwi bwi-lg"
+              />
-                aria-hidden="true"
+            </div>
-                [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
+            <div class="action-buttons">
-              ></i>
+              <a
-            </a>
+                class="row-btn"
+                href="#"
+                appStopClick
+                appBlurClick
+                role="button"
+                appA11yTitle="{{ 'toggleVisibility' | i18n }}"
+                (click)="togglePassword()"
+              >
+                <i
+                  class="bwi bwi-lg"
+                  aria-hidden="true"
+                  [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
+                ></i>
+              </a>
+            </div>
+          </div>
+          <div class="box-content-row" [hidden]="!showCaptcha()">
+            <iframe id="hcaptcha_iframe" height="80"></iframe>
           </div>
         </div>
-        <div class="box-content-row" [hidden]="!showCaptcha()">
+      </div>
-          <iframe id="hcaptcha_iframe" height="80"></iframe>
+
+      <div class="buttons with-rows">
+        <div class="buttons-row">
+          <button type="submit" class="btn primary block" [disabled]="form.loading" appBlurClick>
+            <b [hidden]="form.loading"
+              ><i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "logIn" | i18n }}</b
+            >
+            <i class="bwi bwi-spinner bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
+          </button>
+          <a routerLink="/register" class="btn block">
+            <i class="bwi bwi-pencil-square" aria-hidden="true"></i> {{ "createAccount" | i18n }}
+          </a>
+        </div>
+        <div class="buttons-row">
+          <a (click)="launchSsoBrowser('desktop', 'bitwarden://sso-callback')" class="btn block">
+            <i class="bwi bwi-bank" aria-hidden="true"></i> {{ "enterpriseSingleSignOn" | i18n }}
+          </a>
         </div>
       </div>
-    </div>
+      <div class="sub-options">
-
+        <a routerLink="/hint">{{ "getMasterPasswordHint" | i18n }}</a>
-    <div class="buttons with-rows">
-      <div class="buttons-row">
-        <button type="submit" class="btn primary block" [disabled]="form.loading" appBlurClick>
-          <b [hidden]="form.loading"
-            ><i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "logIn" | i18n }}</b
-          >
-          <i class="bwi bwi-spinner bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
-        </button>
-        <a routerLink="/register" class="btn block">
-          <i class="bwi bwi-pencil-square" aria-hidden="true"></i> {{ "createAccount" | i18n }}
-        </a>
-      </div>
-      <div class="buttons-row">
-        <a (click)="launchSsoBrowser('desktop', 'bitwarden://sso-callback')" class="btn block">
-          <i class="bwi bwi-bank" aria-hidden="true"></i> {{ "enterpriseSingleSignOn" | i18n }}
-        </a>
       </div>
     </div>
-    <div class="sub-options">
+  </form>
-      <a routerLink="/hint">{{ "getMasterPasswordHint" | i18n }}</a>
+</div>
-    </div>
-  </div>
-</form>
 <ng-template #environment></ng-template>

src/scss/pages.scss

@@ -139,28 +139,6 @@
   }
 }
 
-.login-header {
-  padding: 1em;
-  font-size: 1.2em;
-  .environment-urls-settings-icon {
-    @include themify($themes) {
-      color: themed("mutedColor");
-    }
-
-    span {
-      visibility: hidden;
-    }
-
-    &:hover,
-    &:focus {
-      text-decoration: none;
-
-      @include themify($themes) {
-        color: themed("primaryColor");
-      }
-    }
-  }
-}
 #sso-page {
   .content {
     width: 300px;
@@ -237,3 +215,31 @@
     margin-bottom: 20px;
   }
 }
+
+#login-page {
+  flex-direction: column;
+
+  .login-header {
+    align-self: flex-start;
+    padding: 1em;
+    font-size: 1.2em;
+    .environment-urls-settings-icon {
+      @include themify($themes) {
+        color: themed("mutedColor");
+      }
+
+      span {
+        visibility: hidden;
+      }
+
+      &:hover,
+      &:focus {
+        text-decoration: none;
+
+        @include themify($themes) {
+          color: themed("primaryColor");
+        }
+      }
+    }
+  }
+}