Files
backroad/app/portainer/views/init/admin/initAdmin.html

212 lines
9.8 KiB
HTML

<div class="page-wrapper">
<!-- simple box -->
<div class="container simple-box">
<div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">
<!-- simple box logo -->
<div class="row">
<img ng-if="logo" ng-src="{{ logo }}" class="simple-box-logo" />
<img ng-if="!logo" src="~@/assets/images/logo_alt.svg" class="simple-box-logo" alt="Portainer" />
</div>
<!-- !simple box logo -->
<!-- init password panel -->
<div class="panel panel-default">
<div class="panel-body">
<!-- toggle -->
<div>
<a ng-click="togglePanel()" class="vertical-center">
<span>
<pr-icon icon="'chevron-down'" ng-if="state.showInitPassword" size="'lg'" class-name="'icon-primary'"></pr-icon>
<pr-icon icon="'chevron-right'" ng-if="!state.showInitPassword" size="'lg'" class-name="'icon-primary'"></pr-icon>
</span>
<span class="form-section-title">New Portainer installation</span>
</a>
</div>
<!-- !toggle -->
<!-- init password form -->
<form name="form" class="simple-box-form form-horizontal padding-top" ng-if="state.showInitPassword">
<!-- note -->
<div class="form-group">
<div class="col-sm-12">
<span class="small text-muted"> Please create the initial administrator user. </span>
</div>
</div>
<!-- !note -->
<!-- username-input -->
<div class="form-group">
<label for="username" class="col-sm-4 control-label text-left"> Username </label>
<div class="col-sm-8">
<input type="text" class="form-control" id="username" ng-model="formValues.Username" placeholder="e.g. admin" />
</div>
</div>
<!-- !username-input -->
<!-- new-password-input -->
<div class="form-group">
<label for="password" class="col-sm-4 control-label text-left">Password</label>
<div class="col-sm-8">
<input type="password" class="form-control" ng-model="formValues.Password" id="password" name="password" ng-minlength="requiredPasswordLength" auto-focus />
</div>
</div>
<!-- !new-password-input -->
<!-- confirm-password-input -->
<div class="form-group">
<label for="confirm_password" class="col-sm-4 control-label text-left">Confirm password</label>
<div class="col-sm-8">
<div class="input-group">
<input type="password" class="form-control" ng-model="formValues.ConfirmPassword" id="confirm_password" />
<span class="input-group-addon !rounded-r-[5px]">
<pr-icon ng-if="form.password.$viewValue !== '' && form.password.$viewValue === formValues.ConfirmPassword" icon="'check'" mode="'success'"></pr-icon>
<pr-icon ng-if="form.password.$viewValue === '' || form.password.$viewValue !== formValues.ConfirmPassword" icon="'x'" mode="'danger'"></pr-icon>
</span>
</div>
</div>
</div>
<!-- !confirm-password-input -->
<!-- note -->
<div class="form-group">
<div class="col-sm-12 text-warning">
<p class="vertical-center">
<pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon>
<span>The password must be at least {{ requiredPasswordLength }} characters long.</span>
<pr-icon mode="'success'" icon="'check'" ng-if="form.password.$valid && formValues.Password"></pr-icon>
</p>
</div>
</div>
<!-- !note -->
<!-- actions -->
<div class="form-group">
<div class="col-sm-12">
<button
type="submit"
class="btn btn-primary btn-sm"
ng-disabled="state.actionInProgress || form.$invalid || !formValues.Password || !formValues.ConfirmPassword || form.password.$viewValue !== formValues.ConfirmPassword"
ng-click="createAdminUser()"
button-spinner="state.actionInProgress"
>
<span ng-hide="state.actionInProgress">Create user</span>
<span ng-show="state.actionInProgress">Creating user...</span>
</button>
</div>
</div>
<!-- !actions -->
<!-- enableTelemetry-->
<div class="form-group">
<div class="col-sm-12 vertical-center">
<input type="checkbox" name="toggle_enableTelemetry" ng-model="formValues.enableTelemetry" />
<span class="text-muted small"
>Allow collection of anonymous statistics. You can find more information about this in our
<a class="hyperlink" href="https://www.portainer.io/documentation/in-app-analytics-and-privacy-policy/" target="_blank">privacy policy</a>.</span
>
</div>
</div>
<!-- !enableTelemetry-->
</form>
<!-- !init password form -->
</div>
</div>
<!-- !init password panel -->
<!-- restore backup panel -->
<div class="panel panel-default">
<div class="panel-body">
<!-- toggle -->
<div>
<a ng-click="togglePanel()" data-cy="init-installPortainerFromBackup" class="vertical-center">
<span
><pr-icon icon="'chevron-down'" ng-if="state.showRestorePortainer" size="'lg'" class-name="'icon-primary'"></pr-icon>
<pr-icon icon="'chevron-right'" ng-if="!state.showRestorePortainer" size="'lg'" class-name="'icon-primary'"></pr-icon
></span>
<span class="form-section-title">Restore Portainer from backup</span>
</a>
</div>
<!-- !toggle -->
<!-- restore form -->
<form class="simple-box-form form-horizontal padding-top" ng-if="state.showRestorePortainer">
<!-- note -->
<div class="form-group">
<div class="col-sm-9">
<span class="small text-muted">
This will restore the Portainer metadata which contains information about the environments, stacks and applications, as well as the configured users.
</span>
</div>
</div>
<box-selector slim="true" options="restoreOptions" value="formValues.restoreFormType" on-change="(onChangeRestoreType)" radio-name="'restore-type'"></box-selector>
<div class="form-group">
<div class="col-sm-12">
<span class="small text-muted"> You can upload a backup file from your computer. </span>
</div>
</div>
<!-- !note -->
<!-- select-file-input -->
<div class="form-group">
<div class="col-sm-12 vertical-center">
<button
class="btn btn-sm btn-primary"
ngf-select
accept=".gz,.encrypted"
ngf-accept="'application/x-tar,application/x-gzip'"
ng-model="formValues.BackupFile"
auto-focus
data-cy="init-selectBackupFileButton"
>Select file</button
>
<span class="space-left vertical-center">
{{ formValues.BackupFile.name }}
<pr-icon icon="'x-circle'" class-name="'icon-danger'" ng-if="!formValues.BackupFile"></pr-icon>
</span>
</div>
</div>
<!-- !select-file-input -->
<!-- password-input -->
<div class="form-group">
<label for="password" class="col-sm-3 control-label text-left">
Password
<portainer-tooltip
message="'If the backup is password protected, provide the password in order to extract the backup file, otherwise this field can be left empty.'"
></portainer-tooltip>
</label>
<div class="col-sm-4">
<input type="password" class="form-control" ng-model="formValues.Password" id="password" data-cy="init-backupPasswordInput" />
</div>
</div>
<!-- !password-input -->
<!-- note -->
<div class="form-group">
<div class="col-sm-12">
<span class="small text-muted"> You are about to restore Portainer from this backup. </span>
</div>
<div class="col-sm-12">
<span class="small text-muted"> After restoring has completed, please log in as a user that was known by the Portainer that was restored. </span>
</div>
</div>
<!-- !note -->
<!-- actions -->
<div class="form-group">
<div class="col-sm-12">
<button
type="submit"
class="btn btn-primary btn-sm"
ng-disabled="!formValues.BackupFile || state.backupInProgress"
ng-click="uploadBackup()"
button-spinner="state.backupInProgress"
data-cy="init-restorePortainerButton"
>
<span ng-hide="state.backupInProgress">Restore Portainer</span>
<span ng-show="state.backupInProgress">Restoring Portainer...</span>
</button>
</div>
</div>
<!-- !actions -->
</form>
<!-- !restore backup form -->
</div>
</div>
<!-- !restore backup panel -->
</div>
</div>
<!-- !simple box -->
</div>