<?php
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
?>
    <div class="sync-login-wrap">
        <div class="login-header" ng-show="showCredsForm || upgradeProcessError">
            <img class="logo-img"
                 src="<?php echo $this->basePath();?>/pub/images//magento-logo.svg" alt="Magento"/>
            <span>Marketplace</span>
        </div>
        <div class="messages">
            <div ng-show="saveAuthJson.result.success === false && saveAuthJson.result !== undefined"
                 class="message message-error error">
                            <span class="message-text">
                                {{saveAuthJson.result.message}}
                            </span>
            </div>
        </div>
        <div class="message message-error" ng-show="upgradeProcessError">
            <span class="message-text" ng-bind-html="upgradeProcessErrorMessage"></span>
        </div>
        <form name="auth"
              role="form"
              ng-show="showCredsForm"
            >
            <fieldset class="fieldset">
                <legend ng-show="errors==false" class="legend">
                    <span>To upgrade purchases, enter your access keys</span>
                </legend>
                <br/>
                <table>
                    <tr>
                        <th>Need to find your keys?</th>
                    </tr>
                    <tr>
                        <td>1. Go to your
                            <a href="https://marketplace.magento.com"
                               target="_blank">Magento Marketplace account page</a>.
                        </td>
                    </tr>
                    <tr>
                        <td>2. On the "Access keys" page, copy your public and private keys.</td>
                    </tr>
                    <tr>
                        <td>3. Enter keys below:</td>
                    </tr>
                </table>
                <div class="row form-row">
                    <div class="col-m-12">
                        <label for="username" class="form-label required">Public Key</label>
                    </div>
                    <div class="col-m-12">
                        <input id="username"
                               class="form-el-input"
                               type="text"
                               name="username"
                               ng-model="user.username"
                               ng-maxlength="40"
                               ng-class="{ 'invalid' : (auth.username.$error.required
                                               && !auth.username.$pristine)
                                               || (auth.username.$error.required && user.submitted) }"
                               autofocus
                               required
                            >
                        <div class="error-container">
                            This is a required field.
                        </div>
                    </div>
                </div>
                <div class="row form-row">
                    <div class="col-m-12">
                        <label for="token" class="form-label required">Private Key</label>
                    </div>
                    <div class="col-m-12">
                        <input id="password"
                               class="form-el-input"
                               type="password"
                               name="password"
                               ng-model="user.password"
                               ng-maxlength="40"
                               ng-class="{ 'invalid' : (auth.password.$error.required
                                               && !auth.password.$pristine)
                                               || (auth.password.$error.required && user.submitted) }"
                               required
                            >
                        <div class="error-container">
                            This is a required field.
                        </div>
                    </div>
                </div>
                <div class="form-actions">
                    <div class="actions">
                        <button ng-click="saveAuthJson()" class="btn btn-large btn-prime">
                            <span>Submit</span>
                        </button>
                    </div>
                </div>
            </fieldset>
        </form>
    </div>