anonymous_github/public/partials/newConference.htm

<div class="container paper-page paper-settings">
  <div class="paper-crumbs"><a href="/conferences">Conferences</a> &nbsp;/&nbsp; <span class="here">{{editionMode ? 'Edit' : 'New'}}</span></div>
  <h1 class="paper-page-title">{{editionMode ? 'Edit' : 'Create a'}} <em>conference</em></h1>
  <p class="paper-page-lede">
    Give chairs access to every anonymization submitted to a venue, and lift
    author quotas during the review window.
  </p>

  <div class="paper-settings-body">
    <aside class="paper-settings-toc">
      <div class="paper-settings-toc-head">Contents</div>
      <nav>
        <a href="#conf-basics">Basics</a>
        <a href="#conf-window">Review window</a>
        <a href="#conf-rendering">Rendering defaults</a>
        <a href="#conf-features">Features</a>
        <a href="#conf-plan">Plan</a>
        <a href="#conf-billing" ng-show="plan.pricePerRepo > 0">Billing</a>
      </nav>
    </aside>

    <form class="form needs-validation paper-settings-main" name="conference" novalidate>
      <section id="conf-basics" class="paper-settings-section">
        <div class="paper-section-eyebrow">Basics</div>

        <div class="form-group">
          <label class="paper-field-label" for="name">Conference name</label>
          <input
            type="text"
            class="form-control"
            name="name"
            id="name"
            required
            ng-class="{'is-invalid': conference.name.$invalid}"
            ng-model="options.name"
            placeholder="e.g. International Conference on Software Engineering"
          />
          <div class="invalid-feedback" ng-show="conference.name.$error.invalid">
            The name of the conference is invalid.
          </div>
          <div class="invalid-feedback" ng-show="conference.name.$error.required">
            The name of the conference is required.
          </div>
        </div>

        <div class="form-group">
          <label class="paper-field-label" for="url">Website</label>
          <input
            type="url"
            class="form-control"
            name="url"
            id="url"
            ng-class="{'is-invalid': conference.url.$invalid}"
            ng-model="options.url"
            placeholder="https://example.org"
          />
          <div class="invalid-feedback" ng-show="conference.url.$error.invalid">
            The url of the conference is invalid.
          </div>
        </div>

        <div class="form-group">
          <label class="paper-field-label" for="conferenceID">Conference ID</label>
          <input
            type="text"
            class="form-control"
            name="conferenceID"
            id="conferenceID"
            required
            pattern="[a-zA-Z0-9\-_]{3,10}"
            ng-class="{'is-invalid': conference.conferenceID.$invalid}"
            ng-model="options.conferenceID"
            placeholder="ICSE26"
          />
          <small class="form-text text-muted">3&ndash;10 characters, letters, numbers, <code>-</code> and <code>_</code>. Authors reference this when they anonymize.</small>
          <div class="invalid-feedback" ng-show="conference.conferenceID.$error.used">
            The conference ID '{{options.conferenceID}}' is already used.
          </div>
          <div class="invalid-feedback" ng-show="conference.conferenceID.$error.required">
            The conference ID is required.
          </div>
          <div class="invalid-feedback" ng-show="conference.conferenceID.$error.pattern">
            The format of the conference ID is incorrect ([a-zA-Z0-9-_]{3,10}).
          </div>
        </div>
      </section>

      <section id="conf-window" class="paper-settings-section">
        <div class="paper-section-eyebrow">Review window</div>

        <div class="form-grid-2">
          <div class="form-group">
            <label class="paper-field-label" for="startDate">Start date</label>
            <input
              type="date"
              class="form-control"
              name="startDate"
              id="startDate"
              required
              ng-class="{'is-invalid': conference.startDate.$invalid}"
              ng-model="options.startDate"
            />
            <small class="form-text text-muted">Beginning of the review process.</small>
            <div class="invalid-feedback" ng-show="conference.startDate.$error.required">
              Start date is required.
            </div>
            <div class="invalid-feedback" ng-show="conference.startDate.$error.invalid">
              Start date must be before end date.
            </div>
          </div>

          <div class="form-group">
            <label class="paper-field-label" for="endDate">End date</label>
            <input
              type="date"
              class="form-control"
              name="endDate"
              id="endDate"
              required
              ng-class="{'is-invalid': conference.endDate.$invalid}"
              ng-model="options.endDate"
            />
            <small class="form-text text-muted">All repositories expire on this date.</small>
            <div class="invalid-feedback" ng-show="conference.endDate.$error.required">
              End date is required.
            </div>
            <div class="invalid-feedback" ng-show="conference.endDate.$error.invalid">
              End date is invalid.
            </div>
          </div>
        </div>
      </section>

      <section id="conf-rendering" class="paper-settings-section">
        <div class="paper-section-eyebrow">Rendering defaults</div>

        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="link" name="link" ng-model="options.options.link" />
          <label class="form-check-label" for="link">Keep links</label>
          <small class="form-text text-muted">Keep or remove all links from text files.</small>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="image" name="image" ng-model="options.options.image" />
          <label class="form-check-label" for="image">Display images</label>
          <small class="form-text text-muted">Images are not anonymized.</small>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="pdf" name="pdf" ng-model="options.options.pdf" />
          <label class="form-check-label" for="pdf">Display PDFs</label>
          <small class="form-text text-muted">PDFs are not anonymized.</small>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="notebook" name="notebook" ng-model="options.options.notebook" />
          <label class="form-check-label" for="notebook">Display Notebooks</label>
        </div>
      </section>

      <section id="conf-features" class="paper-settings-section">
        <div class="paper-section-eyebrow">Features</div>

        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="update" name="update" ng-model="options.options.update" />
          <label class="form-check-label" for="update">Auto update</label>
          <small class="form-text text-muted">Pull the latest commit automatically (hourly maximum).</small>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="page" name="page" ng-model="options.options.page" />
          <label class="form-check-label" for="page">GitHub pages</label>
          <small class="form-text text-muted">Enable anonymized GitHub pages.</small>
        </div>
      </section>

      <section id="conf-plan" class="paper-settings-section">
        <div class="paper-section-eyebrow">Plan</div>
        <p class="paper-settings-copy">Repositories are billed per hour.</p>

        <div class="paper-plan-grid">
          <label
            class="paper-plan-card"
            ng-class="{'selected': options.plan.planID == plan.id}"
            ng-repeat="plan in plans"
          >
            <input
              type="radio"
              name="planPicker"
              ng-value="plan.id"
              ng-model="options.plan.planID"
            />
            <div class="paper-plan-head" ng-bind="plan.name"></div>
            <div class="paper-plan-price">
              {{plan.pricePerRepo | number}}&euro;
              <span class="paper-plan-per">/ repo / month</span>
            </div>
            <div class="paper-plan-desc" ng-bind-html="plan.description"></div>
          </label>
        </div>
      </section>

      <section id="conf-billing" class="paper-settings-section" ng-if="plan.pricePerRepo > 0">
        <div class="paper-section-eyebrow">Billing</div>

        <div class="form-group">
          <label class="paper-field-label" for="billing_name">Name</label>
          <input type="text" class="form-control" name="billing_name" id="billing_name" required
            ng-class="{'is-invalid': conference.billing_name.$invalid}"
            ng-model="options.billing.name" placeholder="First &amp; last name" />
        </div>

        <div class="form-group">
          <label class="paper-field-label" for="email">Email</label>
          <input type="email" class="form-control" name="email" id="email" required
            ng-class="{'is-invalid': conference.email.$invalid}"
            ng-model="options.billing.email" placeholder="you@example.org" />
        </div>

        <div class="form-group">
          <label class="paper-field-label" for="inputAddress">Address</label>
          <input type="text" class="form-control" name="inputAddress" id="inputAddress" required
            placeholder="1234 Main St"
            ng-model="options.billing.address"
            ng-class="{'is-invalid': conference.inputAddress.$invalid}" />
        </div>
        <div class="form-group">
          <input type="text" class="form-control" name="inputAddress2" id="inputAddress2"
            ng-model="options.billing.address2"
            ng-class="{'is-invalid': conference.inputAddress2.$invalid}"
            placeholder="Apartment, studio, or floor" />
        </div>

        <div class="form-grid-3">
          <div class="form-group">
            <label class="paper-field-label" for="city">City</label>
            <input type="text" class="form-control" name="city" id="city"
              ng-model="options.billing.city" required
              ng-class="{'is-invalid': conference.city.$invalid}" placeholder="City" />
          </div>
          <div class="form-group">
            <label class="paper-field-label" for="country">Country</label>
            <input type="text" class="form-control" name="country" id="country"
              ng-model="options.billing.country" required
              ng-class="{'is-invalid': conference.country.$invalid}" placeholder="Country" />
          </div>
          <div class="form-group">
            <label class="paper-field-label" for="zip">Zip</label>
            <input type="text" class="form-control" name="zip" id="zip"
              ng-model="options.billing.zip" required
              ng-class="{'is-invalid': conference.zip.$invalid}" placeholder="Zip" />
          </div>
        </div>

        <div class="form-group">
          <label class="paper-field-label" for="vat">VAT number</label>
          <input type="text" class="form-control" name="vat" id="vat"
            ng-class="{'is-invalid': conference.vat.$invalid}"
            ng-model="options.billing.vat" placeholder="VAT Number" />
        </div>
      </section>

      <div class="paper-settings-footer">
        <div class="alert alert-danger" role="alert" ng-if="error" ng-bind="error"></div>
        <div class="alert alert-success" role="alert" ng-if="message" ng-bind="message"></div>
        <button id="send" type="submit" class="btn btn-ink" ng-click="submit($event)">
          {{editionMode ? "Update" : "Create"}} conference
        </button>
      </div>
    </form>
  </div>
</div>