app/views/credentials.scala.html

@import com.gu.googleauth.UserIdentity
@import com.gu.janus.model.{AwsAccount, JanusData}
@import software.amazon.awssdk.services.sts.model.Credentials
@import java.time.Instant
@import play.api.Mode

@(expiry: Instant, accountsCredentials: List[(AwsAccount, Credentials)], user: UserIdentity, janusData: JanusData)(implicit mode: Mode, assetsFinder: AssetsFinder)

@import logic.Date

@main("Temporary credentials", Some(user), janusData) {
    <div class="container credentials">

        <div class="row">
            <h1 class="header orange-text">Credentials</h1>
            <p>
                These credentials will expire in @Date.formatInterval(expiry), at
                <span class="local-date" data-date="@Date.isoDateString(expiry)">@Date.formatTime(expiry)</span>.
            </p>
            <div class="editable-aws-profile copy-textarea">
                <div class="col s12 m4 l3 push-m8 push-l9">
                    <a class="copy-text--button copy-text--button__cta waves-effect waves-light btn-large" href="#">
                        Copy
                        <div class="copy-text__feedback">
                            <i class="material-icons copy-text--default">content_copy</i>
                            <i class="material-icons copy-text--confirm">done</i>
                            <i class="material-icons copy-text--warn">report_problem</i>
                        </div>
                    </a>

                    @if(accountsCredentials.size == 1) {
                        <div class="">
                            <div class="aws-profile__input input-field">
                                <input type="text" value="@accountsCredentials.head._1.authConfigKey" id="aws-profile-id" class="input--slim" />
                                <label for="first_name">AWS Profile name</label>
                            </div>
                        </div>
                    }

                </div>
                <div class="col s12 m8 l9 pull-m4 pull-l3">
                    <textarea class="textarea--code aws-profile-id" rows="3" wrap="off" readonly autofocus>@logic.ViewHelpers.shellCredentials(accountsCredentials)</textarea>
                </div>
            </div>
        </div>

        @accountsCredentials match {
            case (_, credentials) :: Nil => {
                <div class="row">
                    <div class="col s12 m7 l6">
                        <div class="card">
                            <div class="card-image">
                                <img src="@assetsFinder.path("images/secret-safe.jpg")" alt="keep it secret, keep it safe" />
                            </div>
                            <div class="card-content">
                                <p>These credentials grant access on your behalf. Treat them as you would your password.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col s12 m5 l6">
                        <ul class="collapsible collapsible--fixed-paragraphs" data-collapsible="accordion">
                            <li>
                                <div class="collapsible-header"><i class="material-icons">subject</i>Show raw credentials</div>
                                <div class="collapsible-body">
                                    <div>
                                    These are your temporary credentials. The normal way to use them is to configure an
                                        AWS profile as described above.
                                    </div>
                                    <form>
                                        <div>
                                            <label for="access_key">Access Key</label>
                                            <input readonly placeholder="Access Key" id="access_key" type="text" value="@credentials.accessKeyId">
                                        </div>
                                        <div>
                                            <label for="secret_key">Secret Key</label>
                                            <input readonly id="secret_key" type="text" value="@credentials.secretAccessKey">
                                        </div>
                                        <div>
                                            <label for="session_token">Session Token</label>
                                            <input readonly id="session_token" type="text" value="@credentials.sessionToken">
                                        </div>
                                    </form>
                                </div>
                            </li>
                            <li>
                                <div class="collapsible-header"><i class="material-icons">lock_open</i>Export to shell</div>
                                <div class="collapsible-body copy-textarea">
                                    <div>
                                    If you don't use named AWS profiles you can export the credentials on your shell.
                                        The normal way to use them is to configure an AWS profile as described above.
                                    </div>
                                    <div>
                                        <a class="copy-text--button copy-text--button__small grey lighten-1" href="#"><i class="material-icons copy-text--default">content_copy</i> copy</a>
                                        <i class="material-icons copy-text--confirm">done</i>
                                        <i class="material-icons copy-text--warn">report_problem</i>
                                        <textarea class="textarea--code" rows="3" wrap="off" readonly> export AWS_ACCESS_KEY_ID=@credentials.accessKeyId
 export AWS_SECRET_ACCESS_KEY=@credentials.secretAccessKey
 export AWS_SESSION_TOKEN=@credentials.sessionToken
 export AWS_SECURITY_TOKEN=@credentials.sessionToken
</textarea>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            }
            case _ => {
                <div class="row">
                    <div class="col m12 l6 push-l6">
                        <div class="card grey lighten-3">
                            <div class="card-content">
                                <ul class="collection">
                                @for((account, _) <- accountsCredentials) {
                                    <li class="collection-item">
                                        @account.name
                                    <span class="right grey-text">@account.authConfigKey</span>
                                    <br class="clearfix">
                                    </li>
                                }
                                </ul>
                                <p>
                                To customise profile names or export credentials directly, request accounts separately.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col m12 l6 pull-l6">
                        <div class="card">
                            <div class="card-image">
                                <img src="@assetsFinder.path("images/secret-safe.jpg")" alt="keep it secret, keep it safe" />
                            </div>
                            <div class="card-content">
                                <p>These credentials grant access on your behalf. Treat them as you would your password.</p>
                            </div>
                        </div>
                    </div>
                </div>
            }
        }
    </div>
}