mailcow-dockerized/data/web/templates/modals/imapsync_source.twig

<!-- add imapsync source modal (shared between user and admin views) -->
<div class="modal fade" id="addImapsyncSourceModal" tabindex="-1" role="dialog" aria-hidden="true" aria-labelledby="addImapsyncSourceModalLabel">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="addImapsyncSourceModalLabel">{{ lang.syncjobs.source_add }}</h3>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ lang.footer.cancel }}"></button>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" data-cached-form="true" role="form" data-id="add_imapsync_source">
          <input type="hidden" value="0" name="active">
          <div class="row mb-3">
            <label class="control-label col-sm-2 text-sm-end">{{ lang.syncjobs.source_presets }}</label>
            <div class="col-sm-10 small">
              {% if mailcow_cc_role != 'user' %}
              <div class="d-flex flex-wrap column-gap-3">
                <a href="#" class="imapsync-source-preset" data-preset="m365_app">Microsoft 365 ({{ lang.syncjobs.source_flow_badge_app }})</a>
                <a href="#" class="imapsync-source-preset" data-preset="m365_user">Microsoft 365 ({{ lang.syncjobs.source_flow_badge_user }})</a>
                <a href="#" class="imapsync-source-preset" data-preset="google_user">Google ({{ lang.syncjobs.source_flow_badge_user }})</a>
              </div>
              {% endif %}
              <div class="d-flex flex-wrap column-gap-3">
                <a href="#" class="imapsync-source-preset" data-preset="gmail">Gmail</a>
                <a href="#" class="imapsync-source-preset" data-preset="gmx">GMX</a>
                <a href="#" class="imapsync-source-preset" data-preset="webde">WEB.DE</a>
                <a href="#" class="imapsync-source-preset" data-preset="tonline">T-Online</a>
                <a href="#" class="imapsync-source-preset" data-preset="icloud">iCloud</a>
                <a href="#" class="imapsync-source-preset" data-preset="yahoo">Yahoo</a>
                <a href="#" class="imapsync-source-preset" data-preset="ionos">IONOS</a>
                <a href="#" class="imapsync-source-preset" data-preset="strato">STRATO</a>
              </div>
              <span class="text-muted">{{ lang.syncjobs.source_presets_hint }}</span>
            </div>
          </div>
          <div class="row mb-2">
            <label class="control-label col-sm-2 text-sm-end" for="addsrc_name">{{ lang.syncjobs.source_name }}</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="addsrc_name" name="name" maxlength="100" required>
            </div>
          </div>
          <div class="row mb-2">
            <label class="control-label col-sm-2 text-sm-end" for="addsrc_description">{{ lang.syncjobs.source_description }}</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="addsrc_description" name="description" maxlength="255">
            </div>
          </div>
          {% if mailcow_cc_role == 'admin' or mailcow_cc_role == 'domainadmin' %}
          <div class="imapsync-source-scope-block">
            <div class="row mb-2">
              <label class="control-label col-sm-2 text-sm-end" for="addsrc_scope">{{ lang.syncjobs.source_scope }}</label>
              <div class="col-sm-10">
                <select class="form-control imapsync-source-scope" id="addsrc_scope" name="scope" data-width="100%">
                  {% if mailcow_cc_role == 'admin' %}
                  <option value="all">{{ lang.syncjobs.source_scope_all }}</option>
                  {% endif %}
                  <option value="domain">{{ lang.syncjobs.source_scope_domain }}</option>
                  <option value="user" selected>{{ lang.syncjobs.source_scope_user }}</option>
                </select>
              </div>
            </div>
            <div class="row mb-2 imapsync-source-domains-row" style="display:none;">
              <label class="control-label col-sm-2 text-sm-end" for="addsrc_domains">{{ lang.syncjobs.source_domains }}</label>
              <div class="col-sm-10">
                <select class="form-control imapsync-source-domains" id="addsrc_domains" name="domains" data-live-search="true" data-width="100%" title="{{ lang.syncjobs.source_domains }}" multiple></select>
              </div>
            </div>
            <div class="row mb-2 imapsync-source-users-row" style="display:none;">
              <label class="control-label col-sm-2 text-sm-end" for="addsrc_users">{{ lang.syncjobs.source_users }}</label>
              <div class="col-sm-10">
                <select class="form-control imapsync-source-users" id="addsrc_users" name="users" data-live-search="true" data-width="100%" title="{{ lang.syncjobs.source_users }}" multiple></select>
              </div>
            </div>
          </div>
          <div class="row mb-2 imapsync-source-scope-cc-hint" style="display:none;">
            <div class="offset-sm-2 col-sm-10">
              <small class="text-muted"><i class="bi bi-lock"></i> {{ lang.syncjobs.source_scope_cc_hint }}</small>
            </div>
          </div>
          {% endif %}
          <div class="row mb-2">
            <label class="control-label col-sm-2 text-sm-end" for="addsrc_host">{{ lang.add.hostname }}</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="addsrc_host" name="host" maxlength="253" required>
            </div>
          </div>
          <div class="row mb-2">
            <label class="control-label col-sm-2 text-sm-end" for="addsrc_port">{{ lang.add.port }}</label>
            <div class="col-sm-10">
              <input type="number" class="form-control" id="addsrc_port" name="port" min="1" max="65535" value="993" required>
            </div>
          </div>
          <div class="row mb-2">
            <label class="control-label col-sm-2 text-sm-end" for="addsrc_enc">{{ lang.add.enc_method }}</label>
            <div class="col-sm-10">
              <select id="addsrc_enc" name="enc" title="{{ lang.add.select }}" data-width="100%" required>
                <option value="SSL" selected>SSL</option>
                <option value="TLS">STARTTLS</option>
                <option value="PLAIN">PLAIN</option>
              </select>
            </div>
          </div>
          <div class="row mb-4">
            <label class="control-label col-sm-2 text-sm-end" for="addsrc_auth_type">{{ lang.syncjobs.source_auth_type }}</label>
            <div class="col-sm-10">
              <select class="form-control imapsync-source-auth-type" id="addsrc_auth_type" name="auth_type" data-width="100%" required>
                <option value="PLAIN" selected>PLAIN</option>
                <option value="LOGIN">LOGIN</option>
                <option value="CRAM-MD5">CRAM-MD5</option>
                {% if mailcow_cc_role != 'user' %}
                <option value="XOAUTH2">XOAUTH2 (OAuth2)</option>
                {% endif %}
              </select>
            </div>
          </div>
          {% if mailcow_cc_role != 'user' %}
          <fieldset class="imapsync-source-oauth-block" style="display:none;">
            <legend class="fs-5">{{ lang.syncjobs.source_oauth_block }}</legend>
            <div class="row mb-2">
              <label class="control-label col-sm-2 text-sm-end" for="addsrc_oauth_flow">{{ lang.syncjobs.source_oauth_flow }}</label>
              <div class="col-sm-10">
                <select class="form-control imapsync-source-oauth-flow" id="addsrc_oauth_flow" name="oauth_flow" data-width="100%">
                  <option value="client_credentials" selected>{{ lang.syncjobs.source_oauth_flow_app }}</option>
                  <option value="authorization_code">{{ lang.syncjobs.source_oauth_flow_user }}</option>
                </select>
              </div>
            </div>
            <div class="row mb-2 imapsync-source-tenant-row" style="display:none;">
              <label class="control-label col-sm-2 text-sm-end" for="addsrc_tenant">{{ lang.syncjobs.source_tenant }}</label>
              <div class="col-sm-10">
                <input type="text" class="form-control imapsync-source-tenant" id="addsrc_tenant" placeholder="contoso.onmicrosoft.com">
                <small class="text-muted">{{ lang.syncjobs.source_tenant_hint }}</small>
              </div>
            </div>
            <div class="row mb-2 imapsync-source-authcode-block" style="display:none;">
              <label class="control-label col-sm-2 text-sm-end" for="addsrc_oauth_authorize_endpoint">{{ lang.syncjobs.source_authorize_endpoint }}</label>
              <div class="col-sm-10">
                <input type="url" class="form-control" id="addsrc_oauth_authorize_endpoint" name="oauth_authorize_endpoint" placeholder="https://provider.example.com/oauth2/authorize">
              </div>
            </div>
            <div class="row mb-2">
              <label class="control-label col-sm-2 text-sm-end" for="addsrc_oauth_token_endpoint">{{ lang.syncjobs.source_oauth_token_endpoint }}</label>
              <div class="col-sm-10">
                <input type="url" class="form-control" id="addsrc_oauth_token_endpoint" name="oauth_token_endpoint" placeholder="https://provider.example.com/oauth2/token">
              </div>
            </div>
            <div class="imapsync-source-authcode-block" style="display:none;">
              <div class="row mb-2">
                <label class="control-label col-sm-2 text-sm-end" for="addsrc_oauth_userinfo_endpoint">{{ lang.syncjobs.source_userinfo_endpoint }}</label>
                <div class="col-sm-10">
                  <input type="url" class="form-control" id="addsrc_oauth_userinfo_endpoint" name="oauth_userinfo_endpoint" placeholder="https://provider.example.com/oauth2/userinfo">
                </div>
              </div>
              <div class="row mb-2">
                <label class="control-label col-sm-2 text-sm-end" for="addsrc_redirect_uri">{{ lang.syncjobs.source_redirect_uri }}</label>
                <div class="col-sm-10">
                  <div class="input-group">
                    <input type="text" class="form-control" id="addsrc_redirect_uri" readonly value="{{ imapsync_redirect_uri }}" data-formcache-skip>
                    <button type="button" class="btn btn-secondary imapsync-copy-btn" data-copy-target="addsrc_redirect_uri" title="{{ lang.syncjobs.copy }}"><i class="bi bi-clipboard" aria-hidden="true"></i> {{ lang.syncjobs.copy }}</button>
                  </div>
                  <small class="text-muted">{{ lang.syncjobs.source_redirect_uri_hint }}</small>
                </div>
              </div>
            </div>
            <div class="row mb-2">
              <label class="control-label col-sm-2 text-sm-end" for="addsrc_oauth_client_id">{{ lang.syncjobs.source_oauth_client_id }}</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="addsrc_oauth_client_id" name="oauth_client_id">
              </div>
            </div>
            <div class="row mb-2">
              <label class="control-label col-sm-2 text-sm-end" for="addsrc_oauth_client_secret">{{ lang.syncjobs.source_oauth_client_secret }}</label>
              <div class="col-sm-10">
                <input type="password" class="form-control" id="addsrc_oauth_client_secret" name="oauth_client_secret" autocomplete="new-password" data-formcache-skip>
              </div>
            </div>
            <div class="row mb-2">
              <label class="control-label col-sm-2 text-sm-end" for="addsrc_oauth_scope">{{ lang.syncjobs.source_oauth_scope }}</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="addsrc_oauth_scope" name="oauth_scope" placeholder="openid email offline_access">
              </div>
            </div>
            <div class="row mb-4">
              <label class="control-label col-sm-2 text-sm-end" for="addsrc_oauth_extra_params">{{ lang.syncjobs.source_oauth_extra_params }}</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="addsrc_oauth_extra_params" name="oauth_extra_params" placeholder='{"resource":"https://provider.example.com"}'>
                <small class="text-muted">{{ lang.syncjobs.source_oauth_extra_params_hint }}</small>
              </div>
            </div>
          </fieldset>
          {% endif %}
          <div class="row mb-4">
            <div class="offset-sm-2 col-sm-10">
              <div class="form-check">
                <label><input type="checkbox" class="form-check-input" value="1" name="active" checked> {{ lang.add.active }}</label>
              </div>
            </div>
          </div>
          <div class="row mb-2">
            <div class="offset-sm-2 col-sm-10">
              <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="add_item" data-id="add_imapsync_source" data-api-url='add/syncjob_source' data-api-attr='{}' href="#">{{ lang.admin.add }}</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>