Files
cloudron-box/src/setupaccount.html

150 lines
7.1 KiB
HTML
Raw Normal View History

2020-02-05 15:05:34 +01:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<meta http-equiv="Content-Security-Policy" content="default-src <%= apiOrigin %> 'unsafe-inline' 'unsafe-eval' 'self'; img-src <%= apiOrigin %> 'self'" />
<title>Cloudron Account Setup</title>
<link id="favicon" href="<%= apiOrigin %>/api/v1/cloudron/avatar" rel="icon" type="image/png">
<!-- Theme CSS -->
<link type="text/css" rel="stylesheet" href="/theme.css">
<!-- Custom Fonts -->
<link type="text/css" rel="stylesheet" href="/3rdparty/fontawesome/css/all.min.css">
<!-- jQuery-->
<script type="text/javascript" src="/3rdparty/js/jquery.min.js"></script>
2020-06-03 22:59:17 +02:00
<!-- async -->
<script type="text/javascript" src="/3rdparty/js/async-3.2.0.min.js"></script>
2020-02-05 15:05:34 +01:00
<!-- Bootstrap Core JavaScript -->
<script type="text/javascript" src="/3rdparty/js/bootstrap.min.js"></script>
<!-- Showdown (markdown converter) -->
<script type="text/javascript" src="/3rdparty/js/showdown-1.6.4.min.js"></script>
<script type="text/javascript" src="/3rdparty/js/showdown-target-blank.min.js"></script>
2020-02-05 15:05:34 +01:00
<!-- Angularjs scripts -->
<script type="text/javascript" src="/3rdparty/js/angular.min.js"></script>
<script type="text/javascript" src="/3rdparty/js/angular-loader.min.js"></script>
<!-- <script type="text/javascript" src="/3rdparty/js/angular-md5.min.js"></script> -->
<!-- <script type="text/javascript" src="/3rdparty/js/angular-ui-notification.js"></script> -->
<script type="text/javascript" src="/3rdparty/js/autofill-event.js"></script>
<!-- Angular directives for bootstrap https://angular-ui.github.io/bootstrap/ -->
<script type="text/javascript" src="/3rdparty/js/ui-bootstrap-tpls-1.3.3.min.js"></script>
<!-- Setup Application -->
<script type="text/javascript" src="/js/setupaccount.js"></script>
</head>
<body ng-app="Application" ng-controller="SetupAccountController">
<div class="layout-root" ng-show="initialized">
2020-02-05 15:05:34 +01:00
2020-02-05 16:12:52 +01:00
<div class="layout-content" ng-show="view === 'setup'">
2020-02-05 15:05:34 +01:00
<div class="card" style="padding: 20px; margin-top: 100px; max-width: 620px;">
<div class="row">
<div class="col-md-12" style="text-align: center;">
<img width="128" height="128" style="margin-top: -84px" src="<%= apiOrigin %>/api/v1/cloudron/avatar"/>
<br/>
2020-03-06 17:50:34 -08:00
<h1><small>Welcome to</small> {{ status.cloudronName || 'Cloudron' }}</h1>
<h3>Please setup your account</h3>
2020-02-05 15:05:34 +01:00
</div>
</div>
<br/>
<div class="row">
<div class="col-md-12">
2020-02-05 16:12:52 +01:00
<h4 class="has-error" ng-show="error">{{ error.message }}</h4>
2020-02-05 15:05:34 +01:00
</div>
</div>
<div class="row">
<div class="col-md-12">
2020-02-05 16:12:52 +01:00
<form name="setupAccountForm" ng-submit="onSubmit()" autocomplete="off">
<input type="password" style="display: none;">
<div class="form-group" ng-show="existingUsername">
<label class="control-label">Username</label>
<input type="text" class="form-control" ng-model="username" name="username" readonly required>
</div>
<div class="form-group" ng-class="{ 'has-error': ((setupAccountForm.username.$dirty && setupAccountForm.username.$invalid) || (!setupAccountForm.username.$dirty && error.username))}" ng-hide="existingUsername">
<label class="control-label">Username</label>
<div class="control-label" ng-show="setupAccountForm.username.$dirty && setupAccountForm.username.$invalid">
<small ng-show="setupAccountForm.username.$error.minlength">The username is too short</small>
<small ng-show="setupAccountForm.username.$error.maxlength">The username is too long</small>
<small ng-show="setupAccountForm.username.$dirty && setupAccountForm.username.$invalid">Not a valid username</small>
</div>
<input type="text" class="form-control" ng-model="username" name="username" id="inputUsername" required autofocus>
2020-02-05 15:05:34 +01:00
</div>
2020-02-05 16:12:52 +01:00
<div class="form-group">
<label class="control-label">Full Name</label>
<input type="displayName" class="form-control" ng-model="displayName" name="displayName" required>
2020-02-05 15:05:34 +01:00
</div>
2020-02-05 16:12:52 +01:00
<div class="form-group" ng-class="{ 'has-error': (setupAccountForm.password.$dirty && setupAccountForm.password.$invalid) }">
<label class="control-label">New Password</label>
<div class="control-label" ng-show="setupAccountForm.password.$dirty && setupAccountForm.password.$invalid">
<small ng-show="setupAccountForm.password.$dirty && setupAccountForm.password.$invalid">Password must be atleast 8 characters</small>
</div>
<input type="password" class="form-control" ng-model="password" name="password" ng-pattern="/^.{8,}$/" required>
2020-02-05 15:05:34 +01:00
</div>
2020-02-05 16:12:52 +01:00
<div class="form-group" ng-class="{ 'has-error': (setupAccountForm.passwordRepeat.$dirty && (password !== passwordRepeat)) }">
<label class="control-label">Repeat Password</label>
<div class="control-label" ng-show="setupAccountForm.passwordRepeat.$dirty && (password !== passwordRepeat)">
<small ng-show="setupAccountForm.passwordRepeat.$dirty && (password !== passwordRepeat)">Passwords don't match</small>
</div>
<input type="password" class="form-control" ng-model="passwordRepeat" name="passwordRepeat" required>
</div>
<button class="btn btn-primary btn-outline pull-right" type="submit" ng-disabled="busy || setupAccountForm.$invalid || password !== passwordRepeat"><i class="fa fa-circle-notch fa-spin" ng-show="busy"></i> Setup</button>
</form>
</div>
2020-02-05 15:05:34 +01:00
</div>
</div>
</div>
2020-02-05 16:12:52 +01:00
<div class="layout-content" ng-show="view === 'invalidToken'">
<div class="card" style="padding: 20px; margin-top: 100px; max-width: 620px;">
<div class="row">
<div class="col-md-12" style="text-align: center;">
<img width="128" height="128" style="margin-top: -84px" src="<%= apiOrigin %>/api/v1/cloudron/avatar"/>
<br/>
<h2>Invalid or Expired Invite Link</h2>
<br/>
<p>Contact your server admin to get a new invite link.</p>
</div>
</div>
</div>
</div>
<div class="layout-content" ng-show="view === 'done'">
<div class="card" style="padding: 20px; margin-top: 100px; max-width: 620px;">
<div class="row">
<div class="col-md-12" style="text-align: center;">
<img width="128" height="128" style="margin-top: -84px" src="<%= apiOrigin %>/api/v1/cloudron/avatar"/>
<br/>
<h2>Your Account is ready</h2>
<br/>
<a href="/" class="btn btn-primary">Open Dashboard</a>
</div>
</div>
</div>
2020-02-05 15:05:34 +01:00
</div>
<footer class="text-center ng-cloak">
2020-03-06 17:50:34 -08:00
<span class="text-muted" ng-bind-html="status.footer | markdown2html"></span>
<span class="version">v{{status.version}}</span>
2020-02-05 15:05:34 +01:00
</footer>
</div>
</body>
</html>