1 files changed, 67 insertions, 63 deletions
diff --git a/src/views/ChangePassword/ChangePassword.vue b/src/views/ChangePassword/ChangePassword.vue
index e4319303..2440ace1 100644
--- a/src/views/ChangePassword/ChangePassword.vue
+++ b/src/views/ChangePassword/ChangePassword.vue
@@ -1,71 +1,73 @@
 <template>
-  <div class="change-password-container mx-auto ml-md-5 mb-3">
+  <div class="change-password-container">
     <alert variant="danger" class="mb-4">
       <p v-if="changePasswordError">
         {{ $t('pageChangePassword.changePasswordError') }}
       </p>
       <p v-else>{{ $t('pageChangePassword.changePasswordAlertMessage') }}</p>
     </alert>
-    <dl>
-      <dt>{{ $t('pageChangePassword.username') }}</dt>
-      <dd>{{ username }}</dd>
-    </dl>
-    <b-form novalidate @submit.prevent="changePassword">
-      <b-form-group
-        label-for="password"
-        :label="$t('pageChangePassword.newPassword')"
-      >
-        <input-password-toggle>
-          <b-form-input
-            id="password"
-            v-model="form.password"
-            autofocus="autofocus"
-            type="password"
-            :state="getValidationState($v.form.password)"
-            class="form-control-with-button"
-            @change="$v.form.password.$touch()"
-          >
-          </b-form-input>
-          <b-form-invalid-feedback role="alert">
-            <template v-if="!$v.form.password.required">
-              {{ $t('global.form.fieldRequired') }}
-            </template>
-          </b-form-invalid-feedback>
-        </input-password-toggle>
-      </b-form-group>
-      <b-form-group
-        label-for="password-confirm"
-        :label="$t('pageChangePassword.confirmNewPassword')"
-      >
-        <input-password-toggle>
-          <b-form-input
-            id="password-confirm"
-            v-model="form.passwordConfirm"
-            type="password"
-            :state="getValidationState($v.form.passwordConfirm)"
-            class="form-control-with-button"
-            @change="$v.form.passwordConfirm.$touch()"
-          >
-          </b-form-input>
-          <b-form-invalid-feedback role="alert">
-            <template v-if="!$v.form.passwordConfirm.required">
-              {{ $t('global.form.fieldRequired') }}
-            </template>
-            <template v-else-if="!$v.form.passwordConfirm.sameAsPassword">
-              {{ $t('global.form.passwordsDoNotMatch') }}
-            </template>
-          </b-form-invalid-feedback>
-        </input-password-toggle>
-      </b-form-group>
-      <div class="text-right">
-        <b-button type="button" variant="link" @click="goBack">
-          {{ $t('pageChangePassword.goBack') }}
-        </b-button>
-        <b-button type="submit" variant="primary">
-          {{ $t('pageChangePassword.changePassword') }}
-        </b-button>
-      </div>
-    </b-form>
+    <div class="change-password__form-container">
+      <dl>
+        <dt>{{ $t('pageChangePassword.username') }}</dt>
+        <dd>{{ username }}</dd>
+      </dl>
+      <b-form novalidate @submit.prevent="changePassword">
+        <b-form-group
+          label-for="password"
+          :label="$t('pageChangePassword.newPassword')"
+        >
+          <input-password-toggle>
+            <b-form-input
+              id="password"
+              v-model="form.password"
+              autofocus="autofocus"
+              type="password"
+              :state="getValidationState($v.form.password)"
+              class="form-control-with-button"
+              @change="$v.form.password.$touch()"
+            >
+            </b-form-input>
+            <b-form-invalid-feedback role="alert">
+              <template v-if="!$v.form.password.required">
+                {{ $t('global.form.fieldRequired') }}
+              </template>
+            </b-form-invalid-feedback>
+          </input-password-toggle>
+        </b-form-group>
+        <b-form-group
+          label-for="password-confirm"
+          :label="$t('pageChangePassword.confirmNewPassword')"
+        >
+          <input-password-toggle>
+            <b-form-input
+              id="password-confirm"
+              v-model="form.passwordConfirm"
+              type="password"
+              :state="getValidationState($v.form.passwordConfirm)"
+              class="form-control-with-button"
+              @change="$v.form.passwordConfirm.$touch()"
+            >
+            </b-form-input>
+            <b-form-invalid-feedback role="alert">
+              <template v-if="!$v.form.passwordConfirm.required">
+                {{ $t('global.form.fieldRequired') }}
+              </template>
+              <template v-else-if="!$v.form.passwordConfirm.sameAsPassword">
+                {{ $t('global.form.passwordsDoNotMatch') }}
+              </template>
+            </b-form-invalid-feedback>
+          </input-password-toggle>
+        </b-form-group>
+        <div class="text-right">
+          <b-button type="button" variant="link" @click="goBack">
+            {{ $t('pageChangePassword.goBack') }}
+          </b-button>
+          <b-button type="submit" variant="primary">
+            {{ $t('pageChangePassword.changePassword') }}
+          </b-button>
+        </div>
+      </b-form>
+    </div>
   </div>
 </template>
 
@@ -124,7 +126,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.change-password-container {
-  max-width: 360px;
+.change-password__form-container {
+  @include media-breakpoint-up('md') {
+    max-width: 360px;
+  }
 }
 </style>