update TWA Management v0.0.1

TWASys-App/wwwroot/css/atg-lib/atg-core.css

@@ -23,7 +23,7 @@
     user-select: none
 }
 
-a {
+a {,
     text-decoration: none
 }
 
@@ -197,6 +197,11 @@ h1, h2, h3, h4, h5, h6, p {
     margin-left: 0;
 }
 
+.r-n-g.n{
+    margin-left:-20px;
+    margin-right:-20px
+}
+
 .r > .c, .r > [class^=c-] {
     padding-right: 0;
     padding-left: 0;

TWASys-App/wwwroot/css/pages/login.css

@@ -0,0 +1,165 @@
+.con-img {
+    width: 100%;
+    min-height: 100%;
+    overflow-x: hidden;
+}
+
+    .con-img > img {
+        height: 100%;
+        width: auto;
+        min-height: 100vw;
+    }
+
+@media (min-width: 1400px) {
+    .con-img > img {
+        width: 100% !important;
+        max-width: 100vw;
+        height: auto;
+        min-height: auto;
+        max-height: 100vh;
+    }
+}
+
+.c-login {
+    position: absolute;
+    width: 100%;
+    transform: translateY(-50%);
+    top: 50%;
+    right: 0;
+    margin: 0 auto
+}
+
+.frm-login {
+    max-width: 100%;
+    margin: 0 25px;
+}
+
+
+
+@media (min-width: 568px) {
+    .frm-login {
+        max-width: 380px !important;
+        margin: 0 auto !important;
+    }
+}
+
+@media (min-width: 768px) {
+    .c-login {
+        right: 100px;
+        width: 420px;
+    }
+
+    .frm-login {
+        max-width: 100% !important
+    }
+}
+
+.ws-login {
+    box-shadow: 0 2px 3px rgba(96, 96, 96, 0.1);
+    background-color: #fff;
+    border-radius: var(--radius);
+    padding: 55px 35px;
+}
+
+    .ws-login .c_logo {
+        height: 60px
+    }
+
+    .ws-login .title {
+        color: var(--color-primary)
+    }
+
+    .ws-login .ico {
+        position: absolute;
+        top: 40%;
+        transform: translateY(-50%)
+    }
+
+    .ws-login input {
+        padding-left: 25px;
+    }
+
+    .ws-login .title, .ws-login .desc {
+    }
+
+    .ws-login .hint {
+        font-size: .82rem;
+    }
+
+
+.frm-inline.search button {
+    padding: 4px 15px;
+}
+
+.frm-inline button {
+    margin-left: calc(var(--radius) * -1);
+}
+
+.frm-inline input {
+    border-radius: var(--radius);
+    border: 1px solid var(--border-color);
+    padding: 10px 12px;
+    width: 100%;
+    font-weight: 500;
+    color: var(--text-color-primary)
+}
+
+.frm-group {
+    margin-left: -15px;
+    margin-right: -15px;
+}
+
+.frm-input, .frm-header {
+    padding: 0 15px;
+    margin-bottom: 25px;
+}
+
+.frm-input {
+    font-weight: 500;
+}
+
+    .frm-input label {
+        color: var(--text-color-primary);
+        font-size: .92rem;
+        margin-bottom: 2px;
+        font-weight: 500
+    }
+
+    .frm-input input, .frm-input .aselect {
+        width: 100%;
+        border-bottom: 1px solid #444C6185;
+        background-color: #fff;
+        transition: .3s all ease-in-out;
+        font-size: .9rem;
+        font-weight: 400
+    }
+
+    .frm-input .con-aselect input {
+        border-radius: var(--radius);
+        padding: 0 15px;
+        border: 1px solid #444C6185
+    }
+
+    .frm-input input {
+        min-height: 35px;
+        line-height: 35px;
+    }
+
+    .frm-input .line {
+        position: absolute;
+        height: 1px;
+        bottom: 0;
+        left: 0;
+        z-index: 2;
+        width: 0;
+        background-color: var(--color-primary);
+        transition: width .4s cubic-bezier( 0.19, 0.6, 0.86, 0.01 )
+    }
+
+    .frm-input input:focus + .line, .frm-input input:hover + .line {
+        width: 100%;
+    }
+
+    .frm-input .c-input:not(.line) input:hover, .frm-input .c-input:not(.line) input:focus, .frm-input .con-aselect.active .aselect {
+        border-color: var(--color-primary);
+    }

TWASys-App/wwwroot/css/site.css

@@ -8,13 +8,14 @@
     --text-color-primary: #09205c;
     --text-color-1: #5e5873;
     --text-color-heading-1: #5d596c;
-    --text-disable: #a5a3ae
+    --text-disable: #a5a3ae;
+    --radius:10px
 }
 .pointer:hover{
     cursor: pointer
 }
 .mini-scrollbar{
-    height: calc(100vh - 176px)
+    height: calc(100vh - 196px)
 }
 
 .ellipsis {
@@ -26,6 +27,17 @@ html {
     font-size: 18px;
     font-weight: 500;
 }
+a{
+    text-decoration: none
+}
+
+body[page="10001"] .main-wrapper{
+    padding: 0 !important;
+    margin: 0
+}
+body[page="10001"] #header {
+   left:-500px
+}
 /*Control*/
 [data-dropdown]:not(.nav-i) .sub-item {
     border-radius: var(--border-radius);
@@ -208,7 +220,8 @@ nav {
 }
 
 .menu-content {
-    height: calc(100% - 172px)
+    padding-top:20px;
+    height: calc(100% - 176px)
 }
 
 .m-footer {
@@ -219,12 +232,12 @@ nav {
 }
 
 .nav-overlay {
-    margin-top: -.7rem;
+    margin-top: -10px;
     background: -webkit-gradient(linear,left top,left bottom,color-stop(41%,#fff),color-stop(95%,hsla(0,0%,100%,.11)),to(hsla(0,0%,100%,0)));
     background: linear-gradient(#fff 41%,hsla(0,0%,100%,.11) 95%,hsla(0,0%,100%,0));
     position: absolute;
     z-index: 2;
-    height: 50px;
+    height: 30px;
     width: 100%;
     pointer-events: none;
     -webkit-filter: blur(5px);
@@ -574,7 +587,7 @@ nav {
 }
 
 .btn-secondary {
-    color: #a8aaae;
+    color: #5e5873;
     border-color: rgba(0, 0, 0, 0);
     background: #f1f1f2;
 }

TWASys-App/wwwroot/js/js-page/1000.js

@@ -0,0 +1,4 @@
+window.L1000 = function () {
+
+}
+window.AScript.set("1000", true);

TWASys-App/wwwroot/js/js-page/10001.js

@@ -0,0 +1,26 @@
+import AWizard from "/js/libs/js-AWizard.js";
+
+window.L10001 = function () {
+    Waves.attach('.btn-effect', ['waves-float']);
+    Waves.init({ duration: 1000, delay: 200 });
+    var wrd1 = new AWizard(document.querySelector(".AWizard"));
+    const forget = document.getElementById("forgetPass");
+    const btnCB = document.querySelectorAll(".btnCB");
+    const navSignUp = document.getElementById("navSignUp")
+    forget.addEventListener("click", (e) => {
+        wrd1.nextPage(1);
+    });
+    btnCB.forEach((el) => {
+        el.addEventListener("click", (e) => {
+            ComeBack(e, wrd1);
+        });
+    });
+    navSignUp.addEventListener("click", (e) => {
+        wrd1.nextPage(2);
+    });
+}
+
+function ComeBack(e, wrd) {
+    wrd.nextPage(0);
+}
+window.AScript.set("10001", true);

TWASys-App/wwwroot/js/js-page/6101.js

@@ -38,9 +38,15 @@ const tmp = `<div class="slider-scrollbar" data-scrollbar>
                             </div>
                         </div>
                         <div class="form-group d-f f-c">
-                            <label for="pathServer">Controller Name</label>
+                            <label for="controllerName">Controller Name</label>
                             <div class="input-group">
-                                <input id="pathServer" type="text" placeholder="Controller Name" validation-isEmpty />
+                                <input id="controllerName" type="text" placeholder="Controller Name" validation-isEmpty />
+                            </div>
+                        </div>
+                           <div class="form-group d-f f-c">
+                            <label for="storageName">Storage Name</label>
+                            <div class="input-group">
+                                <input id="storageName" type="text" placeholder="Storage Name" validation-isEmpty />
                             </div>
                         </div>
                           <div class="form-group d-f f-c">
@@ -103,9 +109,9 @@ const tmp = `<div class="slider-scrollbar" data-scrollbar>
                             </div>
                         </div>
                         <div class="form-group d-f f-c">
-                            <label for="expiredDate">SharePoint Path</label>
+                            <label for="sharepointPath">SharePoint Path</label>
                             <div class="input-group">
-                                <input id="expiredDate" type="password" placeholder="Client ID" validation-isEmpty />
+                                <input id="sharepointPath" type="text" placeholder="Client ID" validation-isEmpty />
                             </div>
                         </div>
                     </div>
@@ -140,7 +146,7 @@ const tmp = `<div class="slider-scrollbar" data-scrollbar>
                          <div class="form-group d-f f-c">
                             <label for="clientID">OS Platform</label>
                             <div class="input-group">
-                                <input id="osName" data-id="osPlatform" type="text" placeholder="OS Platform" validation-isEmpty />
+                                <input id="osPlatform" data-id="osPlatform" type="text" placeholder="OS Platform" validation-isEmpty />
                             </div>
                         </div>
                         <div class="form-group d-f f-c">
@@ -158,7 +164,7 @@ const tmp = `<div class="slider-scrollbar" data-scrollbar>
                             <div class="form-group d-f f-c">
                             <label for="clientID">OS Architecture</label>
                             <div class="input-group">
-                                <input id="osKernel" data-id="osArch"  type="text" placeholder="OS Architecture" validation-isEmpty />
+                                <input id="osArch" data-id="osArch"  type="text" placeholder="OS Architecture" validation-isEmpty />
                             </div>
                         </div>
                         <div class="form-group d-f f-c">
@@ -203,30 +209,51 @@ const tmp = `<div class="slider-scrollbar" data-scrollbar>
                              <h5 class="mb-2">Server Authenicator</h4>
                          </div>
                          <div class="form-group d-f f-c">
-                            <label for="clientID">IP Server</label>
+                            <label for="idToken">Token ID</label>
                             <div class="input-group">
-                                <input id="clientID" type="text" placeholder="Client ID" validation-isEmpty />
+                                <input id="idToken" type="text" placeholder="Token ID" validation-isEmpty />
                             </div>
                         </div>
                         <div class="form-group d-f f-c">
-                            <label for="clientID">Machine ID</label>
+                            <label for="vToken">Token Value</label>
                             <div class="input-group">
-                                <input id="clientID" type="text" placeholder="Client ID" validation-isEmpty />
+                                <input id="vToken" type="password" placeholder="Token Value" validation-isEmpty />
                             </div>
                         </div>
                           <div class="form-group d-f f-c">
-                            <label for="clientID">OS Version</label>
+                            <label for="idRefreshToken">Refresh Token ID</label>
                             <div class="input-group">
-                                <input id="clientID" type="text" placeholder="Client ID" validation-isEmpty />
+                                <input id="idRefreshToken" type="text" placeholder="Refresh Token ID" validation-isEmpty />
                             </div>
                         </div>
                         <div class="form-group d-f f-c">
-                            <label for="clientID">Proccessor ID</label>
+                            <label for="refreshTokenValue">Refresh Token Value</label>
                             <div class="input-group">
-                                <input id="clientID" type="text" placeholder="Client ID" validation-isEmpty />
+                                <input id="refreshTokenValue" type="password" placeholder="Refresh Token Value" validation-isEmpty />
                             </div>
                         </div>
                     </div>
+                    <div class="tabcontent">
+                         <div class="form-group">
+                             <h5 class="mb-2">Storage Data Summary</h4>
+                         </div>
+                         <div class="form-group mb-0 d-f">
+                            <label>Storage Server Type</label>
+                            <span class="ml-2"></span>
+                        </div>
+                         <div class="form-group mb-0 d-f">
+                            <label>Controller Name</label>
+                            <span class="ml-2"></span>
+                        </div>
+                          <div class="form-group mb-0 d-f">
+                            <label>Storage Name</label>
+                            <span class="ml-2"></span>
+                        </div>
+                         <div class="form-group mb-0 d-f">
+                            <label>Validation Domains</label>
+                            <span class="ml-2"></span>
+                        </div>
+                    </div>
                 </div>
             </div>
             <div class="tabcontent">
@@ -262,24 +289,99 @@ window.L6101 = function () {
     var ov = new AOverlay(document.body);
     ov.createOverlay();
 
-
+    const $v = id => (document.getElementById(id)?.value ?? '').trim();
     var ele1 = new ASpinButton(document.getElementById("totalSize"));
     var ele2 = new AMultiTag(document.getElementById("listStorage"));
 
     var slider = new AModal(tmp);
     slider.createModal("CustomForm", "slider-right");
     var Scrollbar = window.Scrollbar;
-    Scrollbar.init(slider.CustomContainer.querySelector(".slider-scrollbar"), window.scroll_options);
-
+    const mScroll = Scrollbar.init(slider.CustomContainer.querySelector(".slider-scrollbar"), window.scroll_options);
     slider.overlay.isCloseOverlay(true);
   
     var tabs = new ATab(slider.CustomContainer.querySelector(".atabs"), slider.CustomContainer.querySelector(".StorageTabs"));
     var wrd1 = new AWizard(slider.CustomContainer.querySelector(".AWizard"));
     var as = new ASelect(slider.CustomContainer.querySelectorAll(".aselect"));
+    window.testV = as;
     var asIdType = as.get(0);
+    wrd1.on("onBeforeBack", (evt) => {
+        mScroll.scrollTo(0, 0);
+    });
+    wrd1.on("onAfterNext", (evt) => {
+        if (evt.indexPage > 0) {
+            if (as.get(0).isLockElement() || as.get(1).isLockElement()) {
+                return;
+            } 
+            switch (asIdType.getSelectedItem().vSearch) {
+                case "Microsoft Cloud":
+                    break;
+                case "Physical Server":
+                    if (evt.indexPage > 3) {
+                        (async () => {
+                           
+                            const fd = new FormData();
+                            fd.append('StorageTypeID', asIdType.getSelectedItem()?.id ?? '');
+                            fd.append('ControllerName', $v('controllerName'));
+                            fd.append('StorageName', $v('storageName'));
+
+                            fd.append('IpPublic', $v('ipPublic'));
+                            fd.append('IpPrivatev4', $v('ipPrivatev4'));
+                            fd.append('IpPrivatev6', $v('ipPrivatev6'));
+
+                            fd.append('OsName', $v('osName'));
+                            fd.append('OsPlatform', $v('osPlatform'));
+                            fd.append('OsVersion', $v('osVersion'));
+                            fd.append('OsKernel', $v('osKernel'));
+                            fd.append('OsArch', $v('osArch'));
+
+                            fd.append('BiosSN', $v('biosSerial'));
+                            fd.append('BiosVendor', $v('biosVender'));
+                            fd.append('BiosUUID', $v('biosUUID'));
+                       
+                            const i = 0;
+                            as.get(1).multiSelectedItem.forEach((item) => {
+                                fd.append(`ValidationDomains[${i}].IdValidationDomain`, item.getAttribute("data-value"));
+                            });
+
+                            fd.append('SocketN', $v('socketN'));
+                            fd.append('CpuName', $v('cpuName'));
+                            fd.append('TotalRam', $v('totalRam'));
+
+                            fd.append('TokenID', $v('idToken'));
+                            fd.append('TokenValue', $v('vToken'));
+                            fd.append('RTokenID', $v('idRefreshToken'));
+                            fd.append('RTokenValue', $v('refreshTokenValue'))
+                            const response = await fetch("/Storage/SetStorageData", {
+                                method: 'POST',
+                                body: fd
+                            });
+                        })();
+                        
+                    }
+                    break;
+            }
+        }
+    });
     wrd1.on("onBeforeNext", (evt) => {
+        mScroll.scrollTo(0, 0);
         if (evt.indexPage == 0) {
-            if (asIdType.isLockElement() && asVD.isLockElement()) {
+            if (as.get(0).isLockElement() || as.get(1).isLockElement()) {
+                wrd1.isStopNextPage = true;
+                return;
+            } else {
+                wrd1.isStopNextPage = false;
+            }
+            let flag = false;
+            if ($v('controllerName').length == 0) {
+                flag = true;
+            }
+            if ($v('storageName').length == 0) {
+                flag = true;
+            }
+            if (as.get(1).multiSelectedItem.length == 0) {
+                flag = true;
+            }
+            if (flag) {
                 wrd1.isStopNextPage = true;
                 return;
             } else {
@@ -289,9 +391,11 @@ window.L6101 = function () {
                 case "Microsoft Cloud":
                     wrd1.showPage(1);
                     wrd1.hidePage(2);
+                    wrd1.hidePage(3);
                     break;
                 case "Physical Server":
                     wrd1.showPage(2);
+                    wrd1.showPage(3);
                     wrd1.hidePage(1);
                     let promise = new Promise(async function (resolve, reject) {
                         const response = await fetch(`/Storage/GetSysInfo`, {
@@ -305,10 +409,43 @@ window.L6101 = function () {
                             const autoF = new AAutoFill(document.querySelector(".awStorageConnector"));
                             autoF.fill(data);
                         }
-                    });    
+                    });
                     break;
             }
-        }e
+        } else if (evt.indexPage == 1)
+        {
+          
+        }
+        else if (evt.indexPage == 2) {
+
+            (async () => {
+                const response = await fetch(`/Storage/GenerationAccessToken`, {
+                    method: 'GET',
+                    headers: {
+                        'Accept': 'application/json'
+                    }
+                });
+                const data = await response.json();
+                if (data) {
+                    document.getElementById("idToken").value = data.idToken;
+                    document.getElementById("vToken").value = data.tokenValue;
+                }
+            })();
+            (async () => {
+                const response = await fetch(`/Storage/GenerationAccessToken`, {
+                    method: 'GET',
+                    headers: {
+                        'Accept': 'application/json'
+                    }
+                });
+                const data = await response.json();
+                if (data) {
+                    document.getElementById("idRefreshToken").value = data.idToken;
+                    document.getElementById("refreshTokenValue").value = data.tokenValue;
+                }
+            })();
+        }
+        
     }, true);
 
     var asVD = as.get(1);
@@ -321,6 +458,7 @@ window.L6101 = function () {
         let promise = new Promise(function (resolve, reject) {
             const xhr = new XMLHttpRequest();
             xhr.open("GET", window.GetAbsoluteURL("/Storage/GetTypeStorage"));
+            xhr.setRequestHeader('Accept', 'application/json; charset=UTF-8');
             var f = function (ev) {
                 if (ev.currentTarget.readyState == 4) {
                     if (ev.currentTarget.status == 200) {
@@ -344,6 +482,7 @@ window.L6101 = function () {
         let promise1 = new Promise(function (resolve, reject) {
             const xhr = new XMLHttpRequest();
             xhr.open("GET", window.GetAbsoluteURL("/Storage/GetValidationDomain"));
+            xhr.setRequestHeader('Accept', 'application/json; charset=UTF-8');
             var f = function (ev) {
                 if (ev.currentTarget.readyState == 4) {
                     if (ev.currentTarget.status == 200) {
@@ -374,7 +513,7 @@ window.L6101 = function () {
     asAddStorage.on("click_btAddStorage", (e) => {
         const xhr = new XMLHttpRequest();
         xhr.open("POST", "/Storage/AddStorageServer");
-        xhr.setRequestHeader('Content-type', 'application/json; charset=UTF-8');
+        xhr.setRequestHeader('Accept', 'application/json; charset=UTF-8');
         var data = {
             "Name": document.getElementById("inpType").value
         };

TWASys-App/wwwroot/js/js-page/asyncLayout.js

@@ -14,6 +14,7 @@ class AsyncLayout extends ALayout {
         super.dispose();
     }
     renderMenu() {
+        console.log("ÁDASD");
         this.isLoaded = true;
         var asyncStyleSheets = [
             'https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap',

TWASys-App/wwwroot/js/js-page/asyncLoginLayout.js

@@ -0,0 +1,39 @@
+import ALayout from '/js/libs/js-ALayout.js'
+
+class LoginLayout extends ALayout {
+    constructor() {
+        super();
+        this.isLoaded = false;
+    }
+    dispose() {
+        this.isLoaded = false;
+        window.app.removeSytemEventParent(window.app.lName);
+        window.app.removeCustomEventParent(window.app.lName);
+        super.dispose();
+    }
+    renderMenu() {
+        this.isLoaded = true;
+        var asyncStyleSheets = [
+            'https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap',
+            '/css/atg-font/atg-admin-font.css',
+            '/css/atg-lib/waves.min.css',
+            '/css/pages/login.css'
+        ];
+        window.app.loadCSS(asyncStyleSheets);
+        window.app.initNavs("Login");
+
+        var sOption = {
+            damping: (window.getOS() == "Android") ? .06 : .04,
+            thumbMinSize: 25,
+            renderByPixel: true,
+            alwaysShowTracks: true,
+            continuousScrolling: true
+        };
+
+        window.Scrollbar.use(window.OverscrollPlugin);
+        window.app.initScrollBar();
+    }
+}
+
+window.ALayout.set("Login", new LoginLayout());
+window.AScript.set("asyncLoginLayout", true);

TWASys-App/wwwroot/js/libs/js-AWizard.js

@@ -106,12 +106,12 @@ export default class AWizard extends ATab {
     btnNext_Click(e, idx) {
         this.trigger("onBeforeNext", { "currentPage": this.ctabs[idx], "indexPage": idx, "currentButton": e.currentTarget });
         if (this.isStopNextPage) return;
-        console.log(idx);
         this.selectedTab(this.checkSelectedNext(idx));
         
-        this.trigger("onAfterNext");
+        this.trigger("onAfterNext", { "currentPage": this.ctabs[idx], "indexPage": idx + 1, "currentButton": e.currentTarget });
     }
     btnBack_Click(e, idx) {
+        this.trigger("onBeforeBack", { "currentPage": this.ctabs[idx], "indexPage": idx, "currentButton": e.currentTarget });
         this.selectedTab(this.checkSelectedBack(idx));
     }
     btnFinish_Click(e) {

TWASys-App/wwwroot/js/libs/js-core.js

@@ -541,6 +541,7 @@ class AApp extends window.AObject {
         this.metaPage = document.head.querySelector("meta[name=idPage]");
         this.pageName = this.metaPage.getAttribute("pageName");
         this.lName = this.metaPage.getAttribute("layName");
+        console.log(this.lName);
         var tmp = document.querySelector(container);
         this.mainApp = tmp.querySelector("[main-content]") ? tmp.querySelector("[main-content]") : tmp;
         var f = function (ev) {
@@ -688,6 +689,7 @@ class AApp extends window.AObject {
                             doc: doc,
                             dynamicF: a.dynamicF
                         };
+                        
                         this.setContentPage(obj, url); 
                     } else {
                         this.getPage(url, result)
@@ -721,7 +723,9 @@ class AApp extends window.AObject {
         document.title = page.title + " - " + this.pageName;
         var meta = document.head.querySelector("meta[name=idPage]");
         document.body.setAttribute("page", page.idPage);
+       
         meta.content = page.idPage;
+        this.lName = page.lName;
         meta.setAttribute("layName", page.lName);       
         this.loadContentPage(page.html);
         window.history.pushState({"url":url}, page.title, url);
@@ -821,6 +825,7 @@ class AApp extends window.AObject {
         }).bind(this)();
     }
     loadedLayout() {
+        console.log(this.lName);
         if (this.lName !== "None") {
             const l = window.ALayout.get(this.lName);
             if (!l.isLoaded) {
@@ -831,7 +836,6 @@ class AApp extends window.AObject {
         }
     }
     setLayout(o) {
-       
         var oP = new DOMParser();
         var pHtml = oP.parseFromString(o.Content, 'text/html');
         (function () {