From 48a2fbeb9437cf00b7c21e21c31d46841d26c113 Mon Sep 17 00:00:00 2001
From: Florian Klinger <florian.klinger@nextcloud.com>
Date: Tue, 21 Nov 2023 17:16:22 +0100
Subject: [PATCH 1/4] Set the identifier input field to not editable if its set
 already

Signed-off-by: Florian Klinger <florian.klinger@nextcloud.com>
---
 src/components/SettingsForm.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/SettingsForm.vue b/src/components/SettingsForm.vue
index 7d128be0..d00aa9df 100644
--- a/src/components/SettingsForm.vue
+++ b/src/components/SettingsForm.vue
@@ -28,6 +28,7 @@
 				v-model="localProvider.identifier"
 				type="text"
 				:placeholder="t('user_oidc', 'Display name to identify the provider')"
+				:disabled="identifierInitiallySet"
 				required>
 		</p>
 		<p>
@@ -194,7 +195,8 @@ export default {
 	},
 	created() {
 		this.localProvider = this.provider
-	},
+		this.identifierInitiallySet = !!this.localProvider.identifier
+	}
 }
 </script>
 

From 45c1f7e0c116f481e2bfac01e18d6a2cccd4b8f3 Mon Sep 17 00:00:00 2001
From: Florian Klinger <florian.klinger@nextcloud.com>
Date: Thu, 23 Nov 2023 16:54:49 +0100
Subject: [PATCH 2/4] Added max length limit and live indicator for identifier
 field

Signed-off-by: Florian Klinger <florian.klinger@nextcloud.com>
---
 src/components/SettingsForm.vue | 40 +++++++++++++++++++++++++++------
 1 file changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/components/SettingsForm.vue b/src/components/SettingsForm.vue
index d00aa9df..716ea568 100644
--- a/src/components/SettingsForm.vue
+++ b/src/components/SettingsForm.vue
@@ -20,16 +20,17 @@
   -
   -->
 
-<template>
+  <template>
 	<form class="provider-edit">
 		<p>
-			<label for="oidc-identifier">{{ t('user_oidc', 'Identifier') }}</label>
+			<label for="oidc-identifier">{{ t('user_oidc', 'Identifier') }} <span class="identifier-length-indicator" :style="identifierIndicatorStyle">({{ identifierLength }}/{{ maxIdentifierLength }})</span></label>
 			<input id="oidc-identifier"
 				v-model="localProvider.identifier"
 				type="text"
 				:placeholder="t('user_oidc', 'Display name to identify the provider')"
 				:disabled="identifierInitiallySet"
-				required>
+				required
+				:maxlength="maxIdentifierLength">
 		</p>
 		<p>
 			<label for="oidc-client-id">{{ t('user_oidc', 'Client ID') }}</label>
@@ -166,6 +167,8 @@ import CheckIcon from 'vue-material-design-icons/Check.vue'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
+import { showWarning } from '@nextcloud/dialogs'
+
 export default {
 	name: 'SettingsForm',
 	components: {
@@ -191,12 +194,30 @@ export default {
 	data() {
 		return {
 			localProvider: null,
+			maxIdentifierLength: 128,
+			identifierLength: 0,
+		}
+	},
+	watch: {
+		'localProvider.identifier': function(newVal) {
+			this.identifierLength = newVal.length;
+			if( newVal.length > this.maxIdentifierLength ) {
+				showWarning(t('user_oidc', 'The identifier exceeds the limit of maximum characters'))
+			}
+		}
+	},
+	computed: {
+		identifierIndicatorStyle() {
+			return {
+				color: this.identifierLength === this.maxIdentifierLength ? 'var(--color-warning)' : 'var(--color-text-maxcontrast)'
+			};
 		}
 	},
 	created() {
-		this.localProvider = this.provider
-		this.identifierInitiallySet = !!this.localProvider.identifier
-	}
+		this.localProvider = this.provider;
+		this.identifierInitiallySet = !!this.localProvider.identifier;
+		this.identifierLength = this.localProvider.identifier ? this.localProvider.identifier.length : 0;
+	},
 }
 </script>
 
@@ -234,5 +255,10 @@ export default {
 			flex-grow: 1;
 		}
 	}
+	
+	.identifier-length-indicator {
+		color: var(--color-text-maxcontrast);
+		font-size: small;
+	}
 }
-</style>
+</style>
\ No newline at end of file

From cc8d09d7f1041e46f7c531a028193101f0561024 Mon Sep 17 00:00:00 2001
From: Florian Klinger <florian.klinger@nextcloud.com>
Date: Tue, 28 Nov 2023 11:48:57 +0100
Subject: [PATCH 3/4] eslint correction, replaced local variable usage, changed
 css class to contidional class

Signed-off-by: Florian Klinger <florian.klinger@nextcloud.com>
---
 src/components/SettingsForm.vue | 40 ++++++++++++++++++---------------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/components/SettingsForm.vue b/src/components/SettingsForm.vue
index 716ea568..8ce133ed 100644
--- a/src/components/SettingsForm.vue
+++ b/src/components/SettingsForm.vue
@@ -20,10 +20,13 @@
   -
   -->
 
-  <template>
+<template>
 	<form class="provider-edit">
 		<p>
+			<!--
 			<label for="oidc-identifier">{{ t('user_oidc', 'Identifier') }} <span class="identifier-length-indicator" :style="identifierIndicatorStyle">({{ identifierLength }}/{{ maxIdentifierLength }})</span></label>
+			-->
+			<label for="oidc-identifier" :class="{ warning: identifierLength >= maxIdentifierLength }">{{ t('user_oidc', 'Identifier') }} ({{ identifierLength }}/{{ maxIdentifierLength }})</label>
 			<input id="oidc-identifier"
 				v-model="localProvider.identifier"
 				type="text"
@@ -195,28 +198,29 @@ export default {
 		return {
 			localProvider: null,
 			maxIdentifierLength: 128,
-			identifierLength: 0,
-		}
-	},
-	watch: {
-		'localProvider.identifier': function(newVal) {
-			this.identifierLength = newVal.length;
-			if( newVal.length > this.maxIdentifierLength ) {
-				showWarning(t('user_oidc', 'The identifier exceeds the limit of maximum characters'))
-			}
 		}
 	},
 	computed: {
+		identifierLength() {
+			return this.localProvider.identifier.length
+		},
 		identifierIndicatorStyle() {
 			return {
-				color: this.identifierLength === this.maxIdentifierLength ? 'var(--color-warning)' : 'var(--color-text-maxcontrast)'
-			};
-		}
+				color: this.identifierLength === this.maxIdentifierLength ? 'var(--color-warning)' : 'var(--color-text-maxcontrast)',
+			}
+		},
+	},
+	watch: {
+		'localProvider.identifier'(newVal) {
+			this.identifierLength = newVal.length
+			if (newVal.length > this.maxIdentifierLength) {
+				showWarning(t('user_oidc', 'The identifier exceeds the limit of maximum characters'))
+			}
+		},
 	},
 	created() {
-		this.localProvider = this.provider;
-		this.identifierInitiallySet = !!this.localProvider.identifier;
-		this.identifierLength = this.localProvider.identifier ? this.localProvider.identifier.length : 0;
+		this.localProvider = this.provider
+		this.identifierInitiallySet = !!this.localProvider.identifier
 	},
 }
 </script>
@@ -255,10 +259,10 @@ export default {
 			flex-grow: 1;
 		}
 	}
-	
+
 	.identifier-length-indicator {
 		color: var(--color-text-maxcontrast);
 		font-size: small;
 	}
 }
-</style>
\ No newline at end of file
+</style>

From 866ec3ba7b42df5875d829c574527dd1051dc483 Mon Sep 17 00:00:00 2001
From: Florian Klinger <florian.klinger@nextcloud.com>
Date: Thu, 30 Nov 2023 17:34:13 +0100
Subject: [PATCH 4/4] Removed unused/unwanted lines from code

Signed-off-by: Florian Klinger <florian.klinger@nextcloud.com>
---
 src/components/SettingsForm.vue | 25 +------------------------
 1 file changed, 1 insertion(+), 24 deletions(-)

diff --git a/src/components/SettingsForm.vue b/src/components/SettingsForm.vue
index 8ce133ed..19b38207 100644
--- a/src/components/SettingsForm.vue
+++ b/src/components/SettingsForm.vue
@@ -23,10 +23,7 @@
 <template>
 	<form class="provider-edit">
 		<p>
-			<!--
-			<label for="oidc-identifier">{{ t('user_oidc', 'Identifier') }} <span class="identifier-length-indicator" :style="identifierIndicatorStyle">({{ identifierLength }}/{{ maxIdentifierLength }})</span></label>
-			-->
-			<label for="oidc-identifier" :class="{ warning: identifierLength >= maxIdentifierLength }">{{ t('user_oidc', 'Identifier') }} ({{ identifierLength }}/{{ maxIdentifierLength }})</label>
+			<label for="oidc-identifier" :class="{ warning: identifierLength >= maxIdentifierLength }">{{ t('user_oidc', 'Identifier (max 128 characters)') }}</label>
 			<input id="oidc-identifier"
 				v-model="localProvider.identifier"
 				type="text"
@@ -170,8 +167,6 @@ import CheckIcon from 'vue-material-design-icons/Check.vue'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
-import { showWarning } from '@nextcloud/dialogs'
-
 export default {
 	name: 'SettingsForm',
 	components: {
@@ -204,19 +199,6 @@ export default {
 		identifierLength() {
 			return this.localProvider.identifier.length
 		},
-		identifierIndicatorStyle() {
-			return {
-				color: this.identifierLength === this.maxIdentifierLength ? 'var(--color-warning)' : 'var(--color-text-maxcontrast)',
-			}
-		},
-	},
-	watch: {
-		'localProvider.identifier'(newVal) {
-			this.identifierLength = newVal.length
-			if (newVal.length > this.maxIdentifierLength) {
-				showWarning(t('user_oidc', 'The identifier exceeds the limit of maximum characters'))
-			}
-		},
 	},
 	created() {
 		this.localProvider = this.provider
@@ -259,10 +241,5 @@ export default {
 			flex-grow: 1;
 		}
 	}
-
-	.identifier-length-indicator {
-		color: var(--color-text-maxcontrast);
-		font-size: small;
-	}
 }
 </style>