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,26 +40,30 @@ class PasswordConfirmation extends React.Component<Props, State> {
   render() {
     const { t } = this.props;
     return (
-      <>
-        <InputField
-          label={t("password.newPassword")}
-          type="password"
-          onChange={this.handlePasswordChange}
-          value={this.state.password ? this.state.password : ""}
-          validationError={!this.state.passwordValid}
-          errorMessage={t("password.passwordInvalid")}
-          helpText={t("password.passwordHelpText")}
-        />
-        <InputField
-          label={t("password.confirmPassword")}
-          type="password"
-          onChange={this.handlePasswordValidationChange}
-          value={this.state ? this.state.confirmedPassword : ""}
-          validationError={this.state.passwordConfirmationFailed}
-          errorMessage={t("password.passwordConfirmFailed")}
-          helpText={t("password.passwordConfirmHelpText")}
-        />
-      </>
+      <div className="columns is-multiline">
+        <div className="column is-half">
+          <InputField
+            label={t("password.newPassword")}
+            type="password"
+            onChange={this.handlePasswordChange}
+            value={this.state.password ? this.state.password : ""}
+            validationError={!this.state.passwordValid}
+            errorMessage={t("password.passwordInvalid")}
+            helpText={t("password.passwordHelpText")}
+          />
+        </div>
+        <div className="column is-half">
+          <InputField
+            label={t("password.confirmPassword")}
+            type="password"
+            onChange={this.handlePasswordValidationChange}
+            value={this.state ? this.state.confirmedPassword : ""}
+            validationError={this.state.passwordConfirmationFailed}
+            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,30 +110,42 @@ class ChangeUserPassword extends React.Component<Props, State> {
     return (
       <form onSubmit={this.submit}>
         {message}
-        <InputField
-          label={t("password.currentPassword")}
-          type="password"
-          onChange={oldPassword =>
-            this.setState({ ...this.state, oldPassword })
-          }
-          value={this.state.oldPassword ? this.state.oldPassword : ""}
-          helpText={t("password.currentPasswordHelpText")}
-        />
+        <div className="columns">
+          <div className="column">
+            <InputField
+              label={t("password.currentPassword")}
+              type="password"
+              onChange={oldPassword =>
+                this.setState({ ...this.state, oldPassword })
+              }
+              value={this.state.oldPassword ? this.state.oldPassword : ""}
+              helpText={t("password.currentPasswordHelpText")}
+            />
+          </div>
+        </div>
         <PasswordConfirmation
           passwordChanged={this.passwordChanged}
           key={this.state.passwordChanged ? "changed" : "unchanged"}
         />
-        <SubmitButton
-          disabled={!this.isValid()}
-          loading={loading}
-          label={t("password.submit")}
-        />
+        <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"}
         />
-        <SubmitButton
-          disabled={!this.state.passwordValid}
-          loading={loading}
-          label={t("singleUserPassword.button")}
-        />
+        <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}