update login page

README.md

@@ -60,4 +60,5 @@ A configuration example with explanation is avaiable in the `django/backend/conf
 DJANGO_DEBUG | Number | 0 | Whether or not Django starts in Debug Mode (0=Production, 1=Debug) |
 DJANGO_ALLOWED_HOSTS | String |  | FQDN on which Django is listening. Only used in Production Mode |
 GOOGLE_API_KEY | String | | Google API Key to use [Google Map Javascript API](https://developers.google.com/maps/gmp-get-started) |
+APP_DISLCAIMER | String | | Disclaimer to display on the login page | 
 

django_app/backend/urls.py

@@ -11,6 +11,7 @@
     path('sites/', views.get_sites, name='get_sites'),    
     #path('sites/derived/', views.get_site_derived, name='get_site_derived'),
     path('script', views.script, name="googlemaps"),
-    path('gap', views.gap, name="gap")
+    path('gap', views.gap, name="gap"),
+    path('disclaimer', views.disclaimer, name="disclaimer")
 ]
 

django_app/backend/views.py

@@ -7,40 +7,30 @@
 import json
 import time
 import logging
+import os
 
 from .mist_lib.devices import Devices
 from .mist_lib.sites import Sites
 
 try:
     from .config import google_api_key
 except:
-    import os
     google_api_key = os.environ.get("GOOGLE_API_KEY", default="")
-#     if smtp_enabled:
-#         smtp_config = {
-#             "host": os.environ.get("MIST_SMTP_HOST", default=None),
-#             "port": os.environ.get("MIST_SMTP_PORT", default=587),
-#             "use_ssl": os.environ.get("MIST_SMTP_SSL", default=True),
-#             "username": os.environ.get("MIST_SMTP_USER", default=None),
-#             "password": os.environ.get("MIST_SMTP_PASSWORD", default=None),
-#             "from_name": os.environ.get("MIST_SMTP_FROM_NAME", default="Wi-Fi Access"),
-#             "from_email": os.environ.get("MIST_SMTP_FROM_EMAIL", default=None),
-#             "logo_url": os.environ.get("MIST_SMTP_LOGO_URL", default="https://cdn.mist.com/wp-content/uploads/logo.png"),
-#             "enable_qrcode": os.environ.get("MIST_SMTP_QRCODE", default=True)
-#         }
-#     else:
-#         smtp_config = None
 
-# try:
-#     from .config import psk_config
-# except:
-#     psk_config = {
-#         "salt": os.environ.get("MIST_PSK_SALT", default="$2b$12$SIGWr574/7OggDO4BBJ1D."),
-#         "length": int(os.environ.get("MIST_PSK_LENGTH", default=12))
-#     }
-# psk_config["salt"] = str.encode(psk_config["salt"])
+try:
+    from .config import app_disclaimer
+except:
+    app_disclaimer = os.environ.get("APP_DISCLAIMER", default="")
 
-# mist_smtp = Mist_SMTP(smtp_config)
+try:
+    from .config import app_github_url
+except:
+    app_github_url = os.environ.get("APP_GITHUB_URL", default="")
+
+try:
+    from .config import app_docker_url
+except:
+    app_docker_url = os.environ.get("APP_DOCKER_URL", default="")
 
 
 ##########
@@ -72,7 +62,6 @@ def update_device_settings(request):
         return Http404
 
 
-
 ##########
 # Switch Port
 
@@ -82,7 +71,7 @@ def get_port_status(request):
         response = Devices().get_device_ports_status(request.body)
         return JsonResponse(status=response["status"], data=response["data"])
     else:
-        return Http404    
+        return Http404
 
 ##########
 # Sites
@@ -178,6 +167,16 @@ def gap(request):
         return JsonResponse({"gap": google_api_key})
 
 
+@csrf_exempt
+def disclaimer(request):
+    if request.method == "GET":
+        return JsonResponse({
+            "disclaimer": app_disclaimer,
+            "github_url": app_github_url,
+            "docker_url": app_docker_url
+        })
+
+
 @csrf_exempt
 def script(request):
     if request.method == "GET":

src_angular/src/app/login/login.component.css

@@ -59,9 +59,24 @@ mat-card {
     align-self: center;
 }
 
-.github-fork-me {
-    position: absolute;
-    right: 0;
-    top: 0;
-    z-index: 1000;
+.disclaimer {
+    width: 50em;
+    text-align: center;
+    margin: auto;
+    text-transform: uppercase;
+    font-family: Roboto, "Helvetica Neue", sans-serif;
+    font-weight: 100;
+    font-size: smaller;
+}
+
+.source {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.source img {
+    margin: 1em;
+    height: 2em;
 }

src_angular/src/app/login/login.component.html

@@ -43,14 +43,14 @@ <h1>Access with Login/Password</h1>
                     </div>
                     <div fxLayout="column" class="login-form-or">
                         <mat-divider [vertical]="true"></mat-divider>
-                        <button mat-fab color="accent" aria-label="OR" class="disable-click">
+                        <button mat-fab color="accent" aria-label="OR" class="disable-click" style="margin-bottom: 4em;">
                             OR
                         </button>
                         <mat-divider [vertical]="true"></mat-divider>
                     </div>
                     <div fxLayout="column" class="login-form-inputs">
                         <h1>Access with API Token</h1>
-                        <mat-form-field appearance="outline">
+                        <mat-form-field appearance="outline" style="padding: 0;">
                             <mat-label>API Token</mat-label>
                             <input type="text" matInput formControlName="token" (keydown.enter)="submitToken()" />
                         </mat-form-field>
@@ -72,7 +72,12 @@ <h1>Access with API Token</h1>
     </form>
 
 </mat-card>
-
-<div *ngIf="show_github_fork_me" class="github-fork-me">
-    <a class="github-fork-me" href="https://github.com/tmunzer/mist_claim_web_ui" target="_blank"><img loading="lazy" width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_red_aa0000.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1"></a>
+<div class="disclaimer">
+    <div>
+        {{disclaimer}}
+    </div>
+</div>
+<div class="source">
+    <a *ngIf="github_url" href={{github_url}} target="_blank"><img src="assets/github.png"></a>
+    <a *ngIf="docker_url" href={{docker_url}} target="_blank"><img src="assets/docker.png"></a>
 </div>

src_angular/src/app/login/login.component.ts

@@ -23,12 +23,14 @@ export class LoginComponent implements OnInit {
   constructor(private _formBuilder: FormBuilder, private _http: HttpClient, private _router: Router, private _appService: ConnectorService, public _dialog: MatDialog, private _platformLocation: PlatformLocation
     ) { }
 
+
+  github_url: string;
+  docker_url: string;
+  disclaimer: string;
   host = null;
   headers = {};
   cookies = {};
   self = {};
-  show_github_fork_me : boolean = false;
-  hostnames_to_show_github_fork_me = [ "mso.mist-lab.fr"]
   loading: boolean;
   hosts = [
     { value: 'api.mist.com', viewValue: 'US - manage.mist.com' },
@@ -53,9 +55,6 @@ export class LoginComponent implements OnInit {
 
   //// INIT ////
   ngOnInit(): void {
-    if (this.hostnames_to_show_github_fork_me.indexOf(this._platformLocation.hostname) >= 0){      
-      this.show_github_fork_me = true;
-    }
     this.frmStepLogin = this._formBuilder.group({
       host: ['api.mist.com'],
       credentials: this._formBuilder.group({
@@ -68,6 +67,13 @@ export class LoginComponent implements OnInit {
       next: data => this._appService.googleApiKeySet(data.gap),
       error: error => console.error("Unable to load the Google API Key... Maps won't be available...")      
     })
+    this._http.get<any>("/api/disclaimer").subscribe({
+      next: data => {
+        if (data.disclaimer) this.disclaimer = data.disclaimer;
+        if (data.github_url) this.github_url = data.github_url;
+        if (data.docker_url) this.docker_url = data.docker_url;
+      }
+    })
   }
 
   //// COMMON ////