ps-toolkit-ui 0.0.210 → 0.0.211

package/src/lib/components/login/login.component.css

@@ -0,0 +1,389 @@
+#Login {
+  position: relative;
+  width: 100%;
+  float: right;
+  border-radius: 5px;
+  display: table;
+  background-color: white;
+  height: 100vh;
+}
+
+#Login .form-c {
+  display: table-cell;
+  width: 50%;
+  vertical-align: middle;
+  position: relative;
+  z-index: 2;
+  box-shadow: 19px 0 35px -7px rgba(0,0,0,.05);
+}
+
+#Login .about-c {
+  display: table-cell;
+  width: 50%;
+  height: 100%;
+  vertical-align: middle;
+}
+
+#Login .form {
+  width: 70%;
+  margin: 0 auto;
+}
+
+#Login .about {
+  width: 100%;
+  position: relative;
+  float: right;
+  border-radius: 0 5px 5px 0;
+}
+
+#Login .about .info {
+  width: 100%;
+  position: relative;
+  float: right;
+  z-index: 2;
+  border-radius: 0 5px 5px 0;
+}
+
+#Login .triangles {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  z-index: 1;
+  border-radius: 0 5px 5px 0;
+}
+
+#Login .triangles .triangle {
+  position: absolute;
+  color: var(--base);
+  opacity: 0.2;
+}
+
+#Login .triangles .triangle-1 {
+  font-size: 656px;
+  top: -10px;
+  right: -50px;
+}
+
+#Login .triangles .triangle-2 {
+  font-size: 1000px;
+  top: 80px;
+  right: -60px;
+}
+
+#Login .triangles .triangle-3 {
+  font-size: 900px;
+  top: -347px;
+  right: -46px;
+}
+
+#Login .about .logo {
+  height: 200px;
+  width: 200px;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  margin: 0 auto;
+  position: relative;
+}
+
+#Login .about .title {
+  width: 100%;
+  float: right;
+  text-align: center;
+  font-size: 25px;
+  height: 40px;
+  line-height: 40px;
+  font-family: VazirBold;
+  position: relative;
+  margin-top: 20px;
+  font-weight: bolder;
+}
+#Login .about .sub-title {
+  float: right;
+  text-align: center;
+  font-size: 12px;
+  line-height: 30px;
+  position: relative;
+  padding: 20px;
+  width: 80%;
+  margin-right: 10%;
+  font-family: VazirLight;
+}
+
+#Login .form .title {
+  width: 100%;
+  margin-top: 30px;
+  float: right;
+  text-align: center;
+  font-size: 25px;
+  height: 50px;
+  line-height: 50px;
+  font-family: VazirBold;
+  margin-bottom: 10px;
+}
+
+#Login .form .sub-title {
+  width: 100%;
+  float: right;
+  color: var(--black-88);
+  text-align: center;
+  font-size: 12px;
+  height: 30px;
+  line-height: 30px;
+  font-family: VazirLight;
+}
+
+#Login .form .title i {
+  font-size: 30px;
+  color: var(--base);
+  margin-left: 5px;
+  position: relative;
+  top: 7px;
+  left: 5px;
+}
+
+::ng-deep #Login .form .title{
+  width: 100%;
+  margin-top: 30px;
+  float: right;
+  text-align: center;
+  font-size: 25px;
+  height: 50px;
+  line-height: 50px;
+  font-family: VazirBold;
+  margin-bottom: 10px;
+}
+::ng-deep #Login .form .sub-title{
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+::ng-deep #Login .form .sub-title:after{
+  background-image: none !important;
+}
+@media (max-width: 399.98px) {
+  #Login {
+    padding: 20px 0;
+  }
+  #Login {
+    display: unset;
+    width: 90%;
+    margin-right: 5%;
+  }
+  #Login .form-c{
+    display: unset;
+    width: 100%;
+  }
+  #Login .about-c{
+    display: unset;
+    width: 100%;
+    float: right;
+    height: 80px;
+  }
+  #Login .about, #Login .triangles, #Login .about .info{
+    border-radius: 5px 5px 0 0;
+  }
+  #Login .form{
+    width: 90%;
+  }
+  #Login .about .info{
+    padding: 10px 5px 5px 5px;
+  }
+  #Login .about .logo{
+    display: inline-block;
+    float: right;
+    margin: unset;
+    margin-right: 10%;
+    width: 80px;
+    height: 80px;
+  }
+  #Login .about .title{
+    display: inline-block;
+    width: calc(80% - 80px);
+    line-height: 80px;
+    height: 80px;
+  }
+}
+
+@media (min-width: 400px) and (max-width: 499.98px) {
+  #Login {
+    padding: 50px 0;
+  }
+  #Login {
+    display: unset;
+    width: 80%;
+    margin-right: 10%;
+  }
+  #Login .form-c{
+    display: unset;
+    width: 100%;
+    float: right;
+  }
+  #Login .about-c{
+    display: unset;
+    width: 100%;
+    float: right;
+    height: 100px;
+  }
+  #Login .about, #Login .triangles, #Login .about .info{
+    border-radius: 5px 5px 0 0;
+  }
+  #Login .form{
+    width: 80%;
+    float: right;
+    margin-right: 10%;
+  }
+  #Login .about .info{
+    padding: 10px;
+  }
+  #Login .about .logo{
+    display: inline-block;
+    float: right;
+    margin: unset;
+    margin-right: 10%;
+    width: 100px;
+    height: 100px;
+  }
+  #Login .about .title{
+    display: inline-block;
+    width: calc(80% - 100px);
+    line-height: 100px;
+    height: 100px;
+  }
+}
+
+@media (min-width: 500px) and (max-width: 599.98px) {
+  #Login {
+    padding: 50px 0;
+  }
+  #Login {
+    display: unset;
+    width: 80%;
+    margin-right: 10%;
+  }
+  #Login .form-c{
+    display: unset;
+    width: 100%;
+    float: right;
+  }
+  #Login .about-c{
+    display: unset;
+    width: 100%;
+    float: right;
+    height: 100px;
+  }
+  #Login .about, #Login .triangles, #Login .about .info{
+    border-radius: 5px 5px 0 0;
+  }
+  #Login .form{
+    width: 70%;
+    float: right;
+    margin-right: 15%;
+  }
+  #Login .about .info{
+    padding: 10px;
+  }
+  #Login .about .logo{
+    display: inline-block;
+    float: right;
+    margin: unset;
+    margin-right: 10%;
+    width: 100px;
+    height: 100px;
+  }
+  #Login .about .title{
+    display: inline-block;
+    width: calc(80% - 100px);
+    line-height: 100px;
+    height: 100px;
+  }
+}
+
+@media (min-width: 600px) and (max-width: 699.98px) {
+  #Login {
+    padding: 50px 0;
+  }
+  #Login {
+    display: unset;
+    width: 80%;
+    margin-right: 10%;
+  }
+  #Login .form-c{
+    display: unset;
+    width: 100%;
+    float: right;
+  }
+  #Login .about-c{
+    display: unset;
+    width: 100%;
+    float: right;
+    height: 100px;
+  }
+  #Login .about, #Login .triangles, #Login .about .info{
+    border-radius: 5px 5px 0 0;
+  }
+  #Login .form{
+    width: 70%;
+    float: right;
+    margin-right: 15%;
+  }
+  #Login .about .info{
+    padding: 10px;
+  }
+  #Login .about .logo{
+    display: inline-block;
+    float: right;
+    margin: unset;
+    margin-right: 10%;
+    width: 100px;
+    height: 100px;
+  }
+  #Login .about .title{
+    display: inline-block;
+    width: calc(80% - 100px);
+    line-height: 100px;
+    height: 100px;
+  }
+}
+
+@media (min-width: 700px) and (max-width: 799.98px) {
+  #Login {
+    padding: 50px 0;
+  }
+  #Login {
+    width: 90%;
+    margin-right: 5%;
+  }
+}
+
+@media (min-width: 800px) and (max-width: 899.98px) {
+  #Login {
+    width: 80%;
+    margin-right: 10%;
+  }
+}
+
+@media (min-width: 900px) and (max-width: 999.98px) {
+  #Login {
+    width: 80%;
+    margin-right: 10%;
+  }
+}
+
+@media (min-width: 1000px) and (max-width: 1099.98px) {
+  #Login {
+    width: 70%;
+    margin-right: 15%;
+  }
+}
+
+@media (min-width: 1100px) and (max-width: 1199.98px) {
+  #Login {
+    width: 70%;
+    margin-right: 15%;
+  }
+}
+
+@media (min-width: 1200px) {
+}

package/src/lib/components/login/login.component.html

@@ -0,0 +1,27 @@
+<div id="Login">
+  <div class="triangles">
+    <i class="triangle triangle-1 fas fa-caret-left"></i>
+    <i class="triangle triangle-2 fas fa-caret-left"></i>
+    <i class="triangle triangle-3 fas fa-caret-left"></i>
+  </div>
+  <div class="about-c">
+    <div class="about">
+      <div class="info">
+        <div class="logo"></div>
+        <div class="title">
+          {{ l('Base') }}
+        </div>
+        <div class="sub-title">
+          {{ l('BaseDesc') }}
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="form-c">
+    <ng-container *ngFor="let step of login.steps; let i = index">
+      <div class="form" *ngIf="i === login.active">
+        <lib-form [form]=step.form></lib-form>
+      </div>
+    </ng-container>
+  </div>
+</div>

package/src/lib/components/login/login.component.ts

@@ -0,0 +1,145 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {LangClass} from '../../classes/lang.class';
+import {LoginClass, LoginStepClass} from '../../classes/login.class';
+import {FormClass, InputClass, Progress} from '../../classes/form.class';
+import {InputError, InputType, Method} from '../../classes/enum.class';
+import {RequestClass} from '../../classes/request.class';
+import {HelperClass} from '../../classes/helper.class';
+import {PsToolkitUiConfigService} from '../../services/config.service';
+
+@Component({
+    selector: 'lib-login',
+    templateUrl: './login.component.html',
+    styleUrls: ['./login.component.css']
+})
+export class LoginComponent implements OnInit{
+  @Input()
+  login: LoginClass;
+  mobile: InputClass;
+  username: InputClass;
+  l: (k, v?) => string;
+  constructor(public config: PsToolkitUiConfigService){
+    const lang = new LangClass(config.currentLang, config.strings);
+    this.l = (key: string, v = null): string => {
+      return lang.get('Public', 'Login', key, v);
+    };
+  }
+  ngOnInit(): void {
+    if (this.login.type === 'Sms'){
+      const sendCodeForm = new FormClass(this.config.environment, this.l, 'SendCode', true, this.login.sendCodeUrl, 'p-h-50');
+      const sendCode = new InputClass(this.config.environment, this.l, 'SendCode', 'fa-duotone fa-paper-plane', InputType.Submit);
+      sendCodeForm.subName = 'SendCodeSubTitle';
+      this.mobile = new InputClass(this.config.environment, this.l, 'Mobile',
+        'fa-duotone fa-mobile-alt', InputType.Mobile, 'm-b-10 h-45', '', true, 4, 50);
+      sendCodeForm.onSuccess = () => {
+        loginForm.subName = this.l('LoginSmsSubTitle', this.mobile.data());
+        this.mobile.type = InputType.Hidden;
+        code.progress.start();
+        this.login.steps[1].show();
+        setTimeout(() => {
+          code.focus();
+        }, 100);
+      };
+      sendCodeForm.inputs = [
+        this.mobile,
+        sendCode
+      ];
+      sendCode.onClick = () => {
+        sendCodeForm.submit();
+      };
+      const loginForm = new FormClass(this.config.environment, this.l, 'LoginSms', true, this.login.loginUrl, 'p-h-50');
+      loginForm.subName = this.l('LoginSmsSubTitle', '');
+      loginForm.onSuccess = (result) => {
+        this.login.setCookie(result);
+        if (this.login.steps.length > 2 && result.CurrentUser === null){
+          this.login.steps[2].show(result.StepData);
+        } else {
+          this.login.onSuccess(result);
+        }
+      };
+      loginForm.onFailed = (msg) => {
+        code.clear();
+        this.mobile.error = InputError.NotExist;
+        this.mobile.type = InputType.Mobile;
+        setTimeout(() => {
+          this.mobile.focus();
+        }, 100);
+        this.login.steps[0].show();
+      };
+      const code = new InputClass(this.config.environment, this.l, 'Code',
+        'fa-duotone fa-unlock-alt', InputType.Number, 'm-b-10 h-45', null, true, 1111, 9999);
+      const labelResend = new InputClass(this.config.environment, this.l, 'ReSendCodeDes',
+        null, InputType.Label, 'comp resend-code');
+      code.progress = new Progress(120);
+      code.progress.onStart = () => {
+        labelResend.value = null;
+      };
+      code.progress.onEnd = () => {
+        labelResend.value = 'ReSendCodeDes';
+      };
+      labelResend.onClick = () => {
+        labelResend.name = '(' + this.l('LoadingComp', 'Send') + ')';
+        new RequestClass(this.config.environment).send(this.login.reSendCodeUrl, Method.Post, loginForm.data(), null, () => {
+          labelResend.name = 'ReSendCodeDes';
+          code.progress.start();
+        }, (error) => {
+          HelperClass.addNotification(this.l(error));
+          labelResend.name = 'ReSendCodeDes';
+        });
+      };
+      const login = new InputClass(this.config.environment, this.l, 'LoginSms', 'fa-duotone fa-sign-in-alt', InputType.Submit);
+      loginForm.inputs = [
+        this.mobile,
+        code,
+        labelResend,
+        login
+      ];
+      login.onClick = () => {
+        loginForm.submit();
+      };
+      const loginStep = new LoginStepClass(loginForm);
+      loginStep.show = () => {
+        this.login.active = 1;
+      };
+      const sendCodeStep = new LoginStepClass(sendCodeForm);
+      sendCodeStep.show = () => {
+        this.login.active = 0;
+      };
+      this.login.steps.unshift(loginStep);
+      this.login.steps.unshift(sendCodeStep);
+      setTimeout(() => {
+        this.mobile.focus();
+      }, 100);
+    } else if (this.login.type === 'Password'){
+      const loginForm = new FormClass(this.config.environment, this.l, 'LoginPassword', true, this.login.loginUrl, 'p-h-50');
+      loginForm.subName = 'LoginPasswordSubTitle';
+      const login = new InputClass(this.config.environment, this.l, 'LoginPassword', 'fa-duotone fa-sign-in-alt', InputType.Submit);
+      loginForm.onSuccess = (result) => {
+        this.login.setCookie(result);
+        if (this.login.steps.length > 1 && result.CurrentUser === null){
+          this.login.steps[1].show(result.StepData);
+        } else {
+          this.login.onSuccess(result);
+        }
+      };
+      this.username = new InputClass(this.config.environment, this.l, 'Username',
+        'fa-duotone fa-user', InputType.Text, 'm-b-10 h-45', '', true, 4, 50);
+      loginForm.inputs = [
+        this.username,
+        new InputClass(this.config.environment, this.l, 'Password', 'fa-duotone fa-key', InputType.Password, 'm-b-10 h-45', '', true, 5, 50),
+        login
+      ];
+      login.onClick = () => {
+        loginForm.submit();
+      };
+      const loginStep = new LoginStepClass(loginForm);
+      loginStep.show = () => {
+        this.login.active = 0;
+      };
+      this.login.steps.unshift(loginStep);
+      setTimeout(() => {
+        this.username.focus();
+      }, 100);
+    }
+  }
+}

package/src/lib/components/modal/modal.component.css

@@ -0,0 +1,60 @@
+.modal{
+  display: none;
+  position: fixed;
+  overflow-y: auto;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--black-t-44);
+  z-index: 999;
+}
+.modal .content{
+  float: right;
+  width: 40%;
+  margin: 50px 30%;
+  background-color: white;
+  border-radius: 5px;
+  box-shadow: var(--box-shadow-modal);
+  z-index: 2;
+  position: relative;
+}
+.modal .content .header{
+  float: right;
+  width: 100%;
+  position: relative;
+  text-align: center;
+}
+.modal .content .header .title{
+  height: 40px;
+  width: 100%;
+  line-height: 40px;
+  float: left;
+  font-family: VazirBold;
+  font-size: 18px;
+}
+::ng-deep .modal .content > lib-form-button .form-input-con.button{
+  position: absolute;
+  left: -25px;
+  top: -10px;
+  z-index: 5;
+}
+.modal .content .body{
+  float: right;
+  width: 100%;
+  position: relative;
+}
+.modal .content .footer{
+  float: right;
+  width: 100%;
+  background-color: var(--base-22);
+  height: 50px;
+}
+.modal .content .footer:before{
+  content:"";
+  border: 0;
+  height: 1px;
+  width: 100%;
+  float: right;
+  background-image: linear-gradient(to right, rgba(51, 51, 51, 0), rgba(51, 51, 51, 0.25), rgba(51, 51, 51, 0));
+}

package/src/lib/components/modal/modal.component.html

@@ -0,0 +1,12 @@
+<div [id]="modal.id + 'Modal'" class="modal">
+  <div [className]="(modal.class ? modal.class : '') + ' content'">
+    <lib-form-button [inp]="close"></lib-form-button>
+    <div class="body">
+      <ng-content></ng-content>
+      <lib-form *ngIf="modal.form != null && modal.firstForm" [form]="modal.form"></lib-form>
+      <lib-table *ngIf="modal.table != null" [table]="modal.table"></lib-table>
+      <lib-form *ngIf="modal.form != null && !modal.firstForm" [form]="modal.form"></lib-form>
+      <lib-accordion *ngIf="modal.accordion != null" [accordion]="modal.accordion"></lib-accordion>
+    </div>
+  </div>
+</div>

package/src/lib/components/modal/modal.component.ts

@@ -0,0 +1,23 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {ModalClass} from '../../classes/modal.class';
+import {InputClass} from '../../classes/form.class';
+import {InputType} from '../../classes/enum.class';
+
+@Component({
+  selector: 'lib-modal',
+  templateUrl: './modal.component.html',
+  styleUrls: ['./modal.component.css']
+})
+export class ModalComponent implements OnInit{
+  @Input()
+  modal: ModalClass;
+  close: InputClass;
+  constructor(){
+  }
+  ngOnInit(): void {
+    this.close = new InputClass(this.modal.environment, this.modal.l, null, 'fa-duotone fa-times', InputType.Icon, 'w-u h-30 red');
+    this.close.onClick = () => {
+      this.modal.hide();
+    };
+  }
+}