decrease "set and repeat"-password related input fields to half-paged

scm-ui-components/packages/ui-components/src/forms/PasswordConfirmation.js

@@ -1,7 +1,7 @@
 // @flow
 
 import React from "react";
-import {translate} from "react-i18next";
+import { translate } from "react-i18next";
 import InputField from "./InputField";
 
 type State = {
@@ -40,7 +40,8 @@ class PasswordConfirmation extends React.Component<Props, State> {
   render() {
     const { t } = this.props;
     return (
-      <>
+      <div className="columns is-multiline">
+        <div className="column is-half">
           <InputField
             label={t("password.newPassword")}
             type="password"
@@ -50,6 +51,8 @@ class PasswordConfirmation extends React.Component<Props, State> {
             errorMessage={t("password.passwordInvalid")}
             helpText={t("password.passwordHelpText")}
           />
+        </div>
+        <div className="column is-half">
           <InputField
             label={t("password.confirmPassword")}
             type="password"
@@ -59,7 +62,8 @@ class PasswordConfirmation extends React.Component<Props, State> {
             errorMessage={t("password.passwordConfirmFailed")}
             helpText={t("password.passwordConfirmHelpText")}
           />
-      </>
+        </div>
+      </div>
     );
   }
 
@@ -99,7 +103,7 @@ class PasswordConfirmation extends React.Component<Props, State> {
   };
 
   isValid = () => {
-    return this.state.passwordValid && !this.state.passwordConfirmationFailed
+    return this.state.passwordValid && !this.state.passwordConfirmationFailed;
   };
 
   propagateChange = () => {

scm-ui/src/containers/ChangeUserPassword.js

@@ -110,6 +110,8 @@ class ChangeUserPassword extends React.Component<Props, State> {
     return (
       <form onSubmit={this.submit}>
         {message}
+        <div className="columns">
+          <div className="column">
             <InputField
               label={t("password.currentPassword")}
               type="password"
@@ -119,21 +121,31 @@ class ChangeUserPassword extends React.Component<Props, State> {
               value={this.state.oldPassword ? this.state.oldPassword : ""}
               helpText={t("password.currentPasswordHelpText")}
             />
+          </div>
+        </div>
         <PasswordConfirmation
           passwordChanged={this.passwordChanged}
           key={this.state.passwordChanged ? "changed" : "unchanged"}
         />
+        <div className="columns">
+          <div className="column">
             <SubmitButton
               disabled={!this.isValid()}
               loading={loading}
               label={t("password.submit")}
             />
+          </div>
+        </div>
       </form>
     );
   }
 
   passwordChanged = (password: string, passwordValid: boolean) => {
-    this.setState({ ...this.state, password, passwordValid: (!!password && passwordValid) });
+    this.setState({
+      ...this.state,
+      password,
+      passwordValid: !!password && passwordValid
+    });
   };
 
   onClose = () => {

scm-ui/src/users/components/SetUserPassword.js

@@ -105,17 +105,25 @@ class SetUserPassword extends React.Component<Props, State> {
           passwordChanged={this.passwordChanged}
           key={this.state.passwordChanged ? "changed" : "unchanged"}
         />
+        <div className="columns">
+          <div className="column">
             <SubmitButton
               disabled={!this.state.passwordValid}
               loading={loading}
               label={t("singleUserPassword.button")}
             />
+          </div>
+        </div>
       </form>
     );
   }
 
   passwordChanged = (password: string, passwordValid: boolean) => {
-    this.setState({ ...this.state, password, passwordValid: (!!password && passwordValid) });
+    this.setState({
+      ...this.state,
+      password,
+      passwordValid: !!password && passwordValid
+    });
   };
 
   onClose = () => {

scm-ui/src/users/components/UserForm.js

@@ -162,9 +162,9 @@ class UserForm extends React.Component<Props, State> {
               />
             </div>
           </div>
+          {passwordChangeField}
           <div className="columns">
             <div className="column">
-              {passwordChangeField}
               <Checkbox
                 label={t("user.active")}
                 onChange={this.handleActiveChange}