feat: create randomId helper and use everywhere

Co-authored-by: konrad <konrad@kola-entertainments.de>

src/components/input/colorPicker.vue

@@ -28,6 +28,8 @@
 </template>
 
 <script>
+import {createRandomID} from '@/helpers/randomId'
+
 const DEFAULT_COLORS = [
 	'#1973ff',
 	'#7F23FF',
@@ -37,11 +39,6 @@ const DEFAULT_COLORS = [
 	'#00db60',
 ]
 
-function createRandomID() {
-	const ID_LENGTH = 9
-	return Math.random().toString(36).substr(2, ID_LENGTH)
-}
-
 export default {
 	name: 'colorPicker',
 	data() {

src/components/input/fancycheckbox.vue

@@ -21,12 +21,14 @@
 </template>
 
 <script>
+import {createRandomID} from '@/helpers/randomId'
+
 export default {
 	name: 'fancycheckbox',
 	data() {
 		return {
 			checked: false,
-			checkBoxId: 'fancycheckbox' + Math.random(),
+			checkBoxId: `fancycheckbox_${createRandomID()}`,
 		}
 	},
 	props: {

src/helpers/randomId.ts

@@ -0,0 +1,5 @@
+const DEFAULT_ID_LENGTH = 9
+
+export function createRandomID(idLength = DEFAULT_ID_LENGTH) {
+	return Math.random().toString(36).substr(2, idLength)
+}

src/helpers/redirectToProvider.ts

@@ -1,3 +1,5 @@
+import {createRandomID} from '@/helpers/randomId'
+
 interface Provider {
 	name: string
 	key: string
@@ -6,7 +8,7 @@ interface Provider {
 }
 
 export const redirectToProvider = (provider: Provider, redirectUrl: string) => {
-	const state = Math.random().toString(36).substring(2, 24)
+	const state = createRandomID(24)
 	localStorage.setItem('state', state)
 
 	window.location.href = `${provider.authUrl}?client_id=${provider.clientId}&redirect_uri=${redirectUrl}${provider.key}&response_type=code&scope=openid email profile&state=${state}`