{% extends "guide.html" %}
{% load cms_tags staticfiles tacc_uri_shortcuts %}

{% block guide %}
  {% site_uri as site_uri %}
  <div class="row">
    <div class="col">
      <h2>
        Getting Started
      </h2>

      <p>
        Thank you for using TACC. If you are a new TACC user, this page will
        guide you through the process of setting up an account for use with this Portal. If you are an existing user that already has an active
        allocation and multi-factor authentication with the TACC Token App on
        your account, then you are ready to use this portal.
      </p>
    </div>
  </div>

  <div class="row">
    <div class="col">
      <h3 id="create-account">Creating an Account</h3>

      <p>
        Before you can access the Portal, you must first have an active
        account with TACC.
      </p>

      <div class="row">
        <div class="col">
          <p>
            <img
              class="img-fluid"
              src="{% static 'site_cms/img/guides/create-account.institute.png' %}"
              alt="Choosing institution from a form."
            />
          </p>
        </div>

        <div class="col">
          <p>If you have UT System Institution Credentials, you may create a TACC account from those by first selecting your institution at
            <a href="https://portal.tacc.utexas.edu/utdr" target="_blank" >portal.tacc.utexas.edu/utdr</a>.
          </p>
          <p>Otherwise, you may sign up for a new TACC account at
            <a href="https://portal.tacc.utexas.edu/account-request" target="_blank" >portal.tacc.utexas.edu/account-request</a>.
          </p>
        </div>
      </div>

      <div class="row">
        <div class="col">
          <p>
            <img
              class="img-fluid"
              src="{% static 'site_cms/img/guides/create-account.login.png' %}"
              alt="A login form."
            />
          </p>
        </div>

        <div class="col">
          <p>Log in with your institution credentials.</p>
        </div>
      </div>

      <div class="row">
        <div class="col">
          <p>
            <img
              class="img-fluid"
              src="{% static 'site_cms/img/guides/create-account.tacc.png' %}"
              alt="A button to create a TACC account."
            />
          </p>
        </div>

        <div class="col">
          <p>
            You should see a page that welcomes you with your name and
            institution. Click the
            <strong>I need to create a TACC Account</strong> button. Complete
            form. If you are eligible, check the
            <strong>I am PI Eligible</strong> box. You will receive an e-mail
            with a verification link. Please click on the link to verify your
            account.
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col">
      <h3 id="request-access-before-login">Requesting Access</h3>

      <p>
        Some projects require an allocation or other access be provided before login is possible.
      </p>

      <div class="row">
        <div class="col">
          <p>
            <i class="icon icon-multiple-coversation icon-multiple-conversation icon--as-image"></i>
          </p>
        </div>

        <div class="col">
          <p>
            If you are unable to login, please inquire whether your project requires allocation before login, and if so request that allocation from an appropriate member.
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col">
      <h3 id="first-login">Logging In for the First Time</h3>

      <p>
        Your initial login to the Portal begins an onboarding process.
      </p>

      <div class="row">
        <div class="col">
          <p>
            <img
              class="img-fluid"
              src="{% static 'site_cms/img/guides/login-portal.from-home.jpg' %}"
              alt="The Portal homepage with active login link."
            />
          </p>
        </div>

        <div class="col">
          <p>
            You may now log in to the Portal by navigating to
            <a href="{{ site_uri.absolute_uri }}login" target="_blank">{{ site_uri.absolute_uri }}login</a>.
          </p>
        </div>
      </div>

      <div class="row">
        <div class="col">
          <p>
            <img
              class="img-fluid"
              src="{% static 'site_cms/img/guides/login-tacc.form.jpg' %}"
              alt="The TACC login form."
            />
          </p>
        </div>

        <div class="col">
          <p>
            At the authentication page, please enter your TACC username and password.
          </p>
        </div>
      </div>

      <div class="row">
        <div class="col">
          <p>
            <img
              class="img-fluid"
              src="{% static 'site_cms/img/guides/login-tacc.approval.jpg' %}"
              alt="The TACC post-login authentication approval step."
            />
          </p>
        </div>

        <div class="col">
          <p>
            When asked, click the <strong>Always Approve</strong> button.
          </p>
        </div>
      </div>

      <div class="row">
        <div class="col">
          <p>
            <img
              class="img-fluid"
              src="{% static 'site_cms/img/guides/onboarding.sample-progress.jpg' %}"
              alt="A sample Portal account onboarding in progress."
            />
          </p>
        </div>

        <div class="col">
          <p>
            The Portal will display the Account Setup page. This page will
            verify that your account has passed several checks. These checks differ per portal, and may include:
          </p>
          <ul>
            <li>Multi-factor Authentication (MFA) with the TACC Token App</li>
            <li>Requesting access to Portal from system administrator</li>
            <li>Checking or requesting project membership</li>
            <li>Retrieving allocations for your account</li>
            <li>Creating storage systems for your account</li>
          </ul>
          <p>
            If you already meet these requirements, you will be forwarded to the
            Dashboard and you may proceed with
            <a href="#access-files">Accessing Your Files</a>.
            Otherwise, continue reading about
            <a href="#onboard-account">Onboarding Your Account</a>.
          </p>
        </div>
      </div>
    </div>
  </div>

  <h3 id="onboard-account">Onboarding Your Account</h3>
  <p>
    Your account will have a certain number of <a href="{{ site_uri.absolute_uri }}workbench/onboarding/setup" target="_blank">Account Onboarding</a> steps. Some of them require action from you while some are automated.
  </p>
  <ul>
    <li><a href="#setup-mfa">Multi-Factor Authentication</a></li>
    <li><a href="#request-access">Requesting Access</a></li>
    <li><a href="#check-project">Checking Project Membership</a></li>
    <li><a href="#other-steps">Other Steps</a></li>
  </ul>

  <div class="row">
    <div class="col">
      <h4 id="setup-mfa">Multi-Factor Authentication</h4>
      <p>
        Your account may need to have Multi-Factor Authentication (MFA) setup
        using the TACC Token App, available on the Google Play and iTunes
        stores.
      </p>

      <div class="row">
        <div class="col">
          <p>
            <img
              class="img-fluid"
              src="{% static 'site_cms/img/guides/onboarding-mfa.userwait.png' %}"
              alt="A sample Portal account onboarding with 'Multi-Factor Authentication' step pending action."
            />
          </p>
        </div>

        <div class="col">
          <p>
            If you have <em>already</em> set up MFA pairing through the TACC Token App, then click <strong>Confirm MFA Pairing</strong>.
          </p>
        </div>
      </div>

      <div class="row">
        <div class="col">
          <p>
            <img
              class="img-fluid"
              src="{% static 'site_cms/img/guides/onboarding-mfa.processing.png' %}"
              alt="A sample modal dialog UI explaining the next step of 'Multi-Factor Authentication'."
            />
          </p>
        </div>

        <div class="col">
          <p>
            If you have <em>not</em> set up MFA pairing through the TACC Token App, then set up multi-factor authentication in your
            <a href="https://portal.tacc.utexas.edu/account-profile" target="_blank">TACC Portal Account Profile</a
            >.
          </p>
        </div>
      </div>

      <div class="row">
        <div class="col">
          <p>
            <img
              class="img-fluid"
              src="{% static 'site_cms/img/guides/onboarding-mfa.apps.png' %}"
              alt="A illustration of a mobile phone, a temporary token on its screen, the TACC logo, and references to visit Apple's or Google's app marketplace."
            />
          </p>
        </div>

        <div class="col">
          <p>
            To set up multi-factor authentication, pair your
            <a href="https://portal.tacc.utexas.edu/account-profile" target="_blank">TACC Portal Account</a>
            with the TACC Token App.
          </p>
        </div>
      </div>

      <div class="row">
        <div class="col">
          <p>
            <img
              class="img-fluid"
              src="{% static 'site_cms/img/guides/onboarding-mfa.userwait.png' %}"
              alt="A sample Portal account onboarding with 'Multi-Factor Authentication' step in progress."
            />
          </p>
        </div>

        <div class="col">
          <p>
            Once you have completed MFA pairing with the TACC Token app, return to the
            <a href="{{ site_uri.absolute_uri }}workbench/onboarding/setup" target="_blank">Account Onboarding</a>.
          </p>
        </div>
      </div>

      <div class="row">
        <div class="col">
          <p>
            <img
              class="img-fluid"
              src="{% static 'site_cms/img/guides/onboarding-mfa.completed.png' %}"
              alt="A sample Portal account onboarding with 'Multi-Factor Authentication' step complete."
            />
          </p>
        </div>

        <div class="col">
          <p>
            Your account is now authenticated. You may proceed to the next step of the Account Onboarding.
          </p>
        </div>
      </div>

      <hr />

      <h4 id="request-access">Requesting Access</h4>
      <p>
        To use the Portal, you may need to have an active allocation on
        TACC resources. If you are PI eligible, you may request your own allocations. Alternatively (if you do not already have an active allocation), you may request access to an existing allocation during the
        <a href="{{ site_uri.absolute_uri }}workbench/onboarding/setup" target="_blank">Account Onboarding</a>
        process.
      </p>

      <div class="row">
        <div class="col">
          <p>
            <img
              class="img-fluid"
              src="{% static 'site_cms/img/guides/onboarding-access.userwait.png' %}"
              alt="A sample Portal account onboarding with 'Requesting Access' step pending action."
            />
          </p>
        </div>

        <div class="col">
          <p>
            If you are a new TACC user that does not have an active project, you may request to be added to one. Please click <strong>Request Portal Access</strong> in the Account Onboarding. A request to be added to an allocation will be generated on your behalf.
          </p>
        </div>
      </div>

      <div class="row">
        <div class="col">
          <p>
            <img
              class="img-fluid"
              src="{% static 'site_cms/img/guides/onboarding-access.staffwait.png' %}"
              alt="A sample Portal account onboarding with 'Requesting Access' step in progress."
            />
          </p>
        </div>

        <div class="col">
          <p>Your request will be reviewed by TACC staff. When you have been approved, you will receive an e-mail notification.</p>
        </div>
      </div>

      <div class="row">
        <div class="col">
          <p>
            <img
              class="img-fluid"
              src="{% static 'site_cms/img/guides/onboarding-access.completed.png' %}"
              alt="A sample Portal account onboarding with 'Requesting Access' step complete."
            />
          </p>
        </div>

        <div class="col">
          <p>
            Your account now has an allocation on the necessary TACC resources. You may proceed to the next step of the Account Onboarding.
          </p>
        </div>
      </div>

      <hr />

      <h4 id="check-project">Checking Project Membership</h4>
      <p>
        To use the Portal, you may need to have memebrship on a project. If you are PI eligible, you may request your own project. Alternatively, you may request to be added to a project through the
        <a href="{{ site_uri.absolute_uri }}workbench/onboarding/setup" target="_blank">Account Onboarding</a>.
      </p>

      <div class="row">
        <div class="col">
          <p>
            <img
              class="img-fluid"
              src="{% static 'site_cms/img/guides/onboarding-project.userwait.png' %}"
              alt="A sample Portal account onboarding with 'Checking Project Membership' step pending action."
            />
          </p>
        </div>

        <div class="col">
          <p>
            If you are a new TACC user that does not have an active project, you may request to be added to one. Please click <strong>Request Project Access</strong> in the Account Onboarding. A request to be added to a project will be generated on your behalf.
          </p>
        </div>
      </div>

      <div class="row">
        <div class="col">
          <p>
            <img
              class="img-fluid"
              src="{% static 'site_cms/img/guides/onboarding-project.staffwait.png' %}"
              alt="A sample Portal account onboarding with 'Checking Project Membership' step in progress."
            />
          </p>
        </div>

        <div class="col">
          <p>Your request will be reviewed by TACC staff. When you have been approved, you will receive an e-mail notification.</p>
        </div>
      </div>

      <div class="row">
        <div class="col">
          <p>
            <img
              class="img-fluid"
              src="{% static 'site_cms/img/guides/onboarding-project.completed.png' %}"
              alt="A sample Portal account onboarding with 'Checking Project Membership' step complete."
            />
          </p>
        </div>

        <div class="col">
          <p>
            Your account now has access to a project on the Portal. You may proceed to the next step of the Account Onboarding.
          </p>
        </div>
      </div>

      <hr />

      <h4 id="other-steps">Other Steps</h4>
      <p>
        Onboarding for the specific Portal you use may require additional <a href="{{ site_uri.absolute_uri }}workbench/onboarding/setup" target="_blank">Account Onboarding</a> steps, like:
      </p>
      <ul>
        <li>Retrieving Allocations</li>
        <li>Creating Storage Systems</li>
      </ul>

      <div class="row">
        <div class="col">
          <p>
            <img
              class="img-fluid"
              src="{% static 'site_cms/img/guides/onboarding.completed.jpg' %}"
              alt="A sample Portal account onboarding with all steps complete."
            />
          </p>
        </div>

        <div class="col">
          <p>
            Please follow the Account Onboarding until all steps are complete.
          </p>
          <p>
            Once your Account Onboarding is complete, you may click
            <strong>Access Dashboard</strong>, or navigate to the Dashboard with the now-enabled sidebar.
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col">
      <h3 id="access-files">Accessing Your Files</h3>

      <p>
        To access your personal files on the Portal, you will need to
        Authenticate with TACC using the TACC Token App.
      </p>

      <div class="row">
        <div class="col">
          <p>
            <img
              class="img-fluid"
              src="{% static 'site_cms/img/guides/files-access.navigation.png' %}"
              alt="The primary and secondary navigation within the Portal interface: 'Data Files' section is active, 'My Data (Frontera)' is active."
            />
          </p>
        </div>

        <div class="col">
          <p>
            In the Portal Dashboard, click the <strong>Data Files</strong> icon on the left navigation. You will be taken to <strong>My Data</strong>.
          </p>
        </div>
      </div>

      <div class="row">
        <div class="col">
          <p>
            <img
              class="img-fluid"
              src="{% static 'site_cms/img/guides/files-access.warning.png' %}"
              alt="A warning message about file access that suggests user to 'push their keys'."
            />
          </p>
        </div>

        <div class="col">
          <p>
            You will be asked to Authenticate with TACC Token before you are able to access your files. Click the <strong>Authenticate</strong> with <strong>TACC Token</strong> button.
          </p>
        </div>
      </div>

      <div class="row">
        <div class="col">
          <p>
            <img
              class="img-fluid"
              src="{% static 'site_cms/img/guides/files-access.form.png' %}"
              alt="A form with all of its fields autopoulated except for 'Password' and 'TACC Token'."
            />
          </p>
        </div>

        <div class="col">
          <p>
            In the window that appears, enter your password and a token from the TACC Token App. Then click <strong>Authenticate</strong>.
          </p>
        </div>
      </div>

      <div class="row">
        <div class="col">
          <p>
            <img
              class="img-fluid"
              src="{% static 'site_cms/img/guides/files-access.empty.png' %}"
              alt="The full Portal interface when viewing 'Data Files' → 'My Data (Frontera)' with no files."
            />
          </p>
        </div>

        <div class="col">
          <p>
            Upon success, you can access your personal files on <strong>My Data</strong>. If you are a first time user, then you may not have any files yet.
          </p>
        </div>
      </div>
    </div>
  </div>
{% endblock guide %}
