fix(login): chrome prefill, org register suffix offset, loginname overflow (#1292)

* fix: calculate offset, fix prefill

* fix loginname, displayname overflow

internal/ui/login/static/resources/scripts/form_submit.js

@@ -6,6 +6,8 @@ function disableSubmit(checks, button) {
     }
     addRequiredEventListener(inputs, checks, form, button);
     disableDoubleSubmit(form, button);
+
+    toggleButton(checks, form, inputs, button);
 }
 
 function addRequiredEventListener(inputs, checks, form, button) {

internal/ui/login/static/resources/scripts/loginname_suffix.js

@@ -10,6 +10,8 @@ function RenderDefaultLoginnameSuffix() {
     } else {
         defaultLoginNameSuffix.innerText = "";
     }
+
+    offsetLabel();
 }
 
 window.addEventListener('DOMContentLoaded', (event) => {
@@ -19,3 +21,18 @@ window.addEventListener('DOMContentLoaded', (event) => {
 document.getElementById("orgname").addEventListener('input', function () {
     RenderDefaultLoginnameSuffix();
 });
+
+function offsetLabel() {
+    const suffix = document.getElementById('default-login-suffix');
+    const suffixInput = document.getElementsByClassName('lgn-suffix-input')[0];
+
+    calculateOffset();
+    suffix.addEventListener("DOMCharacterDataModified", calculateOffset);
+
+    function calculateOffset() {
+        // add suffix width to inner right padding of the input field
+        if (suffix && suffixInput) {
+            suffixInput.style.paddingRight = `${(suffix.offsetWidth ?? 0) + 10}px`;
+        }
+    }
+}

internal/ui/login/static/resources/themes/scss/styles/account_selection/account_selection.scss

@@ -21,16 +21,21 @@ $lgn-container-margin: 0px auto 50px auto;
             display: block;
             margin: .5rem; 
             text-align: start;
+            overflow: hidden;
 
             .lgn-displayname{
                 font-size: 16px;
                 margin: .5rem 0;
                 margin-bottom: 0;
+                text-overflow: ellipsis;
+                overflow: hidden;
             }
 
             .lgn-loginname{
                 font-size: 14px;
                 margin: 0;
+                text-overflow: ellipsis;
+                overflow: hidden;
             }
 
             .lgn-session-state {

internal/ui/login/static/resources/themes/zitadel/css/bundle.css

@@ -448,15 +448,20 @@ i {
   display: block;
   margin: 0.5rem;
   text-align: start;
+  overflow: hidden;
 }
 .lgn-account-selection .lgn-account .lgn-names .lgn-displayname {
   font-size: 16px;
   margin: 0.5rem 0;
   margin-bottom: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 .lgn-account-selection .lgn-account .lgn-names .lgn-loginname {
   font-size: 14px;
   margin: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 .lgn-account-selection .lgn-account .lgn-names .lgn-session-state {
   margin: 0;
@@ -1301,15 +1306,20 @@ i {
   display: block;
   margin: 0.5rem;
   text-align: start;
+  overflow: hidden;
 }
 .lgn-account-selection .lgn-account .lgn-names .lgn-displayname {
   font-size: 16px;
   margin: 0.5rem 0;
   margin-bottom: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 .lgn-account-selection .lgn-account .lgn-names .lgn-loginname {
   font-size: 14px;
   margin: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 .lgn-account-selection .lgn-account .lgn-names .lgn-session-state {
   margin: 0;

internal/ui/login/static/resources/themes/zitadel/css/zitadel.css

@@ -448,15 +448,20 @@ i {
   display: block;
   margin: 0.5rem;
   text-align: start;
+  overflow: hidden;
 }
 .lgn-account-selection .lgn-account .lgn-names .lgn-displayname {
   font-size: 16px;
   margin: 0.5rem 0;
   margin-bottom: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 .lgn-account-selection .lgn-account .lgn-names .lgn-loginname {
   font-size: 14px;
   margin: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 .lgn-account-selection .lgn-account .lgn-names .lgn-session-state {
   margin: 0;

pkg/grpc/auth/mock/auth.proto.mock.go

@@ -636,6 +636,26 @@ func (mr *MockAuthServiceClientMockRecorder) SearchMyUserGrant(arg0, arg1 interf
 	return mr.mock.ctrl.RecordCallWithMethodType(mr.mock, "SearchMyUserGrant", reflect.TypeOf((*MockAuthServiceClient)(nil).SearchMyUserGrant), varargs...)
 }
 
+// SearchMyUserMemberships mocks base method
+func (m *MockAuthServiceClient) SearchMyUserMemberships(arg0 context.Context, arg1 *auth.UserMembershipSearchRequest, arg2 ...grpc.CallOption) (*auth.UserMembershipSearchResponse, error) {
+	m.ctrl.T.Helper()
+	varargs := []interface{}{arg0, arg1}
+	for _, a := range arg2 {
+		varargs = append(varargs, a)
+	}
+	ret := m.ctrl.Call(m, "SearchMyUserMemberships", varargs...)
+	ret0, _ := ret[0].(*auth.UserMembershipSearchResponse)
+	ret1, _ := ret[1].(error)
+	return ret0, ret1
+}
+
+// SearchMyUserMemberships indicates an expected call of SearchMyUserMemberships
+func (mr *MockAuthServiceClientMockRecorder) SearchMyUserMemberships(arg0, arg1 interface{}, arg2 ...interface{}) *gomock.Call {
+	mr.mock.ctrl.T.Helper()
+	varargs := append([]interface{}{arg0, arg1}, arg2...)
+	return mr.mock.ctrl.RecordCallWithMethodType(mr.mock, "SearchMyUserMemberships", reflect.TypeOf((*MockAuthServiceClient)(nil).SearchMyUserMemberships), varargs...)
+}
+
 // UpdateMyUserAddress mocks base method
 func (m *MockAuthServiceClient) UpdateMyUserAddress(arg0 context.Context, arg1 *auth.UpdateUserAddressRequest, arg2 ...grpc.CallOption) (*auth.UserAddress, error) {
 	m.ctrl.T.Helper()