google-nomulus/java/google/registry/ui/soy/registrar/Console.soy

// Copyright 2017 The Nomulus Authors. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

{namespace registry.soy.registrar.console}


/**
 * Main registrar page.  We use a single page architecture (SPA) so content is
 * filled in dynamically into reg-app element via JS rendering of Component.soy
 * and other templates within it.
 */
{template .main}
  {@param xsrfToken: string} /** Security token. */
  {@param clientId: string} /** Registrar client identifier. */
  {@param allClientIds: list<string>} /** All registrar client identifiers for the user. */
  {@param isAdmin: bool}
  {@param isOwner: bool}
  {@param username: string} /** Arbitrary username to display. */
  {@param logoutUrl: string} /** Generated URL for logging out of Google. */
  {@param productName: string} /** Name to display for this software product. */
  {@param integrationEmail: string}
  {@param supportEmail: string}
  {@param announcementsEmail: string}
  {@param supportPhoneNumber: string}
  {@param technicalDocsUrl: string}
  {@param environment: string}
  {@param analyticsConfig: [googleAnalyticsId: string|null]}

  {call registry.soy.console.header}
    {param app: 'registrar' /}
    {param subtitle: 'Registrar Console' /}
    {param analyticsConfig: $analyticsConfig /}
  {/call}
  {call registry.soy.console.googlebar data="all" /}
  <div id="reg-app">
    <div id="reg-appbar" class="{css('kd-appbar')}">
      <div class="{css('kd-description')}">
        Accessing <span class="{css('kd-value')}">{$clientId}</span> as{sp}
        {if $isOwner}<span class="{css('kd-value')}">Owner</span>{/if}
        {if $isAdmin}<span class="{css('kd-value')}">Admin</span>{/if}
        {if length($allClientIds) > 1}
          {sp}(Switch registrar: {call .clientIdSelect_ data="all" /})
        {/if}
      </div>
      <div id="reg-app-buttons" class="{css('kd-buttonbar')} {css('left')}"></div>
    </div>
    {call .navbar_ data="all" /}
    <div id="reg-content-and-footer">
      <div id="reg-content">
        // Dynamic content goes here.
      </div>
      {call registry.soy.console.footer /}
    </div>
  </div>
  {switch DEBUG}
    {case google.registry.ui.ConsoleDebug.PRODUCTION}
      <script src="/assets/js/registrar_bin.js"></script>
    {case google.registry.ui.ConsoleDebug.DEBUG}
      <script src="/assets/js/registrar_dbg.js"></script>
    {case google.registry.ui.ConsoleDebug.RAW}
      <script>var CLOSURE_NO_DEPS = true;</script>
      <script src="/assets/sources/com_google_javascript_closure_library/closure/googbase.js"></script>
      <script src="/assets/sources/domain_registry/java/google/registry/ui/deps.js"></script>
      <script>goog.require('registry.registrar.main');</script>
  {/switch}
  {if isNonnull(DEBUG)}
    <script>
      registry.registrar.main({$xsrfToken},
                              {$clientId},
                              {if $isAdmin}true{else}false{/if},
                              {if $isOwner}true{else}false{/if},
                              {$productName},
                              {$integrationEmail},
                              {$supportEmail},
                              {$announcementsEmail},
                              {$supportPhoneNumber},
                              {$technicalDocsUrl},
                              {$environment});
    </script>
  {/if}
{/template}


/** Sidebar nav. Ids on each elt for testing only. */
{template .navbar_ visibility="private"}
  {@param isAdmin: bool}

  <div id="reg-nav" class="{css('kd-content-sidebar')}">
    <ul id="reg-navlist">
      <li>
        <a href="#">Home</a>
      <li>
        <a href="#resources">Resources &amp; billing</a>
      <li>
        <ul>
          <span class="{css('reg-navlist-sub')}">Settings</span>
          <li>
            <a href="#whois-settings">WHOIS</a>
          <li>
            <a href="#security-settings">Security</a>
          <li>
            <a href="#contact-settings">Contact</a>
          {if $isAdmin}
            <li>
              <a href="#admin-settings">Admin</a>
          {/if}
        </ul>
      <li>
        <a href="#contact-us">Contact us</a>
    </ul>
  </div>
{/template}


/** Drop-down selection for the clientId. */
{template .clientIdSelect_ visibility="private"}
  {@param clientId: string} /** Registrar client identifier. */
  {@param allClientIds: list<string>}
  <form>
    <select name="clientId"
            id="select-client-id"
            class="{css('kd-button')} {css('kd-button-submit')}"
            onchange='this.form.submit()'>
      <option value="">[auto select]</option>
      {for $id in $allClientIds}
        <option value="{$id}" {if $id == $clientId}selected{/if}>{$id}</option>
      {/for}
    </select>
  </form>
{/template}


/**
 * Feature disabled
 */
{template .disabled}
  {@param logoFilename: string}
  {@param productName: string}
  {@param analyticsConfig: [googleAnalyticsId: string|null]}
  {call registry.soy.console.header}
    {param app: 'registrar' /}
    {param subtitle: 'Console Disabled' /}
    {param analyticsConfig: $analyticsConfig /}
  {/call}
  <div class="{css('whoAreYou-disabled')}">
    <a class="{css('logo')}" href="/registrar">
      <img src="/assets/images/{$logoFilename}" alt="{$productName}">
    </a>
    <h1>Console is disabled</h1>
    <p>
      The {$productName} registrar console is temporarily disabled. Please
      contact your customer service representative for more information.
    <p>
      <img src="/assets/images/android_sad.png">
  </div>
{/template}


/**
 * Who goes thar?!
 */
{template .whoareyou}
  {@param username: string} /** Arbitrary username to display. */
  {@param logoutUrl: string} /** Generated URL for logging out of Google. */
  {@param logoFilename: string}
  {@param productName: string}
  {@param? clientId: string}
  {@param analyticsConfig: [googleAnalyticsId: string|null]}
  {call registry.soy.console.header}
    {param app: 'registrar' /}
    {param subtitle: 'Not Authorized' /}
    {param analyticsConfig: $analyticsConfig /}
  {/call}
  <div class="{css('whoAreYou')}">
    <a class="{css('logo')}" href="/registrar">
      <img src="/assets/images/{$logoFilename}" alt="{$productName}">
    </a>
    <h1>You need permission</h1>
    {if isNonnull($clientId)} // A clientId was given - but we don't have access to it
      <p>
        The account you are logged in as is not associated with the registrar
        {sp}{$clientId}. Please contact your customer service representative or
        switch to an account associated with {$clientId}. Alternatively, click
        {sp}<a href="?">here</a> to find a registrar associated with your
        account.
    {else}
      <p>
        The account you are logged in as is not associated with {$productName}.
        Please contact your customer service representative or
        switch to an account associated with {$productName}.
    {/if}
    <p>
      You are signed in as <strong>{$username}</strong>.
    <div>
      <a href="{$logoutUrl}"
         class="{css('kd-button')} {css('kd-button-submit')}"
         tabindex="-1">Logout and switch to another account</a>
      {if isNonnull($clientId)} // A clientId was given - but we don't have access to it
        {sp}
        <a href="?"
           class="{css('kd-button')} {css('kd-button-submit')}"
           tabindex="-1">Find registrar associated with your account</a>
      {/if}
    </div>
  </div>
{/template}


/** Welcome text and nav. */
{template .dashboard}
  {@param productName: string}
  <div id="domain-registrar-dashboard">
    <h1>Welcome to the {$productName} Registrar Console<super>BETA</super></h1>
    <p>This console can help you manage your relationship with {$productName} and
    allow self-service for key operations.</p>
    <table>
      <tr>
        <td>
          <div class="{css('dashbox')}">
            <img src="/assets/images/homeResources.png">
            <h2>Access Resources</h2>
            Use Google Drive to view<br>
            onboarding FAQs, technical<br>
            documentation &amp; billing reports.
          </div>
        <td>
          <div class="{css('dashbox')}">
            <img id="gear" src="/assets/images/homeSettings.png">
            <h2>Manage Settings</h2>
            Security, WHOIS &amp; contact<br>
            settings are easy to view and edit.
          </div>
        <td>
          <div class="{css('dashbox')}">
            <img src="/assets/images/homeContact.png">
            <h2>Contact Us</h2>
            View important phone &amp; email<br>
            contact information for<br>
            {$productName}.
          </div>
      </tr>
    </table>
    <p><img id="rotate" src="/assets/images/explore_24.png">We're
    hard at work creating new features for the console.  Stay tuned
    for updates!
  </div>
{/template}


/** Contact us. */
{template .contactUs}
  {@param? phonePasscode: string}
  {@param integrationEmail: string}
  {@param supportEmail: string}
  {@param announcementsEmail: string}
  {@param supportPhoneNumber: string}
  <div id="domain-registrar-contact-us" class="{css('item')}">
    <h1>Contact us</h1>
    <p>Our support team can assist you with any technical or operational
      questions you may have regarding our registry services.

    <table>
      <tr class="{css('kd-settings-pane-section')}">
        <td>
          <label class="{css('setting-label')}">Email</label>
        </td>
        <td class="{css('setting')}">
          <p>
            <a href="mailto:{$integrationEmail}">{$integrationEmail}</a><br>
          For help with OT&amp;E sandbox and certification, or new
            technical requirements for any of our new TLD launches.

          <p>
            <a href="mailto:{$supportEmail}">{$supportEmail}</a><br>
            For general purpose questions once you are integrated
            with our registry system.  If the issue is urgent, please put
            &quot;Urgent&quot; in the email title.

          <p class="{css('description')}">Note: You may receive occasional service
            announcements
            via <strong>{$announcementsEmail}</strong>.  You
            will not be able to reply to those messages.

      <tr><td colspan="2"><hr>
      <tr class="{css('kd-settings-pane-section')}">
        <td>
          <label class="{css('setting-label')}">Phone</label>
          <span class="{css('description')}">For general support inquiries 24x7</span>
        </td>
        <td class="{css('setting')}">
          <p>Please be ready with your account name and telephone passcode
            when contacting us by phone.

          <p>Your telephone passcode
            is: <span id="domain-registrar-phone-passcode">
              {if (isNonnull($phonePasscode))}
                {$phonePasscode}
              {else}
                <em>pending allocation</em>
              {/if}
            </span>

          <p>Call us at:
          <p id="registry-phone"><a href="tel:{$supportPhoneNumber}">{$supportPhoneNumber}</a>
        </td>
    </table>
  </div>
{/template}


/** Resources and billing links. */
{template .resources}
  {@param? driveFolderId: string}
  {@param technicalDocsUrl: string}
  <div id="domain-registrar-resources">
    <h1>Resources &amp; billing</h1>
    <p>
      The registry system uses <strong>Google Drive</strong> to share
      important documentation.
    <h2><img src="/assets/images/folder.png">TLD information</h2>
    <p>
      Find onboarding FAQs &amp; technical documentation here:
      <br><br>
      <a class="{css('kd-button')} {css('kd-button-submit')}"
         href="{$technicalDocsUrl}"
         target="_blank" rel="noopener">View TLD information on Google Drive</a>
    <h2><img src="/assets/images/folder.png">Billing details</h2>
    <p>
      Find information on all transaction activity behind your monthly invoices in this folder.
    <p>
      {if (isNonnull($driveFolderId))}
        <a id="reg-resources-driveLink"
           class="{css('kd-button')} {css('kd-button-submit')}"
           href="https://drive.google.com/drive/folders/{$driveFolderId}"
           target="_blank" rel="noopener">View billing details on Google Drive</a>
      {else}
        <em>Your billing folder is pending allocation.</em>
      {/if}
  </div>
{/template}


/** Loading page. */
{template .loading}
  <img alt="[Loading...]" src="/assets/images/loader4x.gif" width="87" height="87">
{/template}