143 lines
6.1 KiB
HTML
143 lines
6.1 KiB
HTML
<div class="page-wrapper">
|
|
<!-- login box -->
|
|
<div class="simple-box container">
|
|
<div class="col-sm-4 col-sm-offset-4">
|
|
<!-- login box logo -->
|
|
<div class="row">
|
|
<img ng-if="!ctrl.logo" src="~@/assets/images/logo_alt.svg" class="simple-box-logo" alt="Portainer" />
|
|
<img ng-if="ctrl.logo" ng-src="{{ ctrl.logo }}" class="simple-box-logo" />
|
|
</div>
|
|
<!-- !login box logo -->
|
|
|
|
<div class="row p-5 text-center">
|
|
<p class="text-xl">Log in to your account</p>
|
|
<p class="text-md text-muted fw-bold">Welcome back! Please enter your details</p>
|
|
</div>
|
|
|
|
<!-- login panel -->
|
|
<div class="panel panel-default" ng-if="!ctrl.state.loginInProgress">
|
|
<div class="panel-body">
|
|
<!-- login form -->
|
|
<form class="simple-box-form form-horizontal">
|
|
<div class="form-group">
|
|
<div class="col-sm-12" style="display: flex; justify-content: center" ng-if="ctrl.state.showOAuthLogin">
|
|
<a ng-href="{{ ctrl.OAuthLoginURI }}">
|
|
<div class="btn btn-primary btn-lg btn-block" ng-if="ctrl.state.OAuthProvider === 'Microsoft'">
|
|
<pr-icon icon="'svg-microsoft'"></pr-icon>
|
|
Login with Microsoft
|
|
</div>
|
|
<div class="btn btn-primary btn-lg btn-block" ng-if="ctrl.state.OAuthProvider === 'Google'">
|
|
<pr-icon icon="'svg-google'"></pr-icon>
|
|
Login with Google
|
|
</div>
|
|
<div class="btn btn-primary btn-lg btn-block" ng-if="ctrl.state.OAuthProvider === 'Github'">
|
|
<pr-icon icon="'svg-github'"></pr-icon>
|
|
Login with GitHub
|
|
</div>
|
|
<div class="btn btn-primary btn-lg btn-block" ng-if="ctrl.state.OAuthProvider === 'OAuth'">
|
|
<pr-icon icon="'log-in'"></pr-icon>
|
|
Login with OAuth
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- divider -->
|
|
<div class="form-group" ng-if="ctrl.state.showOAuthLogin">
|
|
<div class="col-sm-12" style="display: flex; align-items: center; justify-content: center">
|
|
<div class="striketext small text-muted" style="display: flex; align-items: center; justify-content: center; width: 90%">or</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- use internal auth button -->
|
|
<div class="form-group" ng-if="ctrl.state.showOAuthLogin && !ctrl.state.showStandardLogin">
|
|
<div class="col-sm-12" style="display: flex; justify-content: center">
|
|
<div class="btn btn-primary btn-md btn-block" style="margin-left: 2px" ng-click="ctrl.toggleStandardLogin()"> Use internal authentication </div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- !username input -->
|
|
<div ng-if="ctrl.state.showStandardLogin">
|
|
<div class="pb-2">Username</div>
|
|
<input
|
|
id="username"
|
|
type="text"
|
|
class="form-control"
|
|
name="username"
|
|
ng-model="ctrl.formValues.Username"
|
|
auto-focus
|
|
data-cy="auth-usernameInput"
|
|
placeholder="Enter your username"
|
|
/>
|
|
</div>
|
|
|
|
<!-- password input -->
|
|
<div ng-if="ctrl.state.showStandardLogin">
|
|
<div class="pb-2">Password</div>
|
|
<div class="relative">
|
|
<input
|
|
id="password"
|
|
ng-attr-type="{{ ctrl.state.passwordInputType }}"
|
|
class="form-control pr-10"
|
|
name="password"
|
|
ng-model="ctrl.formValues.Password"
|
|
autocomplete="off"
|
|
data-cy="auth-passwordInput"
|
|
placeholder="Enter your password"
|
|
ng-trim="false"
|
|
/>
|
|
<button
|
|
data-cy="auth-passwordInputToggle"
|
|
type="button"
|
|
ng-click="ctrl.toggleShowPassword()"
|
|
class="absolute right-0 top-0 flex h-[34px] w-[50px] items-center justify-center border-none bg-transparent"
|
|
tooltip-append-to-body="true"
|
|
tooltip-placement="top"
|
|
tooltip-class="portainer-tooltip"
|
|
uib-tooltip="{{ ctrl.state.passwordInputType === 'password' ? 'Show password' : 'Hide password' }}"
|
|
>
|
|
<pr-icon icon="ctrl.state.passwordInputType === 'password' ? 'eye-off' : 'eye'" size="'md'"></pr-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group overflow-auto" ng-if="ctrl.state.showStandardLogin">
|
|
<!-- login button -->
|
|
<div class="col-sm-12 d-flex py-1">
|
|
<button
|
|
type="submit"
|
|
class="btn btn-primary btn-lg btn-block"
|
|
ng-click="ctrl.authenticateUser()"
|
|
button-spinner="ctrl.state.loginInProgress"
|
|
ng-disabled="ctrl.state.loginInProgress"
|
|
data-cy="auth-loginButton"
|
|
>
|
|
<span ng-hide="ctrl.state.loginInProgress">Login</span>
|
|
<span ng-show="ctrl.state.loginInProgress">Login in progress...</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<!-- !login form -->
|
|
|
|
<!-- error message -->
|
|
<div class="pull-right" ng-if="ctrl.state.AuthenticationError">
|
|
<pr-icon icon="'alert-triangle'" mode="'danger'"></pr-icon>
|
|
<span class="small text-danger">{{ ctrl.state.AuthenticationError }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- !login panel -->
|
|
<div class="panel panel-default" ng-show="ctrl.state.loginInProgress">
|
|
<div class="panel-body">
|
|
<div class="form-group text-center">
|
|
<span class="small text-muted">Authentication in progress... <span button-spinner="true"></span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- !login box -->
|
|
</div>
|