mirror of https://github.com/docusealco/docuseal
Vincent Barrier
4 weeks ago
committed by
GitHub
commit
6a644c85fd
@ -0,0 +1,21 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class RevealAccessTokenController < ApplicationController
|
||||
def show
|
||||
authorize!(:manage, current_user.access_token)
|
||||
end
|
||||
|
||||
def create
|
||||
authorize!(:manage, current_user.access_token)
|
||||
|
||||
if current_user.valid_password?(params[:password])
|
||||
render turbo_stream: turbo_stream.replace(:access_token_container,
|
||||
partial: 'reveal_access_token/access_token',
|
||||
locals: { token: current_user.access_token.token })
|
||||
else
|
||||
render turbo_stream: turbo_stream.replace(:modal, template: 'reveal_access_token/show',
|
||||
locals: { error_message: I18n.t('wrong_password') }),
|
||||
status: :unprocessable_content
|
||||
end
|
||||
end
|
||||
end
|
||||
@ -0,0 +1,17 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class SearchEntriesReindexController < ApplicationController
|
||||
def create
|
||||
authorize!(:manage, EncryptedConfig)
|
||||
|
||||
ReindexAllSearchEntriesJob.perform_async
|
||||
|
||||
AccountConfig.find_or_initialize_by(account_id: Account.minimum(:id), key: :fulltext_search)
|
||||
.update!(value: true)
|
||||
|
||||
Docuseal.instance_variable_set(:@fulltext_search, nil)
|
||||
|
||||
redirect_back(fallback_location: settings_account_path,
|
||||
notice: "Started building search index. Visit #{root_url}jobs/busy to check progress.")
|
||||
end
|
||||
end
|
||||
@ -0,0 +1,31 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class StartFormEmail2faSendController < ApplicationController
|
||||
around_action :with_browser_locale
|
||||
|
||||
skip_before_action :authenticate_user!
|
||||
skip_authorization_check
|
||||
|
||||
def create
|
||||
@template = Template.find_by!(slug: params[:slug])
|
||||
|
||||
@submitter = @template.submissions.new(account_id: @template.account_id)
|
||||
.submitters.new(**submitter_params, account_id: @template.account_id)
|
||||
|
||||
Submitters.send_shared_link_email_verification_code(@submitter, request:)
|
||||
|
||||
redir_params = { notice: I18n.t(:code_has_been_resent) } if params[:resend]
|
||||
|
||||
redirect_to start_form_path(@template.slug, params: submitter_params.merge(email_verification: true)),
|
||||
**redir_params
|
||||
rescue Submitters::UnableToSendCode => e
|
||||
redirect_to start_form_path(@template.slug, params: submitter_params.merge(email_verification: true)),
|
||||
alert: e.message
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def submitter_params
|
||||
params.require(:submitter).permit(:name, :email, :phone)
|
||||
end
|
||||
end
|
||||
@ -0,0 +1,39 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class TemplatesCloneAndReplaceController < ApplicationController
|
||||
load_and_authorize_resource :template
|
||||
|
||||
def create
|
||||
return head :unprocessable_content if params[:files].blank?
|
||||
|
||||
ActiveRecord::Associations::Preloader.new(
|
||||
records: [@template],
|
||||
associations: [schema_documents: :preview_images_attachments]
|
||||
).call
|
||||
|
||||
cloned_template = Templates::Clone.call(@template, author: current_user)
|
||||
cloned_template.name = File.basename(params[:files].first.original_filename, '.*')
|
||||
cloned_template.save!
|
||||
|
||||
documents = Templates::ReplaceAttachments.call(cloned_template, params, extract_fields: true)
|
||||
|
||||
Templates.maybe_assign_access(cloned_template)
|
||||
|
||||
cloned_template.save!
|
||||
|
||||
Templates::CloneAttachments.call(template: cloned_template, original_template: @template,
|
||||
excluded_attachment_uuids: documents.map(&:uuid))
|
||||
|
||||
SearchEntries.enqueue_reindex(cloned_template)
|
||||
|
||||
respond_to do |f|
|
||||
f.html { redirect_to edit_template_path(cloned_template) }
|
||||
f.json { render json: { id: cloned_template.id } }
|
||||
end
|
||||
rescue Templates::CreateAttachments::PdfEncrypted
|
||||
respond_to do |f|
|
||||
f.html { render turbo_stream: turbo_stream.append(params[:form_id], html: helpers.tag.prompt_password) }
|
||||
f.json { render json: { error: 'PDF encrypted', status: 'pdf_encrypted' }, status: :unprocessable_content }
|
||||
end
|
||||
end
|
||||
end
|
||||
@ -0,0 +1,27 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class TemplatesDetectFieldsController < ApplicationController
|
||||
include ActionController::Live
|
||||
|
||||
load_and_authorize_resource :template
|
||||
|
||||
def create
|
||||
response.headers['Content-Type'] = 'text/event-stream'
|
||||
|
||||
sse = SSE.new(response.stream)
|
||||
|
||||
documents = @template.schema_documents.preload(:blob)
|
||||
|
||||
documents.each do |document|
|
||||
io = StringIO.new(document.download)
|
||||
|
||||
Templates::DetectFields.call(io, attachment: document) do |(attachment_uuid, page, fields)|
|
||||
sse.write({ attachment_uuid:, page:, fields: })
|
||||
end
|
||||
end
|
||||
|
||||
sse.write({ completed: true })
|
||||
ensure
|
||||
response.stream.close
|
||||
end
|
||||
end
|
||||
@ -0,0 +1,26 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class TemplatesPrefillableFieldsController < ApplicationController
|
||||
PREFILLABLE_FIELD_TYPES = %w[text number cells date checkbox select radio phone].freeze
|
||||
|
||||
load_and_authorize_resource :template
|
||||
|
||||
def create
|
||||
authorize!(:update, @template)
|
||||
|
||||
field = @template.fields.find { |f| f['uuid'] == params[:field_uuid] }
|
||||
|
||||
if params[:prefillable] == 'false'
|
||||
field.delete('prefillable')
|
||||
field.delete('readonly')
|
||||
elsif params[:prefillable] == 'true'
|
||||
field['prefillable'] = true
|
||||
field['readonly'] = true
|
||||
end
|
||||
|
||||
@template.save!
|
||||
|
||||
render turbo_stream: turbo_stream.replace(:prefillable_fields_list, partial: 'list',
|
||||
locals: { template: @template })
|
||||
end
|
||||
end
|
||||
@ -0,0 +1,25 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class TemplatesShareLinkController < ApplicationController
|
||||
load_and_authorize_resource :template
|
||||
|
||||
def show; end
|
||||
|
||||
def create
|
||||
authorize!(:update, @template)
|
||||
|
||||
@template.update!(template_params)
|
||||
|
||||
if params[:redir].present?
|
||||
redirect_to params[:redir]
|
||||
else
|
||||
head :ok
|
||||
end
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def template_params
|
||||
params.require(:template).permit(:shared_link)
|
||||
end
|
||||
end
|
||||
@ -0,0 +1,20 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class UsersSendResetPasswordController < ApplicationController
|
||||
load_and_authorize_resource :user
|
||||
|
||||
LIMIT_DURATION = 10.minutes
|
||||
|
||||
def update
|
||||
authorize!(:manage, @user)
|
||||
|
||||
if @user.reset_password_sent_at && @user.reset_password_sent_at > LIMIT_DURATION.ago
|
||||
redirect_back fallback_location: settings_users_path, notice: I18n.t('email_has_been_sent_already')
|
||||
else
|
||||
@user.send_reset_password_instructions
|
||||
|
||||
redirect_back fallback_location: settings_users_path,
|
||||
notice: I18n.t('an_email_with_password_reset_instructions_has_been_sent')
|
||||
end
|
||||
end
|
||||
end
|
||||
@ -0,0 +1,66 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class WebhookEventsController < ApplicationController
|
||||
load_and_authorize_resource :webhook_url, parent: false, id_param: :webhook_id
|
||||
before_action :load_webhook_event
|
||||
|
||||
def show
|
||||
return unless current_ability.can?(:read, @webhook_event.record)
|
||||
|
||||
@data =
|
||||
case @webhook_event.event_type
|
||||
when 'form.started', 'form.completed', 'form.declined', 'form.viewed'
|
||||
Submitters::SerializeForWebhook.call(@webhook_event.record)
|
||||
when 'submission.created', 'submission.completed', 'submission.expired'
|
||||
Submissions::SerializeForApi.call(@webhook_event.record)
|
||||
when 'template.created', 'template.updated'
|
||||
Templates::SerializeForApi.call(@webhook_event.record)
|
||||
when 'submission.archived'
|
||||
@webhook_event.record.as_json(only: %i[id archived_at])
|
||||
end
|
||||
end
|
||||
|
||||
def resend
|
||||
id_key = WebhookUrls::EVENT_TYPE_ID_KEYS.fetch(@webhook_event.event_type.split('.').first)
|
||||
|
||||
last_attempt_id = @webhook_event.webhook_attempts.maximum(:id)
|
||||
|
||||
WebhookUrls::EVENT_TYPE_TO_JOB_CLASS[@webhook_event.event_type].perform_async(
|
||||
id_key => @webhook_event.record_id,
|
||||
'webhook_url_id' => @webhook_event.webhook_url_id,
|
||||
'event_uuid' => @webhook_event.uuid,
|
||||
'attempt' => SendWebhookRequest::MANUAL_ATTEMPT,
|
||||
'last_status' => 0
|
||||
)
|
||||
|
||||
render turbo_stream: [
|
||||
turbo_stream.after(
|
||||
params[:button_id],
|
||||
helpers.tag.submit_form(
|
||||
helpers.button_to('', refresh_settings_webhook_event_path(@webhook_url.id, @webhook_event.uuid),
|
||||
params: { last_attempt_id: }),
|
||||
class: 'hidden', data: { interval: 3_000 }
|
||||
)
|
||||
)
|
||||
]
|
||||
end
|
||||
|
||||
def refresh
|
||||
return head :ok if @webhook_event.webhook_attempts.maximum(:id) == params[:last_attempt_id].to_i
|
||||
|
||||
render turbo_stream: [
|
||||
turbo_stream.replace(helpers.dom_id(@webhook_event),
|
||||
partial: 'event_row',
|
||||
locals: { with_status: true, webhook_url: @webhook_url, webhook_event: @webhook_event }),
|
||||
turbo_stream.replace(helpers.dom_id(@webhook_event, :drawer_events),
|
||||
partial: 'drawer_events',
|
||||
locals: { webhook_url: @webhook_url, webhook_event: @webhook_event })
|
||||
]
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def load_webhook_event
|
||||
@webhook_event = @webhook_url.webhook_events.find_by!(uuid: params[:id])
|
||||
end
|
||||
end
|
||||
@ -0,0 +1,338 @@
|
||||
export default class extends HTMLElement {
|
||||
async connectedCallback () {
|
||||
this.tourType = this.dataset.type
|
||||
this.nextPagePath = this.dataset.nextPagePath
|
||||
this.I18n = JSON.parse(this.dataset.i18n || '{}')
|
||||
|
||||
if (this.dataset.showTour === 'true') this.start()
|
||||
}
|
||||
|
||||
async start () {
|
||||
if (window.innerWidth < 768) return
|
||||
|
||||
const [{ driver }] = await Promise.all([
|
||||
import('driver.js'),
|
||||
import('driver.js/dist/driver.css')
|
||||
])
|
||||
|
||||
this.driverObj = driver({
|
||||
showProgress: true,
|
||||
nextBtnText: this.I18n.next,
|
||||
prevBtnText: this.I18n.previous,
|
||||
doneBtnText: this.I18n.done,
|
||||
onDestroyStarted: () => {
|
||||
this.disableAppGuide().finally(() => { this.destroy() })
|
||||
},
|
||||
onHighlightStarted: (element) => {
|
||||
if (element) {
|
||||
const clickHandler = () => {
|
||||
this.disableAppGuide().finally(() => { this.destroy() })
|
||||
element.removeEventListener('click', clickHandler)
|
||||
}
|
||||
|
||||
element.addEventListener('click', clickHandler)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
if (this.tourType === 'dashboard') {
|
||||
this.showDashboardTour()
|
||||
} else if (this.tourType === 'builder') {
|
||||
this.showTemplateBuilderTour()
|
||||
} else if (this.tourType === 'account') {
|
||||
this.showAccountTour()
|
||||
} else if (this.tourType === 'template') {
|
||||
this.showTemplateTour()
|
||||
}
|
||||
}
|
||||
|
||||
disconnectedCallback () {
|
||||
if (this.driverObj) this.destroy()
|
||||
}
|
||||
|
||||
destroy () {
|
||||
if (this.builderTemplate) this.builderTemplate.fields.shift()
|
||||
if (this.driverObj) this.driverObj.destroy()
|
||||
}
|
||||
|
||||
showTemplateTour () {
|
||||
const steps = [
|
||||
{
|
||||
element: '#share_link_clipboard',
|
||||
popover: {
|
||||
title: this.I18n.copy_and_share_link,
|
||||
description: this.I18n.copy_and_share_link_description,
|
||||
side: 'bottom',
|
||||
align: 'end'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '#sign_yourself_button',
|
||||
popover: {
|
||||
title: this.I18n.sign_the_document,
|
||||
description: this.I18n.sign_the_document_description,
|
||||
side: 'top',
|
||||
align: 'center'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '#send_to_recipients_button',
|
||||
popover: {
|
||||
title: this.I18n.send_for_signing,
|
||||
description: this.I18n.add_recipients_description,
|
||||
side: 'top',
|
||||
align: 'center'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '#add_recipients_button',
|
||||
popover: {
|
||||
title: this.I18n.add_recipients,
|
||||
description: this.I18n.add_recipients_description,
|
||||
side: 'bottom',
|
||||
align: 'end'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '#account_settings_button',
|
||||
popover: {
|
||||
title: this.I18n.settings,
|
||||
description: this.I18n.settings_template_description,
|
||||
side: 'right',
|
||||
align: 'start',
|
||||
showButtons: this.nextPagePath ? ['next', 'previous', 'close'] : ['previous', 'close'],
|
||||
onNextClick: () => {
|
||||
if (this.nextPagePath) {
|
||||
window.Turbo.visit(this.nextPagePath)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
].filter((step) => document.querySelector(step.element))
|
||||
|
||||
this.driverObj.setSteps(steps)
|
||||
this.driverObj.drive()
|
||||
}
|
||||
|
||||
showDashboardTour () {
|
||||
this.driverObj.setSteps([
|
||||
{
|
||||
element: '#templates_submissions_toggle',
|
||||
popover: {
|
||||
title: this.I18n.template_and_submissions,
|
||||
description: this.I18n.template_and_submissions_description,
|
||||
side: 'right',
|
||||
align: 'start'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '#templates_upload_button',
|
||||
popover: {
|
||||
title: this.I18n.upload_a_pdf_file,
|
||||
description: this.I18n.upload_a_pdf_file_description,
|
||||
side: 'left',
|
||||
align: 'start',
|
||||
showButtons: this.nextPagePath ? ['next', 'previous', 'close'] : ['previous', 'close'],
|
||||
onNextClick: () => {
|
||||
if (this.nextPagePath) {
|
||||
window.Turbo.visit(this.nextPagePath)
|
||||
}
|
||||
}
|
||||
},
|
||||
onHighlightStarted: () => {}
|
||||
}
|
||||
])
|
||||
|
||||
this.driverObj.drive()
|
||||
}
|
||||
|
||||
showAccountTour () {
|
||||
this.driverObj.setSteps([
|
||||
{
|
||||
element: '#account_settings_menu',
|
||||
popover: {
|
||||
title: this.I18n.settings,
|
||||
description: this.I18n.settings_account_description,
|
||||
side: 'right',
|
||||
align: 'start'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '#support_channels',
|
||||
popover: {
|
||||
title: this.I18n.support,
|
||||
description: this.I18n.support_description,
|
||||
side: 'left',
|
||||
align: 'start'
|
||||
}
|
||||
}
|
||||
].filter((step) => document.querySelector(step.element)))
|
||||
|
||||
this.driverObj.drive()
|
||||
}
|
||||
|
||||
showTemplateBuilderTour () {
|
||||
const builderComponent = document.querySelector('template-builder')?.component
|
||||
|
||||
this.builderTemplate = builderComponent?.template
|
||||
|
||||
if (this.builderTemplate) {
|
||||
this.builderTemplate.fields.unshift({
|
||||
uuid: 'b387399b-88dc-4345-9d37-743e97a9b2b3',
|
||||
submitter_uuid: this.builderTemplate.submitters[0].uuid,
|
||||
name: 'First Name',
|
||||
type: 'text'
|
||||
})
|
||||
|
||||
builderComponent.$nextTick(() => {
|
||||
this.driverObj.setSteps([
|
||||
{
|
||||
element: '.roles-dropdown',
|
||||
popover: {
|
||||
title: this.I18n.select_a_signer_party,
|
||||
description: this.I18n.select_a_signer_party_description,
|
||||
side: 'left',
|
||||
align: 'start',
|
||||
onPopoverRender: () => {
|
||||
const rolesDropdown = document.querySelector('.roles-dropdown')
|
||||
|
||||
rolesDropdown.dispatchEvent(new Event('mouseenter', { bubbles: true, cancelable: true }))
|
||||
rolesDropdown.classList.add('dropdown-open')
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '.roles-dropdown .dropdown-content',
|
||||
popover: {
|
||||
title: this.I18n.available_parties,
|
||||
description: this.I18n.available_parties_description,
|
||||
side: 'left',
|
||||
align: 'start',
|
||||
onPopoverRender: () => {
|
||||
document.querySelector('.roles-dropdown .dropdown-content').classList.remove('driver-active-element')
|
||||
},
|
||||
onNextClick: () => {
|
||||
document.querySelector('.roles-dropdown').classList.remove('dropdown-open')
|
||||
this.driverObj.moveNext()
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '#field-types-grid',
|
||||
popover: {
|
||||
title: this.I18n.available_field_types,
|
||||
description: this.I18n.available_field_types_description,
|
||||
side: 'right',
|
||||
align: 'start',
|
||||
onPrevClick: () => {
|
||||
document.querySelector('.roles-dropdown').classList.add('dropdown-open')
|
||||
this.driverObj.movePrevious()
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '#text_type_field_button',
|
||||
popover: {
|
||||
title: this.I18n.text_input_field,
|
||||
description: this.I18n.text_input_field_description,
|
||||
side: 'left',
|
||||
align: 'start'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '#signature_type_field_button',
|
||||
popover: {
|
||||
title: this.I18n.signature_field,
|
||||
description: this.I18n.signature_field_description,
|
||||
side: 'left',
|
||||
align: 'start'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '.fields',
|
||||
popover: {
|
||||
title: this.I18n.added_fields,
|
||||
description: this.I18n.added_fields_description,
|
||||
side: 'right',
|
||||
align: 'start'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '.list-field label:has(svg.tabler-icon-settings)',
|
||||
popover: {
|
||||
title: this.I18n.open_field_settings,
|
||||
description: this.I18n.open_field_settings_description,
|
||||
side: 'bottom',
|
||||
align: 'end',
|
||||
onPopoverRender: () => {
|
||||
const settingsDropdown = document.querySelector('.list-field div:first-child span:has(svg.tabler-icon-settings)')
|
||||
|
||||
document.querySelectorAll('.list-field div:first-child .text-transparent').forEach((e) => e.classList.remove('text-transparent'))
|
||||
settingsDropdown.dispatchEvent(new Event('mouseenter', { bubbles: true, cancelable: true }))
|
||||
settingsDropdown.classList.add('dropdown-open')
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '.list-field div:first-child span:has(svg.tabler-icon-settings) .dropdown-content',
|
||||
popover: {
|
||||
title: this.I18n.field_settings,
|
||||
description: this.I18n.field_settings_description,
|
||||
side: 'left',
|
||||
align: 'start',
|
||||
onPopoverRender: () => {
|
||||
document.querySelector('.list-field div:first-child span:has(svg.tabler-icon-settings) .dropdown-content').classList.remove('driver-active-element')
|
||||
},
|
||||
onNextClick: () => {
|
||||
document.querySelector('.list-field div:first-child span:has(svg.tabler-icon-settings)').classList.remove('dropdown-open')
|
||||
this.driverObj.moveNext()
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '#send_button',
|
||||
popover: {
|
||||
title: this.I18n.send_document,
|
||||
description: this.I18n.send_document_description,
|
||||
side: 'bottom',
|
||||
align: 'end',
|
||||
onPrevClick: () => {
|
||||
document.querySelector('.list-field div:first-child span:has(svg.tabler-icon-settings)').classList.add('dropdown-open')
|
||||
this.driverObj.movePrevious()
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '#sign_yourself_button',
|
||||
popover: {
|
||||
title: this.I18n.sign_yourself,
|
||||
description: this.I18n.sign_yourself_description,
|
||||
side: 'bottom',
|
||||
align: 'end',
|
||||
onNextClick: () => {
|
||||
if (this.nextPagePath) {
|
||||
window.Turbo.visit(this.nextPagePath)
|
||||
} else {
|
||||
this.destroy()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
])
|
||||
|
||||
this.driverObj.drive()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
async disableAppGuide () {
|
||||
return fetch('/user_configs', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
|
||||
},
|
||||
body: JSON.stringify({ key: 'show_app_tour', value: false })
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
export default class extends HTMLElement {
|
||||
connectedCallback () {
|
||||
this.querySelector('form').addEventListener('submit', () => {
|
||||
window.app_tour.start()
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
export default class extends HTMLElement {
|
||||
connectedCallback () {
|
||||
const originalFontValue = this.field.style.fontSize
|
||||
|
||||
if (this.field.scrollHeight > this.field.clientHeight) {
|
||||
this.field.style.fontSize = `calc(${originalFontValue} / 1.5)`
|
||||
this.field.style.lineHeight = `calc(${this.field.style.fontSize} * 1.3)`
|
||||
|
||||
if (this.field.scrollHeight > this.field.clientHeight) {
|
||||
this.field.style.fontSize = `calc(${originalFontValue} / 2.0)`
|
||||
this.field.style.lineHeight = `calc(${this.field.style.fontSize} * 1.3)`
|
||||
}
|
||||
}
|
||||
|
||||
this.field.classList.remove('hidden')
|
||||
}
|
||||
|
||||
get field () {
|
||||
return this.closest('field-value')
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
export default class extends HTMLElement {
|
||||
connectedCallback () {
|
||||
this.addEventListener('click', () => {
|
||||
if (this.element && !this.element.disabled && !this.element.checked) {
|
||||
this.element.checked = true
|
||||
this.element.dispatchEvent(new Event('change', { bubbles: true }))
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
get element () {
|
||||
return document.getElementById(this.dataset.elementId)
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
export default class extends HTMLElement {
|
||||
connectedCallback () {
|
||||
const input = this.querySelector('input')
|
||||
const invalidMessage = this.dataset.invalidMessage || ''
|
||||
|
||||
input.addEventListener('invalid', () => {
|
||||
input.setCustomValidity(input.value ? invalidMessage : '')
|
||||
})
|
||||
|
||||
input.addEventListener('input', () => {
|
||||
input.setCustomValidity('')
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,248 @@
|
||||
import { target, targets, targetable } from '@github/catalyst/lib/targetable'
|
||||
|
||||
const loadingIconHtml = `<svg xmlns="http://www.w3.org/2000/svg" class="animate-spin" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M12 3a9 9 0 1 0 9 9" />
|
||||
</svg>`
|
||||
|
||||
export default targetable(class extends HTMLElement {
|
||||
static [targets.static] = [
|
||||
'hiddenOnDrag',
|
||||
'folderCards',
|
||||
'templateCards'
|
||||
]
|
||||
|
||||
static [target.static] = [
|
||||
'form',
|
||||
'fileDropzone',
|
||||
'folderDropzone',
|
||||
'fileDropzoneLoading'
|
||||
]
|
||||
|
||||
connectedCallback () {
|
||||
document.addEventListener('drop', this.onWindowDragdrop)
|
||||
document.addEventListener('dragover', this.onWindowDropover)
|
||||
|
||||
window.addEventListener('dragleave', this.onWindowDragleave)
|
||||
|
||||
this.fileDropzone?.addEventListener('drop', this.onDropFile)
|
||||
this.folderDropzone?.addEventListener('drop', this.onDropNewFolder)
|
||||
|
||||
this.folderCards.forEach((el) => el.addEventListener('drop', (e) => this.onDropFolder(e, el)))
|
||||
this.templateCards.forEach((el) => el.addEventListener('drop', this.onDropTemplate))
|
||||
this.templateCards.forEach((el) => el.addEventListener('dragstart', this.onTemplateDragStart))
|
||||
|
||||
return [this.fileDropzone, this.folderDropzone, ...this.folderCards, ...this.templateCards].forEach((el) => {
|
||||
el?.addEventListener('dragover', this.onDragover)
|
||||
el?.addEventListener('dragleave', this.onDragleave)
|
||||
})
|
||||
}
|
||||
|
||||
disconnectedCallback () {
|
||||
document.removeEventListener('drop', this.onWindowDragdrop)
|
||||
document.removeEventListener('dragover', this.onWindowDropover)
|
||||
|
||||
window.removeEventListener('dragleave', this.onWindowDragleave)
|
||||
}
|
||||
|
||||
onTemplateDragStart = (e) => {
|
||||
const id = e.target.href.split('/').pop()
|
||||
|
||||
this.folderCards.forEach((el) => el.classList.remove('bg-base-200', 'before:hidden'))
|
||||
this.folderDropzone?.classList?.remove('hidden')
|
||||
window.flash?.remove()
|
||||
|
||||
e.dataTransfer.effectAllowed = 'move'
|
||||
|
||||
if (id) {
|
||||
e.dataTransfer.setData('template_id', id)
|
||||
|
||||
const dragPreview = e.target.cloneNode(true)
|
||||
const rect = e.target.getBoundingClientRect()
|
||||
|
||||
const height = e.target.children[0].getBoundingClientRect().height + 50
|
||||
|
||||
dragPreview.children[1].remove()
|
||||
dragPreview.style.width = `${rect.width}px`
|
||||
dragPreview.style.height = `${height}px`
|
||||
dragPreview.style.position = 'absolute'
|
||||
dragPreview.style.top = '-1000px'
|
||||
dragPreview.style.pointerEvents = 'none'
|
||||
dragPreview.style.opacity = '0.9'
|
||||
|
||||
document.body.appendChild(dragPreview)
|
||||
|
||||
e.dataTransfer.setDragImage(dragPreview, rect.width / 2, height / 2)
|
||||
|
||||
setTimeout(() => document.body.removeChild(dragPreview), 0)
|
||||
}
|
||||
}
|
||||
|
||||
onDropFile = (e) => {
|
||||
e.preventDefault()
|
||||
|
||||
this.fileDropzoneLoading.classList.remove('hidden')
|
||||
this.fileDropzoneLoading.previousElementSibling.classList.add('hidden')
|
||||
this.fileDropzoneLoading.classList.add('opacity-50')
|
||||
|
||||
this.uploadFiles(e.dataTransfer.files, '/templates_upload')
|
||||
}
|
||||
|
||||
onDropFolder = (e, el) => {
|
||||
e.preventDefault()
|
||||
|
||||
const templateId = e.dataTransfer.getData('template_id')
|
||||
|
||||
if (e.dataTransfer.files.length || templateId) {
|
||||
const loading = document.createElement('div')
|
||||
const svg = el.querySelector('svg')
|
||||
|
||||
loading.innerHTML = loadingIconHtml
|
||||
loading.children[0].classList.add(...svg.classList)
|
||||
|
||||
el.replaceChild(loading.children[0], svg)
|
||||
el.classList.add('opacity-50')
|
||||
|
||||
if (e.dataTransfer.files.length) {
|
||||
const params = new URLSearchParams({ folder_name: el.innerText.trim() }).toString()
|
||||
|
||||
this.uploadFiles(e.dataTransfer.files, `/templates_upload?${params}`)
|
||||
} else {
|
||||
const formData = new FormData()
|
||||
|
||||
formData.append('name', el.dataset.fullName)
|
||||
|
||||
fetch(`/templates/${templateId}/folder`, {
|
||||
method: 'PUT',
|
||||
redirect: 'manual',
|
||||
body: formData,
|
||||
headers: {
|
||||
'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
|
||||
}
|
||||
}).finally(() => {
|
||||
window.Turbo.cache.clear()
|
||||
window.Turbo.visit(location.href)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onDropTemplate = (e) => {
|
||||
e.preventDefault()
|
||||
|
||||
if (e.dataTransfer.files.length) {
|
||||
const loading = document.createElement('div')
|
||||
loading.classList.add('bottom-5', 'left-0', 'flex', 'justify-center', 'w-full', 'absolute')
|
||||
loading.innerHTML = loadingIconHtml
|
||||
|
||||
e.target.appendChild(loading)
|
||||
e.target.classList.add('opacity-50')
|
||||
|
||||
const id = e.target.href.split('/').pop()
|
||||
|
||||
this.uploadFiles(e.dataTransfer.files, `/templates/${id}/clone_and_replace`)
|
||||
}
|
||||
}
|
||||
|
||||
onWindowDragdrop = (e) => {
|
||||
e.preventDefault()
|
||||
|
||||
if (!this.isLoading) this.hideDraghover()
|
||||
}
|
||||
|
||||
uploadFiles (files, url) {
|
||||
this.isLoading = true
|
||||
|
||||
this.form.action = url
|
||||
|
||||
this.form.querySelector('[type="file"]').files = files
|
||||
|
||||
this.form.querySelector('[type="submit"]').click()
|
||||
}
|
||||
|
||||
onWindowDropover = (e) => {
|
||||
e.preventDefault()
|
||||
|
||||
if (e.dataTransfer?.types?.includes('Files')) {
|
||||
this.showDraghover()
|
||||
}
|
||||
}
|
||||
|
||||
onDragover (e) {
|
||||
if (e.dataTransfer?.types?.includes('Files') || this.dataset.targets !== 'dashboard-dropzone.templateCards') {
|
||||
this.style.backgroundColor = '#F7F3F0'
|
||||
|
||||
if (this.classList.contains('before:border-base-300')) {
|
||||
this.classList.remove('before:border-base-300')
|
||||
this.classList.add('before:border-base-content/30')
|
||||
} else if (this.classList.contains('border-base-300')) {
|
||||
this.classList.remove('border-base-300')
|
||||
this.classList.add('border-base-content/30')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onDropNewFolder (e) {
|
||||
e.preventDefault()
|
||||
|
||||
const templateId = e.dataTransfer.getData('template_id')
|
||||
|
||||
const a = document.createElement('a')
|
||||
|
||||
a.href = `/templates/${templateId}/folder/edit?autocomplete=false`
|
||||
a.dataset.turboFrame = 'modal'
|
||||
a.classList.add('hidden')
|
||||
|
||||
document.body.append(a)
|
||||
|
||||
a.click()
|
||||
|
||||
a.remove()
|
||||
}
|
||||
|
||||
onDragleave () {
|
||||
this.style.backgroundColor = null
|
||||
|
||||
if (this.classList.contains('before:border-base-content/30')) {
|
||||
this.classList.remove('before:border-base-content/30')
|
||||
this.classList.add('before:border-base-300')
|
||||
} else if (this.classList.contains('border-base-content/30')) {
|
||||
this.classList.remove('border-base-content/30')
|
||||
this.classList.add('border-base-300')
|
||||
}
|
||||
}
|
||||
|
||||
onWindowDragleave = (e) => {
|
||||
if (e.clientX <= 0 || e.clientY <= 0 || e.clientX >= window.innerWidth || e.clientY >= window.innerHeight) {
|
||||
this.hideDraghover()
|
||||
}
|
||||
}
|
||||
|
||||
showDraghover = () => {
|
||||
if (this.isDrag) return
|
||||
|
||||
this.isDrag = true
|
||||
|
||||
window.flash?.remove()
|
||||
this.fileDropzone?.classList?.remove('hidden')
|
||||
|
||||
this.hiddenOnDrag.forEach((el) => { el.style.display = 'none' })
|
||||
|
||||
return [...this.folderCards, ...this.templateCards].forEach((el) => {
|
||||
el.classList.remove('bg-base-200', 'before:hidden')
|
||||
})
|
||||
}
|
||||
|
||||
hideDraghover = () => {
|
||||
this.isDrag = false
|
||||
|
||||
this.fileDropzone?.classList?.add('hidden')
|
||||
this.folderDropzone?.classList?.add('hidden')
|
||||
|
||||
this.hiddenOnDrag.forEach((el) => { el.style.display = null })
|
||||
|
||||
return [...this.folderCards, ...this.templateCards].forEach((el) => {
|
||||
el.classList.add('bg-base-200', 'before:hidden')
|
||||
})
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,131 @@
|
||||
import { target, targetable } from '@github/catalyst/lib/targetable'
|
||||
|
||||
let loaderPromise = null
|
||||
|
||||
function loadCodeMirror () {
|
||||
if (!loaderPromise) {
|
||||
loaderPromise = Promise.all([
|
||||
import(/* webpackChunkName: "email-editor" */ '@codemirror/view'),
|
||||
import(/* webpackChunkName: "email-editor" */ '@codemirror/commands'),
|
||||
import(/* webpackChunkName: "email-editor" */ '@codemirror/language'),
|
||||
import(/* webpackChunkName: "email-editor" */ '@codemirror/lang-html'),
|
||||
import(/* webpackChunkName: "email-editor" */ '@specious/htmlflow')
|
||||
]).then(([view, commands, language, html, htmlflow]) => {
|
||||
return {
|
||||
minimalSetup: [
|
||||
commands.history(),
|
||||
language.syntaxHighlighting(language.defaultHighlightStyle, { fallback: true }),
|
||||
view.keymap.of([...commands.defaultKeymap, ...commands.historyKeymap])
|
||||
],
|
||||
EditorView: view.EditorView,
|
||||
html: html.html,
|
||||
htmlflow: htmlflow.default || htmlflow
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return loaderPromise
|
||||
}
|
||||
|
||||
export default targetable(class extends HTMLElement {
|
||||
static [target.static] = [
|
||||
'codeViewTab',
|
||||
'previewViewTab',
|
||||
'editorContainer',
|
||||
'previewIframe'
|
||||
]
|
||||
|
||||
connectedCallback () {
|
||||
this.mount()
|
||||
|
||||
if (this.input.value) {
|
||||
this.showPreviewView()
|
||||
} else {
|
||||
this.showCodeView()
|
||||
}
|
||||
|
||||
this.previewViewTab.addEventListener('click', this.showPreviewView)
|
||||
this.codeViewTab.addEventListener('click', this.showCodeView)
|
||||
}
|
||||
|
||||
showCodeView = () => {
|
||||
this.editorView.dispatch({
|
||||
changes: { from: 0, to: this.editorView.state.doc.length, insert: this.input.value }
|
||||
})
|
||||
|
||||
this.previewViewTab.classList.remove('tab-active', 'tab-bordered')
|
||||
this.previewViewTab.classList.add('pb-[3px]')
|
||||
this.codeViewTab.classList.remove('pb-[3px]')
|
||||
this.codeViewTab.classList.add('tab-active', 'tab-bordered')
|
||||
this.editorContainer.classList.remove('hidden')
|
||||
this.previewIframe.classList.add('hidden')
|
||||
}
|
||||
|
||||
showPreviewView = () => {
|
||||
this.previewIframe.srcdoc = this.input.value
|
||||
|
||||
this.codeViewTab.classList.remove('tab-active', 'tab-bordered')
|
||||
this.codeViewTab.classList.add('pb-[3px]')
|
||||
this.previewViewTab.classList.remove('pb-[3px]')
|
||||
this.previewViewTab.classList.add('tab-active', 'tab-bordered')
|
||||
this.editorContainer.classList.add('hidden')
|
||||
this.previewIframe.classList.remove('hidden')
|
||||
}
|
||||
|
||||
async mount () {
|
||||
this.input = this.querySelector('input[type="hidden"]')
|
||||
this.input.style.display = 'none'
|
||||
|
||||
const { EditorView, minimalSetup, html, htmlflow } = await loadCodeMirror()
|
||||
|
||||
this.editorView = new EditorView({
|
||||
doc: this.input.value,
|
||||
parent: this.editorContainer,
|
||||
extensions: [
|
||||
html(),
|
||||
minimalSetup,
|
||||
EditorView.lineWrapping,
|
||||
EditorView.updateListener.of(update => {
|
||||
if (update.docChanged) this.input.value = update.state.doc.toString()
|
||||
}),
|
||||
EditorView.theme({
|
||||
'&': {
|
||||
backgroundColor: 'white',
|
||||
color: 'black',
|
||||
fontSize: '14px',
|
||||
fontFamily: 'monospace'
|
||||
},
|
||||
'&.cm-focused': {
|
||||
outline: 'none'
|
||||
},
|
||||
'&.cm-editor': {
|
||||
borderRadius: '0.375rem',
|
||||
border: 'none'
|
||||
},
|
||||
'.cm-gutters': {
|
||||
display: 'none'
|
||||
}
|
||||
})
|
||||
]
|
||||
})
|
||||
|
||||
this.previewIframe.srcdoc = this.editorView.state.doc.toString()
|
||||
|
||||
this.previewIframe.onload = () => {
|
||||
const previewIframeDoc = this.previewIframe.contentDocument
|
||||
|
||||
if (previewIframeDoc.body) {
|
||||
previewIframeDoc.body.contentEditable = true
|
||||
}
|
||||
|
||||
const contentDocument = this.previewIframe.contentDocument || this.previewIframe.contentWindow.document
|
||||
|
||||
contentDocument.body.addEventListener('input', async () => {
|
||||
const html = contentDocument.documentElement.outerHTML.replace(' contenteditable="true"', '')
|
||||
const prettifiedHtml = await htmlflow(html)
|
||||
|
||||
this.input.value = prettifiedHtml
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,36 @@
|
||||
export default class extends HTMLElement {
|
||||
connectedCallback () {
|
||||
this.form.addEventListener('submit', (e) => {
|
||||
e.preventDefault()
|
||||
|
||||
this.submit()
|
||||
})
|
||||
|
||||
if (this.dataset.onload === 'true') {
|
||||
this.form.querySelector('button').click()
|
||||
}
|
||||
}
|
||||
|
||||
submit () {
|
||||
fetch(this.form.action, {
|
||||
method: this.form.method,
|
||||
body: new FormData(this.form)
|
||||
}).then(async (resp) => {
|
||||
if (!resp.ok) {
|
||||
try {
|
||||
const data = JSON.parse(await resp.text())
|
||||
|
||||
if (data.error) {
|
||||
alert(data.error)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
get form () {
|
||||
return this.querySelector('form')
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,55 @@
|
||||
export default class extends HTMLElement {
|
||||
connectedCallback () {
|
||||
const iframeTemplate = this.querySelector('template')
|
||||
|
||||
this.observer = new IntersectionObserver((entries) => {
|
||||
if (entries.some(e => e.isIntersecting)) {
|
||||
iframeTemplate.parentElement.prepend(iframeTemplate.content)
|
||||
|
||||
this.observer.disconnect()
|
||||
}
|
||||
})
|
||||
|
||||
this.observer.observe(this)
|
||||
|
||||
window.addEventListener('message', this.messageHandler)
|
||||
}
|
||||
|
||||
messageHandler = (event) => {
|
||||
if (event.data.type === 'google-drive-files-picked') {
|
||||
this.form.querySelectorAll('input[name="google_drive_file_ids[]"]').forEach(el => el.remove())
|
||||
|
||||
const files = event.data.files || []
|
||||
|
||||
files.forEach((file) => {
|
||||
const input = document.createElement('input')
|
||||
input.type = 'hidden'
|
||||
input.name = 'google_drive_file_ids[]'
|
||||
input.value = file.id
|
||||
this.form.appendChild(input)
|
||||
})
|
||||
|
||||
this.form.querySelector('button[type="submit"]').click()
|
||||
this.loader.classList.remove('hidden')
|
||||
} else if (event.data.type === 'google-drive-picker-loaded') {
|
||||
this.loader.classList.add('hidden')
|
||||
this.form.classList.remove('hidden')
|
||||
} else if (event.data.type === 'google-drive-picker-request-oauth') {
|
||||
document.getElementById(this.dataset.oauthButtonId).classList.remove('hidden')
|
||||
this.classList.add('hidden')
|
||||
}
|
||||
}
|
||||
|
||||
disconnectedCallback () {
|
||||
this.observer?.unobserve(this)
|
||||
window.removeEventListener('message', this.messageHandler)
|
||||
}
|
||||
|
||||
get form () {
|
||||
return this.querySelector('form')
|
||||
}
|
||||
|
||||
get loader () {
|
||||
return document.getElementById('google_drive_loader')
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
export default class extends HTMLElement {
|
||||
connectedCallback () {
|
||||
this.addEventListener('click', () => {
|
||||
document.body.append(this.template.content)
|
||||
})
|
||||
}
|
||||
|
||||
get template () {
|
||||
return document.getElementById(this.dataset.templateId)
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
export default class extends HTMLElement {
|
||||
connectedCallback () {
|
||||
const src = this.getAttribute('src')
|
||||
const link = document.createElement('a')
|
||||
|
||||
link.href = src
|
||||
link.setAttribute('data-turbo-frame', 'modal')
|
||||
link.style.display = 'none'
|
||||
|
||||
this.appendChild(link)
|
||||
|
||||
link.click()
|
||||
|
||||
window.history.replaceState({}, document.title, window.location.pathname)
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
export default class extends HTMLElement {
|
||||
connectedCallback () {
|
||||
const image = this.querySelector('img')
|
||||
|
||||
image.addEventListener('load', (e) => {
|
||||
image.setAttribute('width', e.target.naturalWidth)
|
||||
image.setAttribute('height', e.target.naturalHeight)
|
||||
|
||||
this.style.aspectRatio = `${e.target.naturalWidth} / ${e.target.naturalHeight}`
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
export default class extends HTMLElement {
|
||||
connectedCallback () {
|
||||
const eventType = this.dataset.on || 'click'
|
||||
const selector = document.getElementById(this.dataset.selectorId) || this
|
||||
const eventElement = eventType === 'submit' ? this.querySelector('form') : this
|
||||
|
||||
eventElement.addEventListener(eventType, (event) => {
|
||||
if (eventType === 'click') {
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
selector.remove()
|
||||
})
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue