@chat21/chat21-ionic 2.0.13 → 3.0.5-9.2

package/src/app/components/authentication/login/login.component.ts

@@ -0,0 +1,174 @@
+import { Injectable, Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ToastController, IonInput } from '@ionic/angular';
+import { AppConfigProvider } from '../../../services/app-config';
+
+
+// Logger
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+
+type UserFields = 'email' | 'password';
+type FormErrors = { [u in UserFields]: string };
+
+@Injectable()
+
+@Component({
+  selector: 'component-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.scss'],
+})
+
+export class LoginComponent implements OnInit {
+  @Input() showSpinnerInLoginBtn: boolean;
+  @Input() translationMap: Map<string, string>;
+  @Input() companyLogoBlackUrl: string;
+  @Input() companyName: string;
+  @Output() eventSignInWithEmailAndPassword = new EventEmitter<{ email: string, password: string }>();
+
+  // (eventSignInWithEmailAndPassword)="returnSignInWithEmailAndPassword($event)"
+
+  // @ViewChild('email', {  static: false })  emailInputEl: IonInput;
+  userForm: FormGroup;
+  companySiteUrl: string;
+  emailMustBeAValidEmail: string;
+  DASHBOARD_URL: string;
+
+  formErrors: FormErrors = {
+    'email': '',
+    'password': '',
+  };
+  validationMessages = {
+    'email': {
+      'required': 'Email is required',
+      'pattern': 'Email must be a valid email',
+    },
+    'password': {
+      'required': 'Password is required',
+    },
+  };
+  // 'minlength': 'Password must be at least 6 characters long',
+  private logger: LoggerService = LoggerInstance.getInstance();
+
+  constructor(
+    public formBuilder: FormBuilder,
+    public toastController: ToastController,
+    public appConfig: AppConfigProvider
+  ) { }
+
+  ngOnInit() {
+    this.buildForm();
+    this.DASHBOARD_URL = this.appConfig.getConfig().dashboardUrl;
+    this.logger.log('LOGIN-COMP OnInit DASHBOARD_URL', this.DASHBOARD_URL)
+    // this.showSpinnerInLoginBtn = false;
+  }
+  // ngAfterViewChecked() {
+  //   this.emailInputEl.setFocus()
+  // }
+
+  buildForm() {
+    const EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;
+    this.userForm = this.formBuilder.group({
+      email: ['', [Validators.required, Validators.pattern(EMAIL_REGEXP)]],
+      password: ['', Validators.compose([Validators.required])]
+    });
+
+    // Validators.minLength(6),
+    this.userForm.valueChanges.subscribe((data) => this.onValueChanged(data));
+    this.onValueChanged(); // reset validation messages
+
+  }
+
+  // Updates validation state on form changes.
+  onValueChanged(data?: any) {
+    if (!this.userForm) { return; }
+    const form = this.userForm;
+    for (const field in this.formErrors) {
+      // tslint:disable-next-line:max-line-length
+      if (Object.prototype.hasOwnProperty.call(this.formErrors, field) && (field === 'email' || field === 'password')) {
+        // clear previous error message (if any)
+        this.formErrors[field] = '';
+        const control = form.get(field);
+        if (control && control.dirty && !control.valid) {
+          const messages = this.validationMessages[field];
+          // this.logger.log('buildForm onValueChanged messages',messages)
+          if (control.errors) {
+            for (const key in control.errors) {
+              if (Object.prototype.hasOwnProperty.call(control.errors, key)) {
+                this.formErrors[field] += this.translationMap.get(`${(messages as { [key: string]: string })[key]}`);
+                // this.logger.log('buildForm onValueChanged   this.formErrors[field] ',  this.formErrors[field])
+
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+
+  goToTiledekV1() { }
+
+
+  goToResetPsw() {
+    const url = this.DASHBOARD_URL + '#/forgotpsw';
+    window.open(url);
+  }
+
+  goToSignupPage() {
+    const url = this.DASHBOARD_URL + '#/signup';
+    window.open(url, "_self");
+  }
+
+
+  /**
+   * signInWithEmailAndPassword
+   * @param email
+   * @param psw
+   */
+  signInWithEmailAndPassword() {
+    const emailValue = this.userForm.value.email;
+    const pswValue = this.userForm.value.password;
+    this.showSpinnerInLoginBtn = true;
+    this.eventSignInWithEmailAndPassword.emit({ email: emailValue, password: pswValue });
+  }
+
+  /** */
+  showErrorSignIn(error: string) {
+    this.logger.error('showErrorSignIn TOAST');
+    // const error =  this.translationMap.get('LABEL_SIGNIN_ERROR');
+    this.showSpinnerInLoginBtn = false;
+    this.presentToast(error);
+
+  }
+
+  /** */
+  /** */
+  async presentToast(error: string) {
+    const toast = await this.toastController.create({
+      message: error,
+      duration: 2000,
+      header: 'Attenzione',
+      position: 'top',
+      buttons: null
+    });
+    this.toastController.dismiss().then((obj) => {
+      this.logger.log('dismesso');
+    }).catch(() => {
+      this.logger.log('catch');
+    }).finally(() => {
+
+      this.showSpinnerInLoginBtn = false;
+      this.logger.log('finally', this.showSpinnerInLoginBtn);
+    });
+
+    toast.present();
+
+  }
+
+
+
+
+
+
+}

package/src/app/components/contacts-directory/contacts-directory.component.html

@@ -0,0 +1,22 @@
+
+<ion-content padding>
+  <ion-searchbar id="contacts-searchbar" debounce="500" (ionInput)="onSearchInput($event)"></ion-searchbar>
+  <ion-list>
+    
+    <ion-item button="true" lines="none" class="ion-no-padding" *ngFor="let user of contacts" (click)="goToChat(user)">
+      <div tabindex="0"></div>
+      <!-- <div [class.selected]="user.uid === uidUserSelected"></div> [style.background-color]="user.color"-->
+      <ion-avatar slot="start">
+        <div #avatarPlaceholder class="avatar-placeholder" [ngStyle]="{'background':  'linear-gradient(rgb(255,255,255) -125%,' + user.color + ')'}" [innerHTML]="user.avatar"></div>
+        <div *ngIf="user.imageurl" #avatarImage class="avatar-profile" [style.background-image]="'url(' + user.imageurl + ')'"></div>
+        <!-- <div *ngIf="getImageAvatar(conversation.sender)" #avatarImage class="avatar-profile" [style.background-image]="'url(' + getImageAvatar(conversation.sender) + ')'"></div> -->
+      </ion-avatar>
+      <ion-label>
+        <h2>{{ user.fullname }}</h2>
+        <p>{{ user.uid }}</p>
+      </ion-label>
+      
+    </ion-item>
+
+  </ion-list>
+</ion-content>

package/src/app/components/contacts-directory/contacts-directory.component.scss

@@ -0,0 +1,123 @@
+ion-item {
+    cursor: pointer;
+    height: 64px;
+    position: relative;
+    display: flex;
+    text-decoration: none;
+    padding-left: 8px;
+    padding-right: 8px;
+    --padding-start: 0;
+    --inner-padding-end: 0;
+    .selected {
+        border-radius: 10px;
+        padding-left: 8px;
+        padding-right: 8px;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        z-index:-1;
+        background-color: rgba(0, 0, 0, .05);
+    }
+    ion-avatar {
+        position: relative;
+        padding:0;
+        margin:0 12px 0 8px;
+        height: 50px;
+        width: 50px;
+        min-width: 50px;
+        min-height: 50px;
+        line-height: 50px;
+        .avatar-placeholder {
+            position: absolute;
+            top:0;
+            left:0;
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            text-align: center;
+            font-size: 20px;
+            color:#ffffff;
+            font-weight: 500;
+        }
+        .avatar-profile {
+            position: relative;
+            display: inline-block;
+            width: 100%;
+            height: 100%;
+            background-color: transparent;
+            background-size: cover;
+            background-position: top center;
+            border-radius: 50%;
+            border-color: #c3c3c3;
+            border-style: solid;
+            border-width: 0px;
+        }
+    }
+    ion-label {
+        flex: 1 1 0px;
+        justify-content: center;
+        min-width: 0;
+        padding: 0;
+        font-family: Helvetica, Helvetica, Arial, sans-serif;
+        line-height: 1.28;
+        text-rendering: optimizeLegibility;
+        .conversation_with {
+            color: rgba(0, 0, 0, 1);
+            font-size: 15px;
+            font-weight: 400;
+            line-height: 1.4;
+        }
+        .conversation_message {
+            p {
+                color: rgba(153, 153, 153, 1);
+                font-size: 13px;
+                font-weight: 400;
+                height: 18px;
+                &.not-read {
+                    font-weight:bold;
+                }
+            }
+            
+        }
+        
+    }
+    ion-note {
+        position: absolute;
+        right: 8px;
+        top: 4px;
+        font-size: 10px;
+    }
+    ion-buttons {
+        margin: 0;
+        ion-button {
+            padding: 0;
+            margin: 0;
+            height: 24px;
+            width: 24px;
+            font-size: 10px;
+            --padding-start: 0px;
+            --padding-end: 0px;
+            color: rgba(153, 153, 153, 1);
+            background-color: transparent;
+            &:hover {
+                background-color: rgba(0, 0, 0, .05)
+            }
+        }
+    }
+
+    .notification_point {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background-color: #0b5c89;
+        position: absolute;
+        right: 6px;
+        bottom: 8px;
+    }
+}
+
+ion-searchbar { 
+    --box-shadow: 0px ;
+    --background: rgba(0, 0, 0, 0.05);
+    --border-radius: 10px;
+}

package/src/app/components/contacts-directory/contacts-directory.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { ContactsDirectoryComponent } from './contacts-directory.component';
+
+describe('ContactsDirectoryComponent', () => {
+  let component: ContactsDirectoryComponent;
+  let fixture: ComponentFixture<ContactsDirectoryComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContactsDirectoryComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ContactsDirectoryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/components/contacts-directory/contacts-directory.component.ts

@@ -0,0 +1,109 @@
+import { Component, OnInit, Input, Output, EventEmitter, OnChanges } from '@angular/core';
+import { UserModel } from 'src/chat21-core/models/user';
+import { ImageRepoService } from 'src/chat21-core/providers/abstract/image-repo.service';
+
+// Logger
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+
+@Component({
+  selector: 'component-contacts-directory',
+  templateUrl: './contacts-directory.component.html',
+  styleUrls: ['./contacts-directory.component.scss'],
+})
+export class ContactsDirectoryComponent implements OnInit, OnChanges {
+  @Input() contacts: Array<UserModel>;
+  @Output() onOpenNewChat = new EventEmitter<UserModel>();
+
+  private contactsOrig: Array<UserModel>;
+  uidUserSelected: string;
+  private logger: LoggerService = LoggerInstance.getInstance();
+ 
+  constructor(
+    public imageRepoService: ImageRepoService
+  ) { }
+
+  /**
+   *
+   */
+  ngOnInit() {
+    this.initialize();
+  }
+
+  ngOnChanges() {
+    this.logger.log('ContactsDirectoryComponent contacts', this.contacts)
+    if(this.contacts){
+      this.contacts.forEach(contact => {
+        contact.imageurl = this.imageRepoService.getImagePhotoUrl(contact.uid)
+      });
+    }
+  }
+
+  initialize() {
+    this.contactsOrig = null;
+  }
+  /**
+   *
+   * @param ev
+   */
+  onSearchInput(ev: any) {
+    if (!this.contactsOrig) {
+      this.contactsOrig = this.contacts;
+    }
+    this.logger.log('onSearchInput::: ', ev);
+    const searchTerm = ev.target.value;
+    if (searchTerm && searchTerm.trim() !== '') {
+      const searchKey = 'fullname';
+      this.contacts = this.filterItems(this.contactsOrig, searchTerm, searchKey);
+      this.contacts.sort(this.compareValues(searchKey, 'asc'));
+    } else {
+      this.contacts = this.contactsOrig;
+    }
+  }
+
+
+
+  /**
+   *
+   */
+  goToChat(user: UserModel) {
+    this.uidUserSelected = user.uid
+    this.onOpenNewChat.emit(user);
+  }
+
+
+  /**
+   * filtro array contatti per parola passata
+   * filtro sul campo fullname
+   * @param items
+   * @param searchTerm
+   */
+  private filterItems(items: any, searchTerm: string, key: string) {
+    return items.filter((item: any) => {
+      return item[key].toString().toLowerCase().indexOf(searchTerm.toString().toLowerCase()) > -1;
+    });
+  }
+
+
+  /** */
+  private compareValues(key: string, order = 'asc') {
+    return (a: any, b: any) => {
+      if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) {
+        return 0;
+      }
+      const varA = (typeof a[key] === 'string') ? a[key].toUpperCase() : a[key];
+      const varB = (typeof b[key] === 'string') ? b[key].toUpperCase() : b[key];
+      let comparison = 0;
+      if (varA > varB) {
+        comparison = 1;
+      } else if (varA < varB) {
+        comparison = -1;
+      }
+      return (
+        (order === 'desc') ? (comparison * -1) : comparison
+      );
+    };
+  }
+
+
+}

package/src/app/components/conversation-detail/bubble-day-message/bubble-day-message.component.html

@@ -0,0 +1,3 @@
+<!-- <div class="row-day">
+  <div class="header-day">{{messageDate | amTimeAgo}}</div>
+</div> -->

package/src/app/components/conversation-detail/bubble-day-message/bubble-day-message.component.scss

@@ -0,0 +1,21 @@
+.row-day {
+    padding: 0 10px;
+    text-align: center;
+    width: 100%;
+    margin-top: 15px;
+    margin-bottom: 5px;
+}
+.header-day {
+    background-color: var(--transparent);
+    padding-top: 4px;
+    padding-bottom: 4px;
+    padding-left: 12px;
+    padding-right: 12px;
+    vertical-align: middle;
+    border-radius: 13px;
+    font-size: 14px;
+    font-weight: bold;
+    color: var(--basic-gray);
+    display: inline-block;
+}
+

package/src/app/components/conversation-detail/bubble-day-message/bubble-day-message.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { BubbleDayMessageComponent } from './bubble-day-message.component';
+
+describe('BubbleDayMessageComponent', () => {
+  let component: BubbleDayMessageComponent;
+  let fixture: ComponentFixture<BubbleDayMessageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BubbleDayMessageComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BubbleDayMessageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/components/conversation-detail/bubble-day-message/bubble-day-message.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-bubble-day-message',
+  templateUrl: './bubble-day-message.component.html',
+  styleUrls: ['./bubble-day-message.component.scss'],
+})
+export class BubbleDayMessageComponent implements OnInit {
+  @Input() messageDate = '';
+  constructor() { }
+
+  ngOnInit() {}
+
+}

package/src/app/components/conversation-detail/bubble-my-message/bubble-my-message.component.html

@@ -0,0 +1,54 @@
+<div class="message message-my" [class.first-message]="isFirstMessage" >
+ 
+  <div class="bobble-message" 
+    [class.image]="message.type == 'image'" 
+    [class.no-text]="!message.text" 
+    (mouseover)="showButtonInfo()">
+    <span class="buttonInfo" (click)="presentPopover($event, message)"> </span>
+    
+    <div *ngIf="message.type == 'image';" 
+    (click)="popupUrl(message.metadata.src,'windowName')"
+    >
+      <img 
+        class="message-content message-content-image" 
+        [src]="message.metadata.src" 
+        [width]="getSizeImg(message).width"
+        [height]="getSizeImg(message).height" />
+    </div>
+    
+    <div *ngIf="message.type == 'file';" class="message-content message-content-text" 
+    [innerHTML]="urlify(message.metadata.src, message.metadata.name)"
+    ></div>
+    
+    <div>
+    
+    <!-- <div *ngIf="message.type == 'text'"> -->
+      <div *ngIf="isPopupUrl(message.text); then contentPopup else contentNewTab">here is ignored</div>
+      <ng-template #contentPopup>
+        <div style="text-decoration: underline; padding:8px; cursor: pointer;" (click)="popupUrl(message.text,'windowName')">{{stripTags(message.text)}}</div>
+      </ng-template>
+      <ng-template #contentNewTab>
+        <div class="message-content message-content-text" [innerHTML]="message.text"></div>
+      </ng-template>
+    <!-- </div> -->
+
+    </div>
+    
+    <div class="timestamp-message right">{{message.timestamp | date: 'H:mm'}}</div>
+  </div>
+
+  <div class="attribute-message">
+    <div class="status-message">
+      <span *ngIf="!message.status" class="material-icons">
+        <ion-icon name="time-outline"></ion-icon>
+      </span>
+      <span *ngIf="message.status==MSG_STATUS_SENT" class="material-icons">
+        <ion-icon name="checkmark-outline"></ion-icon>
+      </span>
+      <span *ngIf="message.status==MSG_STATUS_RETURN_RECEIPT" class="material-icons">
+        <ion-icon name="checkmark-done-outline"></ion-icon>
+      </span>
+    </div>
+  </div>
+  
+</div>

package/src/app/components/conversation-detail/bubble-my-message/bubble-my-message.component.scss

@@ -0,0 +1,98 @@
+.message {
+    .bobble-message {
+        position: relative;
+        border-radius: 15px;
+        font-size: 15px;
+        // padding: 5px 10px 10px 10px;
+        display: block;
+        width: auto;
+        max-width: 80%;
+        line-height: 1.34;
+        direction: ltr;
+        padding: 0px;
+        .message-content-image {
+            border-radius: 15px 6px 0px 0px;
+        }
+        &.no-text {
+            line-height: 0;
+            .message-content-image {
+                border-radius: 15px 6px 0px 15px;
+            }
+            .message-content.message-content-text{
+                padding: 0px;
+                height: 0px;
+            }
+            .timestamp-message {
+                background-color: #00000045;
+                padding: 4px;
+                color: white;
+            }
+        }
+        &.image{
+            max-width: 300px;
+        }
+        
+    }
+
+    
+    
+    .message-content:after {
+        content: "\00a0\00a0\00a0\00a0\00a0\00a0";
+    }
+    .timestamp-message {
+        font-size: 10px;
+        padding: 0px;
+        position: absolute;
+        bottom: 2px;
+        right: 6px;
+        line-height: 15px;
+    }
+}
+.message-my {
+    width: 100%;
+    margin-top: 4px;
+    .message-content.message-content-text{
+        color: var(--white)!important;
+        padding: 5px 20px 5px 10px;
+    }
+        
+  
+    .bobble-message {
+        background-color: var(--bobble-blue);
+        color: white;
+        margin-right: 24px;
+        float: right;
+        border-top-right-radius: 6px;
+        border-bottom-right-radius: 6px;
+    }
+    &.first-message {
+        margin-top: 10px;
+        .bobble-message {
+            border-top-right-radius: 12px;
+            border-bottom-right-radius: 0px;
+        }
+    }
+    .timestamp-message {
+        color: var(--white);
+    }
+    .attribute-message {
+        position: absolute;
+        width: 100%;
+        background-color: transparent;
+        bottom: 0;
+        right: 0;
+        .status-message {
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 15px;
+            .material-icons {
+                font-size: 15px;
+                color: var(--basic-blue);
+                position: absolute;
+                bottom: 4px;
+                right: 2px;
+            }
+        }
+    }
+}