304 lines
22 KiB
HTML
304 lines
22 KiB
HTML
|
|
<!-- Modal install app -->
|
|
<div class="modal fade appstore-install" id="appInstallModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<img ng-src="{{appInstall.app.iconUrl}}" onerror="this.onerror=null;this.src='img/appicon_fallback.png'" class="app-icon"/>
|
|
<h3 class="appstore-install-title" title="Version {{ appInstall.app.manifest.version }}">{{ appInstall.app.manifest.title }} <span class="badge badge-danger" ng-show="appInstall.app.publishState === 'testing'">Testing</span></h3>
|
|
<br/>
|
|
<span class="appstore-install-meta"><a href="{{ appInstall.app.manifest.website }}" target="_blank">{{ appInstall.app.manifest.author }}</a></span>
|
|
<br/>
|
|
<span class="appstore-install-meta">Last updated {{ appInstall.app.creationDate | prettyDate }}</span>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="collapse" id="collapseInstallForm" data-toggle="false">
|
|
<form role="form" name="appInstallForm" ng-submit="appInstall.submit()" autocomplete="off">
|
|
<div class="has-error text-center" ng-show="appInstall.error.other" ng-bind-html="appInstall.error.other"></div>
|
|
<div class="form-group" ng-class="{ 'has-error': (appInstallForm.location.$dirty && appInstallForm.location.$invalid) || (!appInstallForm.location.$dirty && appInstall.error.location) }">
|
|
<label class="control-label" for="appInstallLocationInput">Location {{ appInstall.error.location }} </label>
|
|
<div class="input-group form-inline">
|
|
<input type="text" class="form-control" ng-model="appInstall.location" id="appInstallLocationInput" name="location" placeholder="Leave empty to use bare domain" autofocus>
|
|
<div class="input-group-addon">
|
|
{{ !appInstall.location ? '' : (config.isCustomDomain ? '.' : '-') }}{{ config.fqdn }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="has-error text-center" ng-show="appInstall.error.port">{{ appInstall.error.port }}</div>
|
|
<div ng-repeat="(env, info) in appInstall.portBindingsInfo">
|
|
<ng-form name="portInfo_form">
|
|
<div class="form-group" ng-class="{ 'has-error': (!appInstallForm.itemName{{$index}}.$dirty && appInstall.error.port) || (portInfo_form.itemName{{$index}}.$dirty && portInfo_form.itemName{{$index}}.$invalid) }">
|
|
<label class="control-label" for="inputPortInfo{{env}}"><input type="checkbox" ng-model="appInstall.portBindingsEnabled[env]"> {{ info.description }} ({{ hostPortMin }} - {{ hostPortMax }})</label>
|
|
<input type="number" class="form-control" ng-model="appInstall.portBindings[env]" ng-disabled="!appInstall.portBindingsEnabled[env]" id="inputPortInfo{{env}}" later-name="itemName{{$index}}" min="{{hostPortMin}}" max="{{hostPortMax}}" required>
|
|
</div>
|
|
</ng-form>
|
|
</div>
|
|
|
|
<div class="form-group" ng-show="appInstall.app.manifest.singleUser">
|
|
<label class="control-label">User</label>
|
|
<select class="form-control" ng-model="appInstall.accessRestrictionSingleUser" ng-options="user as (user.username || user.email) for user in users track by user.id" ng-required="appInstall.app.manifest.singleUser"></select>
|
|
</div>
|
|
|
|
<div class="form-group" ng-show="appInstall.app.manifest.customAuth">
|
|
<label class="control-label">Access control</label>
|
|
<p>
|
|
This app has it's own access control and does not integrate with Cloudron Auth.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="form-group" ng-hide="appInstall.app.manifest.singleUser || appInstall.app.manifest.customAuth">
|
|
<label class="control-label">Access control</label>
|
|
<div class="radio">
|
|
<label>
|
|
<input type="radio" ng-model="appInstall.accessRestrictionOption" value="any">
|
|
All users
|
|
</label>
|
|
</div>
|
|
<div class="radio">
|
|
<label>
|
|
<input type="radio" ng-model="appInstall.accessRestrictionOption" value="groups" ng-disabled="groups.length <= 1">
|
|
Restrict to groups
|
|
</label>
|
|
</div>
|
|
<div ng-show="groups.length <= 1">No groups available. Create groups to restrict access to them first.</div>
|
|
<div class="has-error" ng-show="appInstall.accessRestrictionOption === 'groups' && !appInstall.isAccessRestrictionValid()">Select at least one group</div>
|
|
<div>
|
|
<div>
|
|
<span ng-repeat="group in groups | ignoreAdminGroup">
|
|
<button class="btn btn-default" type="button" ng-disabled="appInstall.accessRestrictionOption !== 'groups'" ng-click="appInstall.toggleGroup(group);" ng-class="{ 'btn-primary': (appInstall.accessRestriction.groups && appInstall.accessRestriction.groups.indexOf(group.id) !== -1) }">{{ group.name }}</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="radio" ng-show="appInstall.needsOAuthProxy">
|
|
<label>
|
|
<input type="radio" ng-model="appInstall.accessRestrictionOption" value="unrestricted">
|
|
Unrestricted
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<br/>
|
|
|
|
<div class="hide">
|
|
<label class="control-label" for="appInstallCertificateInput" ng-show="config.isCustomDomain">Certificate (optional)</label>
|
|
<div class="has-error text-center" ng-show="appInstall.error.cert && config.isCustomDomain">{{ appInstall.error.cert }}</div>
|
|
<div class="form-group" ng-class="{ 'has-error': !appInstallForm.certificate.$dirty && appInstall.error.cert }" ng-show="config.isCustomDomain">
|
|
<div class="input-group">
|
|
<input type="file" id="appInstallCertificateFileInput" style="display:none"/>
|
|
<input type="text" class="form-control" placeholder="Certificate" ng-model="appInstall.certificateFileName" id="appInstallCertificateInput" name="certificate" onclick="getElementById('appInstallCertificateFileInput').click();" style="cursor: pointer;" ng-required="appInstall.keyFileName">
|
|
<span class="input-group-addon">
|
|
<i class="fa fa-upload" onclick="getElementById('appInstallCertificateFileInput').click();"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group" ng-class="{ 'has-error': !appInstallForm.key.$dirty && appInstall.error.cert }" ng-show="config.isCustomDomain">
|
|
<div class="input-group">
|
|
<input type="file" id="appInstallKeyFileInput" style="display:none"/>
|
|
<input type="text" class="form-control" placeholder="Key" ng-model="appInstall.keyFileName" id="appInstallKeyInput" name="key" onclick="getElementById('appInstallKeyFileInput').click();" style="cursor: pointer;" ng-required="appInstall.certificateFileName">
|
|
<span class="input-group-addon">
|
|
<i class="fa fa-upload" onclick="getElementById('appInstallKeyFileInput').click();"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<input class="ng-hide" type="submit" ng-disabled="appInstallForm.$invalid || busy"/>
|
|
</form>
|
|
</div>
|
|
<div class="collapse" id="collapseMediaLinksCarousel" data-toggle="false">
|
|
<div ng-repeat="mediaLink in appInstall.mediaLinks" class="slick-item" style="background-image: url('{{mediaLink}}');" ng-show="appInstall.mediaLinks.length == 1"></div>
|
|
<slick init-onload="true" current-index="0" autoplay="true" arrows="false" autoplay-speed="2000" data="appInstall.mediaLinks" ng-show="appInstall.mediaLinks.length > 1">
|
|
<div ng-repeat="mediaLink in appInstall.mediaLinks" class="slick-item" style="background-image: url('{{mediaLink}}');"></div>
|
|
</slick>
|
|
<div class="appstore-install-description">
|
|
<div ng-bind-html="appInstall.app.manifest.description | markdown2html"></div>
|
|
</div>
|
|
</div>
|
|
<div class="collapse" id="collapseResourceConstraint" data-toggle="false">
|
|
<h4 class="text-danger">This Cloudron is running low on resources.</h4>
|
|
<p>Please upgrade to a bigger plan. Alternately, free up resources by uninstalling unused applications.</p>
|
|
</div>
|
|
<div class="collapse" id="postInstallMessage" data-toggle="false">
|
|
<div class="appstore-install-description">
|
|
<div ng-bind-html="appInstall.app.manifest.postInstallMessage | markdown2html"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" ng-show="appInstall.state !== 'postInstall'" data-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-default" ng-show="appInstall.state === 'postInstall'" data-dismiss="modal" ng-click="appInstall.switchToAppsView()">Got it</button>
|
|
<button type="button" class="btn btn-success" ng-show="config.provider === 'caas' && user.admin && appInstall.state === 'resourceConstraint'" ng-click="showRequestUpgrade()">Upgrade Cloudron</button>
|
|
<button type="button" class="btn btn-danger" ng-show="(config.isDev || config.provider !== 'caas') && user.admin && appInstall.state === 'resourceConstraint'" ng-click="appInstall.showForm(true)">Install anyway</button>
|
|
<button type="button" class="btn btn-success" ng-show="appInstall.state === 'appInfo' && user.admin" ng-click="appInstall.showForm()">Install</button>
|
|
<button type="button" class="btn btn-success" ng-show="appInstall.state === 'installForm' && user.admin" ng-click="appInstall.submit()" ng-disabled="appInstallForm.$invalid || appInstall.busy"><i class="fa fa-spinner fa-pulse" ng-show="appInstall.busy"></i> Install</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal feedback -->
|
|
<div class="modal fade" id="feedbackModal" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">App Feedback</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<fieldset>
|
|
<form name="feedbackForm" ng-submit="feedback.submit()">
|
|
<div ng-show="feedback.error" class="text-danger text-bold">{{feedback.error}}</div>
|
|
<textarea class="form-control" id="feedbackDescriptionTextarea" cols="3" ng-model="feedback.description" ng-minlength="1" required placeholder="Name, Category, Links ..." autofocus></textarea>
|
|
<input class="ng-hide" type="submit" ng-disabled="feedbackForm.$invalid || feedback.busy"/>
|
|
</form>
|
|
</fieldset>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-success" ng-click="feedback.submit()" ng-disabled="feedbackForm.$invalid || feedback.busy"><i class="fa fa-fw fa-paper-plane"></i> Submit</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal app not found -->
|
|
<div class="modal fade" id="appNotFoundModal" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">App not found</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
There is no such app <b>{{ appNotFound.appId }}</b><span ng-show="appNotFound.version"> with version <b>{{ appNotFound.version }}</b></span>.
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal appstore login -->
|
|
<div class="modal fade" id="appstoreLoginModal" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" ng-hide="appstoreLogin.register">Login to the Cloudron App Store</h4>
|
|
<h4 class="modal-title" ng-show="appstoreLogin.register">Sign up at the Cloudron App Store</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<center>
|
|
<img ng-src="{{ config.webServerOrigin }}/img/logo.png" width="128px" height="128px"/>
|
|
<br/><br/>
|
|
<p>For using the Cloudron App Store, you have to login with your <a href="{{ config.webServerOrigin }}" target="_blank">cloudron.io</a> account.</p>
|
|
<br/>
|
|
<small class="text-danger" ng-show="appstoreLogin.error.generic">{{ appstoreLogin.error.generic }}</small>
|
|
</center>
|
|
|
|
<form name="appstoreLoginForm" role="form" novalidate ng-submit="appstoreLogin.submit()" autocomplete="off">
|
|
<input type="password" style="display: none;">
|
|
|
|
<div class="form-group" ng-class="{ 'has-error': (appstoreLoginForm.email.$dirty && appstoreLoginForm.email.$invalid) || appstoreLogin.error.generic }">
|
|
<label class="control-label">Email Address</label>
|
|
<input type="email" class="form-control" ng-model="appstoreLogin.email" id="inputAppstoreLoginEmail" name="email" required autofocus>
|
|
<div class="control-label" ng-show="(!appstoreLoginForm.email.$dirty && appstoreLogin.error.email) || (appstoreLoginForm.email.$dirty && appstoreLoginForm.email.$invalid) || appstoreLogin.error.email">
|
|
<small ng-show="appstoreLoginForm.email.$error.required">A valid email address is required</small>
|
|
<small ng-show="(appstoreLoginForm.email.$dirty && appstoreLoginForm.email.$invalid) && !appstoreLoginForm.email.$error.required">The Email address is not valid</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group" ng-class="{ 'has-error': (!appstoreLoginForm.password.$dirty && appstoreLogin.error.password) || (appstoreLoginForm.password.$dirty && appstoreLoginForm.password.$invalid) || appstoreLogin.error.generic }">
|
|
<label class="control-label">Password</label>
|
|
<input type="password" class="form-control" ng-model="appstoreLogin.password" id="inputAppstoreLoginPassword" name="password" required>
|
|
<div class="control-label" ng-show="(!appstoreLoginForm.password.$dirty && appstoreLogin.error.password) || (appstoreLoginForm.password.$dirty && appstoreLoginForm.password.$invalid)">
|
|
<small ng-show=" appstoreLoginForm.password.$dirty && appstoreLoginForm.password.$invalid">A password is required</small>
|
|
<small ng-show="!appstoreLoginForm.password.$dirty && appstoreLogin.error.password">Wrong password</small>
|
|
</div>
|
|
</div>
|
|
|
|
<input class="ng-hide" type="submit" ng-disabled="appstoreLoginForm.$invalid"/>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<a class="pull-left" href="" ng-click="appstoreLogin.register = true" ng-hide="appstoreLogin.register">No Account yet?</a>
|
|
<a class="pull-left" href="" ng-click="appstoreLogin.register = false" ng-show="appstoreLogin.register">Already an Account?</a>
|
|
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-success" ng-click="appstoreLogin.submit()" ng-disabled="appstoreLoginForm.$invalid || appstoreLogin.busy">
|
|
<i class="fa fa-spinner fa-pulse" ng-show="appstoreLogin.busy"></i> <span ng-hide="appstoreLogin.register">Login</span><span ng-show="appstoreLogin.register">Sign up</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="row-no-margin">
|
|
<div class="col-md-2">
|
|
</div>
|
|
<div class="col-md-8 col-same-height">
|
|
<br/>
|
|
<h1>Available Applications</h1>
|
|
<br/>
|
|
</div>
|
|
<div class="col-md-2 col-same-height" style="float: right;">
|
|
<br/>
|
|
<div class="appstore-search">
|
|
<form ng-submit="search()">
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" placeholder="Search for..." ng-model="searchString" ng-change="search()">
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-default" type="button" type="submit" ng-click="search()"><i class="fa fa-search"></i></button>
|
|
</span>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-2">
|
|
<a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === '' }" category="">All</a>
|
|
<a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === 'blog' }" category="blog">Blog</a>
|
|
<a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === 'chat' }" category="chat">Chat</a>
|
|
<a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === 'sync' }" category="sync">Media Sync</a>
|
|
<a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === 'git' }" category="git">Code Hosting</a>
|
|
<a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === 'wiki' }" category="wiki">Wiki</a>
|
|
<br/>
|
|
<a href="" class="appstore-category-link" ng-click="showCategory($event);" ng-class="{'category-active': category === 'testing' }" category="testing" ng-show="config.developerMode">Testing</a>
|
|
<br/>
|
|
<br/>
|
|
<br/>
|
|
<a href="" ng-click="feedback.show()">Missing an app? Let us know.</a>
|
|
</div>
|
|
<div class="col-md-10" ng-show="ready && apps.length">
|
|
<div class="row-no-margin">
|
|
<div class="col-sm-1 appstore-item" ng-repeat="app in apps">
|
|
<div class="appstore-item-content highlight" ng-click="gotoApp(app)" ng-class="{ 'appstore-item-content-testing': (app.publishState === 'testing' || app.publishState === 'pending_approval') }">
|
|
<span class="badge badge-danger appstore-item-badge-testing" ng-show="app.publishState === 'testing'">Testing</span>
|
|
<span class="badge badge-warning appstore-item-badge-testing" ng-show="app.publishState === 'pending_approval'">Pending Approval</span>
|
|
<div class="appstore-item-content-icon col-same-height">
|
|
<img ng-src="{{app.iconUrl}}" onerror="this.onerror=null;this.src='img/appicon_fallback.png'" class="app-icon"/>
|
|
</div>
|
|
<div class="appstore-item-content-description col-same-height">
|
|
<h4 class="appstore-item-content-title">{{ app.manifest.title }}</h4>
|
|
<div class="appstore-item-content-tagline text-muted">{{ app.manifest.tagline }}</div>
|
|
<!-- <div class="appstore-item-rating"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star-o"></i></div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-10 animateMeOpacity loading-banner" ng-show="ready && !apps.length">
|
|
<h3 class="text-muted">No applications in this category.</h3>
|
|
<a href="" ng-click="feedback.show()"><h3>Let us know if you miss something.</h3></a>
|
|
</div>
|
|
<div class="col-md-10 animateMeOpacity loading-banner" ng-show="!ready">
|
|
<h2><i class="fa fa-spinner fa-pulse"></i> Loading</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Offset the footer -->
|
|
<br/><br/>
|