From 8ed41de81525139b5d15d881bd4d8240a11eac2f Mon Sep 17 00:00:00 2001
From: LP B <xAt0mZ@users.noreply.github.com>
Date: Thu, 16 Jun 2022 21:25:37 +0200
Subject: [PATCH] fix(app/account): create access token button (#7014)

* fix(api): remove unused leftover imports

* fix(app/account): create access token button

* fix(app/formcontrol): error message overlapping input on smaller screens
---
 .../FormControl/FormControl.tsx               | 31 ++++++++++---------
 .../CreateAccessToken/CreateAccessToken.tsx   |  2 +-
 .../views/account/accountController.js        |  2 +-
 3 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/app/portainer/components/form-components/FormControl/FormControl.tsx b/app/portainer/components/form-components/FormControl/FormControl.tsx
index bef282398..ca46ec3f4 100644
--- a/app/portainer/components/form-components/FormControl/FormControl.tsx
+++ b/app/portainer/components/form-components/FormControl/FormControl.tsx
@@ -29,26 +29,29 @@ export function FormControl({
   required,
 }: PropsWithChildren<Props>) {
   return (
-    <div className={clsx('form-group', styles.container)}>
-      <label
-        htmlFor={inputId}
-        className={clsx(sizeClassLabel(size), 'control-label', 'text-left')}
-      >
-        {label}
+    <>
+      <div className={clsx('form-group', styles.container)}>
+        <label
+          htmlFor={inputId}
+          className={clsx(sizeClassLabel(size), 'control-label', 'text-left')}
+        >
+          {label}
 
-        {required && <span className="text-danger">*</span>}
+          {required && <span className="text-danger">*</span>}
 
-        {tooltip && <Tooltip message={tooltip} />}
-      </label>
-
-      <div className={sizeClassChildren(size)}>{children}</div>
+          {tooltip && <Tooltip message={tooltip} />}
+        </label>
 
+        <div className={sizeClassChildren(size)}>{children}</div>
+      </div>
       {errors && (
-        <div className="col-md-12">
-          <FormError>{errors}</FormError>
+        <div className="form-group">
+          <div className="col-md-12">
+            <FormError>{errors}</FormError>
+          </div>
         </div>
       )}
-    </div>
+    </>
   );
 }
 
diff --git a/app/portainer/views/account/CreateAccessToken/CreateAccessToken.tsx b/app/portainer/views/account/CreateAccessToken/CreateAccessToken.tsx
index a1cc65668..0d84153c6 100644
--- a/app/portainer/views/account/CreateAccessToken/CreateAccessToken.tsx
+++ b/app/portainer/views/account/CreateAccessToken/CreateAccessToken.tsx
@@ -61,7 +61,7 @@ export function CreateAccessToken({
   return (
     <Widget>
       <WidgetBody>
-        <div>
+        <div className="form-horizontal">
           <FormControl
             inputId="input"
             label={t('Description')}
diff --git a/app/portainer/views/account/accountController.js b/app/portainer/views/account/accountController.js
index 5c5c55407..9032abe9d 100644
--- a/app/portainer/views/account/accountController.js
+++ b/app/portainer/views/account/accountController.js
@@ -48,7 +48,7 @@ angular.module('portainer.app').controller('AccountController', [
     };
 
     this.uiCanExit = (newTransition) => {
-      if ($scope.userRole === 1 && newTransition.to().name === 'portainer.settings.authentication') {
+      if ($scope.userRole === 1 && newTransition && newTransition.to().name === 'portainer.settings.authentication') {
         return true;
       }
       if (newTransition.to().name === 'portainer.logout') {