<div class="component">
    <div ng-if="canConnectToServer">
        Connection seems fine.
        <span ng-if="isLoading">
            Loading data from server...
        </span>
    </div>
    <div ng-if="! canConnectToServer">
        Cannot connect to server.
    </div>
    <div ng-if="criticalError != null">
        Critical Error: {{criticalError}}
    </div>
    <div ng-if="hasNotices && ! showNotices">
        <span ng-click="toggleShowNotices()">[-] Server problems</span>
    </div>
    <div ng-if="hasNotices && showNotices">
        <span ng-click="toggleShowNotices()">[|||] Server problems</span>
        <div ng-repeat="notice in notices">
            {{notice.message}} ({{notice.status}})
        </div>
    </div>
</div>

<div class="component">
    <div ng-if="canConnectToServer">
        Connection seems fine .
        <span ng-if="isLoading">
            Loading data from server...
        </span>
    </div>
    <div ng-if="! canConnectToServer">
        Cannot connect to server.
    </div>
    <div ng-if="criticalError != null">
        Critical Error: {{criticalError}}
    </div>
    <div ng-if="hasNotices && ! showNotices">
        <span ng-click="toggleShowNotices()">[-] Server problems</span>
    </div>
    <div ng-if="hasNotices && showNotices">
        <span ng-click="toggleShowNotices()">[|||] Server problems</span>
        <div ng-repeat="notice in notices">
            {{notice.message}} ({{notice.status}})
        </div>
    </div>
</div>

Add some usability to the login and server state components.
Add some usability to the login and server state components.
