cloudron-box/webadmin/dist/views/apps.html

<div class="row animateMeOpacity ng-hide" ng-show="installedApps.length === 0">
    <div class="col-lg-6 col-lg-offset-3" style="text-align: center;">
        <br/><br/><br/><br/>
        <h1><i class="fa fa-cloud-download fa-fw"></i> Your Cloudron does not have any apps installed yet!</h1>
        <br/></br>
        <h3>How about installing some? Checkout the <a href="#/appstore">App Store</a></h3>
    </div>
</div>

<!-- Modal configure app -->
<div class="modal fade" id="appConfigureModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Configure {{ appconfigure.app.manifest.title }}</h4>
            </div>
            <div class="modal-body">
                <fieldset>
                    <form class="form-signin" role="form" name="config_form" ng-submit="doConfigure()" autocomplete="off">
                        <div class="form-group" ng-class="{ 'has-error': config_form.location.$dirty && config_form.location.$invalid }">
                            <label class="control-label" for="inputLocation">Location</label>
                            <div class="input-group form-inline">
                                <input type="text" class="form-control" ng-model="appconfigure.location" id="inputLocation" name="location" required autofocus>
                                <div class="input-group-addon">{{ config.isCustomDomain ? '.' : '-' }}{{ config.fqdn }}</div>
                            </div>
                        </div>
                        <div class="form-group" ng-class="{ 'has-error': (!config_form.password.$dirty && error.password) || (config_form.password.$dirty && config_form.password.$invalid) }">
                            <label class="control-label" for="inputPassword">Password</label>
                            <input type="password" class="form-control" ng-model="appconfigure.password" id="inputPassword" name="password" ng-maxlength="512" ng-minlength="5" required>
                        </div>
                        <div ng-repeat="(env, info) in appconfigure.portBindingsInfo">
                            <ng-form name="portInfo_form">
                                <div class="form-group" ng-class="{ 'has-error': portInfo_form.itemName{{$index}}.$dirty && portInfo_form.itemName{{$index}}.$invalid }">
                                    <label class="control-label" for="inputPortInfo{{env}}">{{ info.description }} ({{ HOST_PORT_MIN }} - {{ HOST_PORT_MAX }})</label>
                                    <input type="number" class="form-control" ng-model="appconfigure.portBindings[env]" id="inputPortInfo{{env}}" later-name="itemName{{$index}}" min="{{HOST_PORT_MIN}}" max="{{HOST_PORT_MAX}}" required>
                                </div>
                            </ng-form>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="accessRestriction">Access Restriction</label>
                            <select class="form-control" id="accessRestriction" ng-model="appconfigure.accessRestriction">
                                <option value="">Public</option>
                                <option value="roleUser">Private</option>
                                <option value="roleAdmin">Private (Admins only)</option>
                            </select>
                        </div>
                        <input class="ng-hide" type="submit" ng-disabled="config_form.$invalid || 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="doConfigure()" ng-disabled="config_form.$invalid || busy">Save</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal uninstall app -->
<div class="modal fade" id="appUninstallModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Really uninstall {{ appuninstall.app.location }}</h4>
            </div>
            <div class="modal-body">
                <p>Deleting the app will also remove all content generated within this app!</p>
                <fieldset>
                    <form class="form-signin" role="form" name="uninstall_form" ng-submit="doUninstall()" autocomplete="off">
                        <div class="form-group" ng-class="{ 'has-error': (!uninstall_form.password.$dirty && appuninstall.error.password) || (uninstall_form.password.$dirty && uninstall_form.password.$invalid) }">
                            <label class="control-label" for="inputUninstallPassword">Password</label>
                            <input type="password" class="form-control" ng-model="appuninstall.password" id="inputUninstallPassword" name="password" ng-maxlength="512" ng-minlength="5" required autofocus>
                        </div>

                        <input class="ng-hide" type="submit" ng-disabled="uninstall_form.$invalid || 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-danger" ng-click="doUninstall()" ng-disabled="uninstall_form.$invalid || busy">Uninstall</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal update app -->
<div class="modal fade" id="appUpdateModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Update {{ appupdate.app.location }}</h4>
            </div>
            <div class="modal-body">
                <fieldset>
                    <form class="form-signin" role="form" name="update_form" ng-submit="doUpdate(update_form)" autocomplete="off">
                        <div ng-repeat="(env, info) in appupdate.portBindingsInfo" ng-class="{ 'newPort': info.isNew }">
                            <ng-form name="portInfo_form">
                                <div class="form-group" ng-class="{ 'has-error': portInfo_form.itemName{{$index}}.$dirty && portInfo_form.itemName{{$index}}.$invalid }">
                                    <span ng-show="info.isNew">New - </span>
                                    <label class="control-label" for="inputPortInfo{{env}}">{{ info.description }} ({{ HOST_PORT_MIN }} - {{ HOST_PORT_MAX }})</label>
                                    <input type="number" class="form-control" ng-model="appupdate.portBindings[env]" id="inputPortInfo{{env}}" later-name="itemName{{$index}}" min="{{HOST_PORT_MIN}}" max="{{HOST_PORT_MAX}}" required>
                                </div>
                            </ng-form>
                        </div>
                        <div ng-repeat="(env, port) in appupdate.obsoletePortBindings" class="obsoletePort">
                            <ng-form name="obsoletePortInfo_form">
                                <div class="form-group">
                                    Obsolete -
                                    <label class="control-label">{{ env }}</label>
                                    <input type="number" class="form-control" ng-model="port" disabled>
                                </div>
                            </ng-form>
                        </div>
                        <div class="form-group" ng-class="{ 'has-error': (!update_form.password.$dirty && appupdate.error.password) || (update_form.password.$dirty && update_form.password.$invalid) }">
                            <label class="control-label" for="inputUpdatePassword">Password</label>
                            <input type="password" class="form-control" ng-model="appupdate.password" id="inputUpdatePassword" name="password" ng-maxlength="512" ng-minlength="5" required autofocus>
                        </div>
                        <input class="ng-hide" type="submit" ng-disabled="update_form.$invalid || 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-danger" ng-click="doUpdate(update_form)" ng-disabled="update_form.$invalid || busy">Update</button>
            </div>
        </div>
    </div>
</div>

<div class="row animateMeOpacity ng-hide" ng-show="installedApps.length > 0">
    <div class="col-lg-12">
        <h1>Installed Applications</h1>
    </div>
</div>

<div class="row animateMeOpacity ng-hide" ng-show="installedApps.length > 0">
    <div class="col-sm-1 grid-item" ng-repeat="app in installedApps">
        <div style="background-color: white;" class="highlight grid-item-content">
            <a href="https://{{ app.fqdn + app.manifest.home_url }}" target="_blank">
                <div class="grid-item-top">
                    <div class="row">
                        <div class="col-xs-12 text-center" style="height: 48px">
                            <img ng-src="{{app.iconUrl}}" onerror="this.onerror=null;this.src='img/appicon_fallback.png'" width="48" height="48"/>
                        </div>
                    </div>
                    <br/>
                    <div class="row">
                        <div class="col-xs-12 text-left">
                            <div style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden">{{ app.location || "App" }}</div>
                            <div class="text-muted" style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden">
                                <i class="fa fa-spinner fa-pulse ng-hide" ng-show="(app.installationState | installationActive)"></i> {{ app.installationState | installationStateLabel }}
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            <div class="grid-item-bottom">
                <div class="row">
                    <div class="col-xs-4"><a href="" ng-click="showConfigure(app)"><i class="fa fa-wrench"></i></a></div>
                    <div class="col-xs-4"><a href="" ng-click="showUpdate(app)" class="ng-hide animateMe" ng-show="app.updateVersion"><i class="fa fa-arrow-up text-success"></i></a></div>
                    <div class="col-xs-4"><a href="" ng-click="showUninstall(app)"><i class="fa fa-remove"></i></a></div>
                </div>
            </div>
        </div>
    </div>
</div>