diff --git a/frontend/src/app/app.component.css b/frontend/src/app/app.component.css index 04f34b17e..5246c021b 100644 --- a/frontend/src/app/app.component.css +++ b/frontend/src/app/app.component.css @@ -111,6 +111,11 @@ color: #fff; } +.logo-box { + display: flex; + align-items: center; +} + .logo { display: flex; align-items: center; @@ -123,6 +128,14 @@ margin-right: 12px; } +.logo__demo-mark { + background: var(--color-accentedPalette-700); + font-size: 12px; + line-height: 20px; + margin-bottom: -2px; + padding: 0 8px; +} + .menu { display: flex; align-items: center; diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index 9696d3143..502eafca5 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -64,7 +64,7 @@ --> -
+
+ demo
@@ -108,13 +109,21 @@
- Upgrade + + -
- +
+

{{ titles[connectionItem.connection. - @@ -224,10 +224,19 @@

{{ titles[connectionItem.connection. Add database

+ + add + Add database + - -
+

Invited to the company and don't see admin panel?

@@ -239,7 +248,7 @@

{{ titles[connectionItem.connection. -

Demo Admin Panels

+

Explore demo admin panels

  • diff --git a/frontend/src/app/components/connections-list/connections-list.component.ts b/frontend/src/app/components/connections-list/connections-list.component.ts index 91777a68e..79eeaec75 100644 --- a/frontend/src/app/components/connections-list/connections-list.component.ts +++ b/frontend/src/app/components/connections-list/connections-list.component.ts @@ -56,6 +56,10 @@ export class ConnectionsListComponent implements OnInit { private title: Title ) { } + get isDemo() { + return this._userService.isDemo; + } + ngOnInit(): void { this._companyService.getCurrentTabTitle() .pipe(take(1)) diff --git a/frontend/src/app/components/user-settings/user-settings.component.html b/frontend/src/app/components/user-settings/user-settings.component.html index d01fcf485..67f0b72a6 100644 --- a/frontend/src/app/components/user-settings/user-settings.component.html +++ b/frontend/src/app/components/user-settings/user-settings.component.html @@ -1,5 +1,6 @@ - + +

    @@ -91,7 +92,7 @@

    [disabled]="submittingChangedShowTestConnections" [(ngModel)]="showTestConnections" (change)="changeShowTestConnections($event.checked)"> - Show demo connections + Show demo admin panels
    diff --git a/frontend/src/app/components/user-settings/user-settings.component.ts b/frontend/src/app/components/user-settings/user-settings.component.ts index c2661898a..6138bf043 100644 --- a/frontend/src/app/components/user-settings/user-settings.component.ts +++ b/frontend/src/app/components/user-settings/user-settings.component.ts @@ -1,15 +1,16 @@ import { Alert, AlertActionType, AlertType } from 'src/app/models/alert'; +import { Angulartics2, Angulartics2OnModule } from 'angulartics2'; import { ApiKey, User } from 'src/app/models/user'; import { Component, Input, OnInit } from '@angular/core'; import { AccountDeleteDialogComponent } from './account-delete-dialog/account-delete-dialog.component'; import { AlertComponent } from '../ui-components/alert/alert.component'; -import { Angulartics2, Angulartics2OnModule } from 'angulartics2'; import { Angulartics2Module } from 'angulartics2'; import { ApiKeyDeleteDialogComponent } from './api-key-delete-dialog/api-key-delete-dialog.component'; import { AuthService } from 'src/app/services/auth.service'; import { CdkCopyToClipboard } from '@angular/cdk/clipboard'; import { CommonModule } from '@angular/common'; +import { CompanyService } from 'src/app/services/company.service'; import { EnableTwoFADialogComponent } from './enable-two-fa-dialog/enable-two-fa-dialog.component'; import { FormsModule } from '@angular/forms'; import { MatButtonModule } from '@angular/material/button'; @@ -23,9 +24,8 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle'; import { MatTooltipModule } from '@angular/material/tooltip'; import { NotificationsService } from 'src/app/services/notifications.service'; import { RouterModule } from '@angular/router'; -import { UserService } from 'src/app/services/user.service'; -import { CompanyService } from 'src/app/services/company.service'; import { Title } from '@angular/platform-browser'; +import { UserService } from 'src/app/services/user.service'; @Component({ selector: 'app-user-settings', @@ -81,6 +81,12 @@ export class UserSettingsComponent implements OnInit { public generatingAPIkeyTitle: string; public generatedAPIkeyHash: string; + public isDemoAccountWarning: Alert = { + id: 10000000, + type: AlertType.Warning, + message: 'This is a DEMO SESSION! Once you log out, all changes made will be lost.', + } + constructor( private _userService: UserService, private _authService: AuthService, @@ -91,6 +97,10 @@ export class UserSettingsComponent implements OnInit { private angulartics2: Angulartics2, ) {} + get isDemo() { + return this._userService.isDemo; + } + ngOnInit(): void { this.title.setTitle(`Account settings | ${this._company.companyTabTitle || 'Rocketadmin'}`); this.currentUser = null; diff --git a/frontend/src/app/components/users/users.component.ts b/frontend/src/app/components/users/users.component.ts index 6229308cb..e30b6aee7 100644 --- a/frontend/src/app/components/users/users.component.ts +++ b/frontend/src/app/components/users/users.component.ts @@ -1,3 +1,4 @@ +import { Alert, AlertType } from 'src/app/models/alert'; import { CommonModule, NgClass, NgForOf, NgIf } from '@angular/common'; import { Component, OnDestroy, OnInit } from '@angular/core'; import { GroupUser, User, UserGroup, UserGroupInfo } from 'src/app/models/user'; diff --git a/frontend/src/app/services/user.service.ts b/frontend/src/app/services/user.service.ts index f816e6b80..a013b290c 100644 --- a/frontend/src/app/services/user.service.ts +++ b/frontend/src/app/services/user.service.ts @@ -28,6 +28,8 @@ export class UserService { } } + public isDemoEmail: boolean = false; + private user = new BehaviorSubject(this.initialUserState); public cast = this.user.asObservable(); @@ -41,6 +43,14 @@ export class UserService { return this.user.asObservable(); } + setIsDemo(isDemo: boolean) { + this.isDemoEmail = isDemo; + } + + get isDemo() { + return this.isDemoEmail + } + fetchUser() { return this._http.get('/user') .pipe(