diff --git a/changelog/entries/unreleased/feature/introduced_a_shortcut_in_the_login_form_configuration_so_tha.json b/changelog/entries/unreleased/feature/introduced_a_shortcut_in_the_login_form_configuration_so_tha.json
new file mode 100644
index 000000000..53677ca0a
--- /dev/null
+++ b/changelog/entries/unreleased/feature/introduced_a_shortcut_in_the_login_form_configuration_so_tha.json
@@ -0,0 +1,8 @@
+{
+ "type": "feature",
+ "message": "Introduced a shortcut in the Login form configuration so that it's easier to create a new user source.",
+ "domain": "builder",
+ "issue_number": null,
+ "bullet_points": [],
+ "created_at": "2025-03-14"
+}
\ No newline at end of file
diff --git a/enterprise/web-frontend/modules/baserow_enterprise/builder/components/elements/AuthFormElementForm.vue b/enterprise/web-frontend/modules/baserow_enterprise/builder/components/elements/AuthFormElementForm.vue
index 97749cb2b..b7082012f 100644
--- a/enterprise/web-frontend/modules/baserow_enterprise/builder/components/elements/AuthFormElementForm.vue
+++ b/enterprise/web-frontend/modules/baserow_enterprise/builder/components/elements/AuthFormElementForm.vue
@@ -12,14 +12,11 @@
required
class="margin-bottom-2"
>
- <Dropdown v-model="values.user_source_id" :show-search="false">
- <DropdownItem
- v-for="userSource in userSources"
- :key="userSource.id"
- :name="userSource.name"
- :value="userSource.id"
- />
- </Dropdown>
+ <UserSourceDropdown
+ v-model="values.user_source_id"
+ :builder="builder"
+ :user-sources="userSources"
+ ></UserSourceDropdown>
</FormGroup>
<CustomStyle
v-model="values.styles"
@@ -45,10 +42,12 @@
import elementForm from '@baserow/modules/builder/mixins/elementForm'
import CustomStyle from '@baserow/modules/builder/components/elements/components/forms/style/CustomStyle'
import InjectedFormulaInput from '@baserow/modules/core/components/formula/InjectedFormulaInput'
+import UserSourceDropdown from '@baserow/modules/builder/components/userSource/UserSourceDropdown'
export default {
name: 'AuthFormElementForm',
components: {
+ UserSourceDropdown,
CustomStyle,
InjectedFormulaInput,
},
@@ -69,9 +68,5 @@ export default {
return this.$store.getters['userSource/getUserSources'](this.builder)
},
},
- methods: {},
- validations() {
- return {}
- },
}
</script>
diff --git a/web-frontend/modules/builder/components/settings/BuilderSettingsModal.vue b/web-frontend/modules/builder/components/settings/BuilderSettingsModal.vue
index 9311a4aa7..09232bf86 100644
--- a/web-frontend/modules/builder/components/settings/BuilderSettingsModal.vue
+++ b/web-frontend/modules/builder/components/settings/BuilderSettingsModal.vue
@@ -32,7 +32,7 @@
:builder="builder"
:hide-after-create="hideAfterCreate"
:force-display-form="displaySelectedSettingForm"
- @hide-modal="hide()"
+ @hide-modal="emitCreatedRecord($event)"
></component>
</template>
</Modal>
@@ -117,6 +117,17 @@ export default {
return modal.methods.show.call(this, ...args)
},
+ /**
+ * If this modal is being used with the `hideAfterCreate` prop set to `true`,
+ * then once a record has been created, we want to hide the modal, and then
+ * emit the newly created record ID so that it can be used by the component
+ * implementing this modal.
+ * @param createdRecordId - The ID of the newly created record.
+ */
+ emitCreatedRecord(createdRecordId) {
+ this.hide()
+ this.$emit('created', createdRecordId)
+ },
},
}
</script>
diff --git a/web-frontend/modules/builder/components/settings/UserSourcesSettings.vue b/web-frontend/modules/builder/components/settings/UserSourcesSettings.vue
index 4b3bb7899..9513da378 100644
--- a/web-frontend/modules/builder/components/settings/UserSourcesSettings.vue
+++ b/web-frontend/modules/builder/components/settings/UserSourcesSettings.vue
@@ -194,7 +194,6 @@ export default {
this.hideForm()
// immediately select this user source to edit it.
this.editedUserSource = createdUserSource
- this.hideModalIfRequired()
} catch (error) {
this.handleError(error)
}
@@ -212,6 +211,11 @@ export default {
userSourceId: this.editedUserSource.id,
values: clone(newValues),
})
+ // If the builder settings modal is set to hide after create, normally
+ // we would have hidden the modal and shared the record ID after the user
+ // source was created, but in this settings component we'll share the ID
+ // after the update, when there's a better change of having a configure source.
+ this.hideModalIfRequired(this.editedUserSource.id)
this.hideForm()
} catch (error) {
// Restore the previously saved values from the store
diff --git a/web-frontend/modules/builder/components/settings/mixins/builderSetting.js b/web-frontend/modules/builder/components/settings/mixins/builderSetting.js
index e91fdfaf7..f686b87d8 100644
--- a/web-frontend/modules/builder/components/settings/mixins/builderSetting.js
+++ b/web-frontend/modules/builder/components/settings/mixins/builderSetting.js
@@ -32,9 +32,9 @@ export default {
}
},
methods: {
- hideModalIfRequired() {
+ hideModalIfRequired(createdRecordId) {
if (this.hideAfterCreate) {
- this.$emit('hide-modal')
+ this.$emit('hide-modal', createdRecordId)
}
},
},
diff --git a/web-frontend/modules/builder/components/userSource/UserSourceDropdown.vue b/web-frontend/modules/builder/components/userSource/UserSourceDropdown.vue
new file mode 100644
index 000000000..16f31253e
--- /dev/null
+++ b/web-frontend/modules/builder/components/userSource/UserSourceDropdown.vue
@@ -0,0 +1,68 @@
+<template>
+ <div>
+ <Dropdown
+ :value="value"
+ fixed-items
+ show-footer
+ :show-search="false"
+ @input="$emit('input', $event)"
+ >
+ <DropdownItem
+ v-for="userSource in userSources"
+ :key="userSource.id"
+ :name="userSource.name"
+ :value="userSource.id"
+ />
+ <template #emptyState>
+ <slot name="emptyState">
+ {{ $t('userSourceDropdown.noUserSources') }}
+ </slot>
+ </template>
+ <template #footer>
+ <a class="select__footer-button" @click="openUserSettings">
+ <i class="iconoir-plus"></i>
+ {{ $t('userSourceDropdown.addUserSource') }}
+ </a>
+ <BuilderSettingsModal
+ ref="userSourcesSettingsModal"
+ hide-after-create
+ :builder="builder"
+ @created="$emit('input', $event)"
+ />
+ </template>
+ </Dropdown>
+ </div>
+</template>
+
+<script>
+import BuilderSettingsModal from '@baserow/modules/builder/components/settings/BuilderSettingsModal'
+import { UserSourcesBuilderSettingsType } from '@baserow/modules/builder/builderSettingTypes'
+
+export default {
+ name: 'UserSourceDropdown',
+ components: { BuilderSettingsModal },
+ props: {
+ value: {
+ type: Number,
+ required: false,
+ default: null,
+ },
+ builder: {
+ type: Object,
+ required: true,
+ },
+ userSources: {
+ type: Array,
+ required: true,
+ },
+ },
+ methods: {
+ openUserSettings() {
+ this.$refs.userSourcesSettingsModal.show(
+ UserSourcesBuilderSettingsType.getType(),
+ true
+ )
+ },
+ },
+}
+</script>
diff --git a/web-frontend/modules/builder/locales/en.json b/web-frontend/modules/builder/locales/en.json
index 18cc483ea..486e3daba 100644
--- a/web-frontend/modules/builder/locales/en.json
+++ b/web-frontend/modules/builder/locales/en.json
@@ -956,6 +956,11 @@
"label": "Property",
"noProperties": "No properties available"
},
+ "userSourceDropdown": {
+ "label": "User source",
+ "addUserSource": "Add new user source",
+ "noUserSources": "No user sources available"
+ },
"dataSourceDropdown": {
"label": "Data source",
"noDataSources": "No data sources available",