a76631ee3d
Poeple seem to forget wat those fields are for mid-way through filling the form. The place holder stuff is not overly obvious apparently. This makes it consistent with all our other UI nevertheless
119 lines
6.9 KiB
HTML
119 lines
6.9 KiB
HTML
<!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" />
|
|
|
|
<title> Cloudron Admin Setup </title>
|
|
|
|
<link id="favicon" href="/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/css/font-awesome.min.css">
|
|
|
|
<!-- jQuery-->
|
|
<script type="text/javascript" src="/3rdparty/js/jquery.min.js"></script>
|
|
|
|
<!-- Bootstrap Core JavaScript -->
|
|
<script type="text/javascript" src="/3rdparty/js/bootstrap.min.js"></script>
|
|
|
|
<!-- 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.min.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/setup.js"></script>
|
|
|
|
</head>
|
|
|
|
<body class="setup" ng-app="Application" ng-controller="SetupController">
|
|
|
|
<div class="main-container ng-cloak text-center" ng-show="provider === 'caas' && !setupToken">
|
|
<div class="row">
|
|
<div class="col-md-6 col-md-offset-3">
|
|
<h1> <i class="fa fa-frown-o fa-fw text-danger"></i> No setup token provided. </h1>
|
|
Please use the setup link for this cloudron.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main-container ng-cloak text-center" ng-show="busy">
|
|
<div class="row">
|
|
<div class="col-md-6 col-md-offset-3">
|
|
<i class="fa fa-circle-o-notch fa-spin fa-5x"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main-container ng-cloak" ng-show="initialized && !busy">
|
|
<div class="row">
|
|
<div class="col-md-6 col-md-offset-3">
|
|
<div class="card" style="max-width: none; padding: 20px;">
|
|
<form role="form" name="setupForm" ng-submit="activateCloudron()" novalidate>
|
|
<div class="row">
|
|
<div class="col-md-12 text-center">
|
|
<h1>Welcome to Cloudron</h1>
|
|
<h3>Setup Admin Account</h3>
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
<br/>
|
|
<div class="row">
|
|
<div class="col-md-6 col-md-offset-3">
|
|
<div class="form-group" ng-class="{ 'has-error': setupForm.displayName.$dirty && setupForm.displayName.$invalid }">
|
|
<label class="control-label">Full Name</label>
|
|
<input type="text" class="form-control" ng-model="account.displayName" id="inputDisplayName" name="displayName" placeholder="Full Name" required autocomplete="off" autofocus>
|
|
</div>
|
|
<div ng-show="account.requireEmail" class="form-group" ng-class="{ 'has-error': setupForm.email.$dirty && setupForm.email.$invalid }">
|
|
<label class="control-label">Email <sup><a href="https://cloudron.io/documentation/installation/#administrator-setup" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
|
|
<input type="email" class="form-control" ng-model="account.email" id="inputEmail" name="email" placeholder="Email" required autocomplete="off" tooltip-trigger="focus" uib-tooltip="This email address is local to your Cloudron and used for notifications and password reset. A valid email is also required for Let's Encrypt certificates.">
|
|
</div>
|
|
<div class="form-group" ng-class="{ 'has-error': (setupForm.username.$dirty && setupForm.username.$invalid) || (!setupForm.username.$dirty && error.username) }">
|
|
<label class="control-label">Username</label>
|
|
<p ng-show="!setupForm.username.$dirty && error.username">{{ error.username }}</p>
|
|
<input type="text" class="form-control" ng-model="account.username" id="inputUsername" name="username" placeholder="Username" ng-maxlength="512" ng-minlength="3" required autocomplete="off">
|
|
</div>
|
|
<div class="form-group" ng-class="{ 'has-error': setupForm.password.$dirty && setupForm.password.$invalid }">
|
|
<label class="control-label">Password</label>
|
|
<input type="password" class="form-control" ng-model="account.password" id="inputPassword" name="password" placeholder="Password" ng-pattern="/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,30}$/" required autocomplete="off">
|
|
<div class="control-label" ng-show="setupForm.password.$dirty && setupForm.password.$invalid">
|
|
<small ng-show="setupForm.password.$dirty && setupForm.password.$invalid">Password must be 8-30 character with at least one uppercase, one numeric and one special character</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
<br/>
|
|
<div class="row">
|
|
<div class="col-md-12 text-center">
|
|
<input type="submit" class="btn btn-success" ng-disabled="setupForm.$invalid" value="Done">
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
<div class="row">
|
|
<div class="col-md-12 text-center"><small>Looking to <a href="/restore.html">restore?</a></small></div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="text-center">
|
|
<span class="text-muted">©2018 <a href="https://cloudron.io" target="_blank">Cloudron</a></span>
|
|
<span class="text-muted"><a href="https://twitter.com/cloudron_io" target="_blank">Twitter <i class="fa fa-twitter"></i></a></span>
|
|
<span class="text-muted"><a href="https://forum.cloudron.io" target="_blank">Forum <i class="fa fa-comments"></i></a></span>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|