make it clear LDAP URL is readonly

dashboard/src/views/UserDirectoryLdapServerView.vue

@@ -31,7 +31,7 @@ const isValid = computed(() => {
 
 function onCopyToClipboard(value) {
   copyToClipboard(value);
-  window.pankow.notify({ type: 'success', text: 'LDAP Url copied!' });
+  window.pankow.notify({ type: 'success', text: 'LDAP URL copied!' });
 }
 
 async function onSubmit() {
@@ -84,11 +84,14 @@ onMounted(async () => {
         <fieldset :disabled="busy">
           <input style="display: none" type="submit" :disabled="busy || !isValid" />
 
-          <Checkbox v-model="enabled" :label="$t('users.exposedLdap.enabled')" style="display: inline-flex; margin-right: 6px;"/><sup><a href="https://docs.cloudron.io/user-directory/#directory-server" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup>
+          <Checkbox v-model="enabled" :label="$t('users.exposedLdap.enabled')" style="display: inline-flex; margin-right: 6px;"/><sup><a href="https://docs.cloudron.io/user-directory/#ldap-directory-server" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup>
 
           <FormGroup>
             <label for="ldapUrlInput">{{ $t('users.exposedLdap.secret.url') }}</label>
-            <TextInput id="ldapUrlInput" v-model="ldapUrl" readonly @click="onCopyToClipboard(ldapUrl)" style="cursor: copy" />
+            <div class="ldap-url-container">
+              <TextInput id="ldapUrlInput" v-model="ldapUrl" readonly />
+              <Button tool @click="onCopyToClipboard(ldapUrl)" icon="fa fa-clipboard" />
+            </div>
             <p class="text-small text-warning" v-show="adminDomain.provider === 'cloudflare'">{{ $t('users.exposedLdap.cloudflarePortWarning') }} </p>
           </FormGroup>
 
@@ -114,3 +117,17 @@ onMounted(async () => {
     </Section>
   </div>
 </template>
+
+<style scoped>
+
+.ldap-url-container {
+  display: flex;
+  width: 100%;
+  gap: 5px;
+}
+
+.ldap-url-container input {
+  width: 100%;
+}
+
+</style>