mockup

app/package.json

@@ -34,7 +34,7 @@
     "@types/twitter-text": "^2.0.0",
     "body-parser": "^1.19.0",
     "com-sarriaroman-photoviewer": "1.1.18",
-    "cordova-android": "^7.1.4",
+    "cordova-android": "7.1.4",
     "cordova-plugin-browsertab": "^0.2.0",
     "cordova-plugin-buildinfo": "^2.0.3",
     "cordova-plugin-compat": "^1.2.0",
@@ -97,7 +97,9 @@
       },
       "com-sarriaroman-photoviewer": {},
       "cordova-plugin-compat": {},
-      "cordova-plugin-camera": {},
+      "cordova-plugin-camera": {
+        "ANDROID_SUPPORT_V4_VERSION": "27.+"
+      },
       "cordova-sqlite-storage": {},
       "cordova-plugin-statusbar": {}
     },

app/src/pages/about/about.html

@@ -1,11 +1,33 @@
 <ion-header>
   <ion-navbar>
-    <ion-title>About HybridOSN</ion-title>
+    <ion-title>About HOSN</ion-title>
   </ion-navbar>
 </ion-header>
 
 
 <ion-content padding>
-  <p>Hybrid OSN is a hybrid Twitter client for Android. While Twitter can be used as usual, data can also be securely exchanged with other users via a P2P network. Therefore Twitter is not able to analyse, sell or censor this data.</p>
+  <p>HOSN is an open source app that allows you to use Twitter with additional means of
+PRIVACY control. Besides using Twitter normally, HOSN provides you with the ability to
+tweet privately and like tweets anonymously. Your private actions are encrypted and
+securely stored in a private network, which is accessible only to your followers away from the commercial service providers.</p>
+
+	<div class="about-image">
+      <img src="assets/imgs/about.PNG" alt="About">
+    </div>
+
   <p>Hybrid OSN was developed by Carsten Porth under the supervision of Aidmar Wainakh and Jörg Daubert as part of a master thesis at TU Darmstadt. It is a prototype which was created as proof of concept.</p>
+
+  <h3>Functionality</h3>
+	  <p>1. Anonymous Like: like a tweet without disclosing your identity, thus, Likes cannot be used to track your behavior on Twitter and infer sensitive information about you. The publisher of the tweet will receive your anonymous Like with no link to you.</p>
+
+	<p>2. Private Tweet: you would like to share some content with your fellows on Twitter,
+	still do not want this content to be used for any commercial purposes, HOSN enables
+	you to tweet that content privately. Your private tweets will be encrypted and stored
+	away from Twitter Inc. in a private network, where no service providers are taking
+	advantage of your data. The private network is decentralized and built by many
+	users’ devices such that no central authority controls it.</p>
+
+	<p>HOSN opens the door for public and private communication simultaneously using your
+	Twitter account. You do not need to switch to a new social network to enjoy your right to PRIVACY. HOSN brings PRIVACY to your favorite social network.</p>
+
 </ion-content>

app/src/pages/login/login.html

@@ -6,7 +6,10 @@
     </div>
   </div>
   <div class="content">
-    <h1>Hybrid OSN</h1>
+    <h1>HOSN</h1>
+    <small><b>Twitter (as you know it) with additional means of PRIVACY control</b></small>
+<small> HOSN allows you to whisper privately to your fellows beyond the knowledge of</small>
+                     <small>Twitter or any third party</small>
     <button ion-button outline block (click)="login()">Login</button>
     <a href="#" (click)="showAbout()">Learn more</a>
   </div>

app/src/pages/mock-login/mock-login.html

@@ -1,19 +1,65 @@
-<h2>Login</h2>
+
+<ion-header>
+    <ion-icon name="close" style="margin-top: 11px; margin-left: 9px;"></ion-icon>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+    <ion-icon name="lock"></ion-icon>&nbsp;
+    <small><b>api.twitter.com</b></small>
+    <ion-icon name="more" class="icon-more" style="float: right; margin-right: 31px; margin-top: 11px;"></ion-icon>
+</ion-header>
+
+<ion-content>
+<div class="Register-twitter">
+    <ion-icon name="logo-twitter" class="icon-twitterlogo" style="color: #1DA1F2; size: 5px; margin-top: 11px; margin-left: 11px;"></ion-icon>
+    <small class="register">Register on twitter ></small>
+</div>
+
+<div style="margin-left: 15px;">
+<h1>HOSN Twitter(TU Darmstadt) grant access to your account?</h1>    
+</div>
+
+<div class="twitter-api-logo">
+    <img src="assets/imgs/twitter-api.PNG" alt="Logo">
+    <div class="second_header"><span class="sh_header">HOSN Twitter(TU Darmstadt)</span>
+    www.tk.informatik.tu-darmstadt.de/de/telecooperation-group/</div>
+</div>
+
+
 <form [formGroup]="loginForm" class="login" (ngSubmit)="onSubmit()">
     <div class="form-group">
-        <input type="text" formControlName="username"  placeholder="Username" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.username.errors }" />
+        <input type="text" formControlName="username" placeholder="Nutzername oder E-mail" class="form-control username1" [ngClass]="{ 'is-invalid': submitted && f.username.errors }" />
         <div *ngIf="submitted && f.username.errors" class="invalid-feedback">
             <div *ngIf="f.username.errors.required">Username is required</div>
         </div>
     </div>
     <div class="form-group">
-        <input type="password" formControlName="password" placeholder="Password"  class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
+        <input type="password" formControlName="password" placeholder="Passwort"  class="form-control password1" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
         <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
             <div *ngIf="f.password.errors.required">Password is required</div>
         </div>
     </div>
+
+    <div>
+        <input type="checkbox" name="remember" value="Bike"> Remember me . <span class="forgot_pass" style="color: #1DA1F2;">Forgot your password?</span>
+    </div>
+
     <div class="form-group">
-        <button [disabled]="loading" class="btn btn-primary login-btn">Login</button>
-        <img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+        <button [disabled]="loading" class="btn btn-primary login-btn">Log In</button>
+        <!-- <img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" /> -->
+        <button [disabled]="loading" class="btn btn-primary close-btn">Cancel</button>       
     </div>
-</form>
+</form>
+
+<div>
+    <p style="color: #1DA1F2; margin-left: 15px;">This application can:</p>
+    <ul>
+      <li>See tweets (including protected tweets) from your timeline, as well as your lists and collections.</li>
+      <li>See your Twitter profile information and account settings.</li>
+      <li>See accounts that you are following or that you have muted and blocked.</li>
+      <li>Follow and unroll accounts for you.</li>
+      <li>Update your profile and account settings.</li>
+      <li>Post and delete tweets for you, and interact with tweets that others have posted for you (e.g., like and un-like, like, reply to a tweet, or send a retweet).</li>
+      <li>Create, manage and delete lists and collections for you.</li>
+      <li>Mute, block and report accounts for you.</li>
+      <li>You can find out more about permissions for third-party apps in the Help Center.</li>
+    </ul> 
+</div>
+</ion-content>

app/src/pages/mock-login/mock-login.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { MockLoginPage } from './mock-login';
+
+@NgModule({
+  declarations: [
+    MockLoginPage,
+  ],
+  imports: [
+    IonicPageModule.forChild(MockLoginPage),
+  ],
+})
+export class MockLoginPageModule {}

app/src/pages/mock-login/mock-login.scss

@@ -1,119 +1,97 @@
+mock-login{
+	
+	ion-header{
+		margin-top: 2px;
+		margin-left: 5px;
+		height: 56px;
+	}	
 
-.login {
-  background: #eceeee;
-  border: 1px solid #42464b;
-  border-radius: 6px;
-  height: 257px;
-  margin: 20px auto 0;
-  width: 298px;
-}
-.login h1 {
-  background-image: linear-gradient(top, #f1f3f3, #d4dae0);
-  border-bottom: 1px solid #a6abaf;
-  border-radius: 6px 6px 0 0;
-  box-sizing: border-box;
-  color: #727678;
-  display: block;
-  height: 43px;
-  font: 600 14px/1 'Open Sans', sans-serif;
-  padding-top: 14px;
-  margin: 0;
+	.Register-twitter{
+		margin-top: 5px;
+		height: 38px;
+		width: 100%;
+		border-bottom: 1px solid #c8c7cc;
+	}
+
+	.register{
+		float: right;
+	    margin-top: 11px;
+	    margin-right: 23px;
+	    color: grey;
+	}
+
+	.twitter-api-logo img{
+		width: 12%;
+    	height: 46px;
+	}
+
+	.twitter-api-logo{
+		margin-top: 32px;
+		margin-left: 15px;
+	}
+
+	.second_header{
+		width: 80%;
+    	float: right;
+    	color: #b0aeb6;
+	}
+
+	.sh_header{
+		font-size: 21px;
+	}
+	.login{
+		margin-top: 51px;
+		padding: 24px;
+	}
+	.forgot_pass{
+
+	}
+
+	.username1{
+		margin-bottom: 36px;
+    	width: 360px;
+    	padding: 4px;
+	}
+
+	.password1{
+	    margin-bottom: 36px;
+    	width: 360px;
+    	padding: 4px;
+	}
+
+
+	ion-icon .icon-more{
+	float: right;
+	}
+
+	ion-icon .icon-twitterlogo{
+	color: #1DA1F2;
+	}
+
+	.login-btn{
+	 display: inline-block;
   text-align: center;
-  text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
-}
-input[type="password"], input[type="text"] {
-  background: url('http://i.minus.com/ibhqW9Buanohx2.png') center left no-repeat, linear-gradient(top, #d6d7d7, #dee0e0);
-  border: 1px solid #a1a3a3;
+  text-decoration: none;
+  margin: 34px 0;
+  border: solid 1px transparent;
   border-radius: 4px;
-  box-shadow: 0 1px #fff;
-  box-sizing: border-box;
-  color: #696969;
-  height: 39px;
-  margin: 31px 0 0 29px;
-  padding-left: 37px;
-  transition: box-shadow 0.3s;
-  width: 240px;
-}
-input[type="password"]:focus, input[type="text"]:focus {
-  box-shadow: 0 0 4px 1px rgba(55, 166, 155, 0.3);
-  outline: 0;
-}
-.show-password {
-  display: block;
-  height: 16px;
-  margin: 26px 0 0 28px;
-  width: 87px;
-}
-input[type="checkbox"] {
-  cursor: pointer;
-  height: 16px;
-  opacity: 0;
-  position: relative;
-  width: 64px;
-}
-input[type="checkbox"]:checked {
-  left: 29px;
-  width: 58px;
-}
-.toggle {
-  background: url(http://i.minus.com/ibitS19pe8PVX6.png) no-repeat;
-  display: block;
-  height: 16px;
-  margin-top: -20px;
-  width: 87px;
-  z-index: -1;
-}
-input[type="checkbox"]:checked + .toggle { background-position: 0 -16px }
-.forgot {
-  color: #7f7f7f;
-  display: inline-block;
-  float: right;
-  font: 12px/1 sans-serif;
-  left: -19px;
-  position: relative;
+  padding: 9px 7px;
+  color: #ffffff;
+  background-color: #1DA1F2;
+	}
+
+	.close-btn{
+	display: inline-block;
+  text-align: center;
   text-decoration: none;
-  top: 5px;
-  transition: color .4s;
-}
-.forgot:hover { color: #3b3b3b }
-.login-btn {
-  width:240px;
-  height:35px;
-  display:block;
-  font-family:Arial, "Helvetica", sans-serif;
-  font-size:16px;
-  font-weight:bold;
-  color:#fff;
-  text-decoration:none;
-  text-transform:uppercase;
-  text-align:center;
-  text-shadow:1px 1px 0px #37a69b;
-  padding-top:6px;
-  margin: 29px 0 0 29px;
-  position:relative;
-  cursor:pointer;
-  border: none;  
-  background-color: #37a69b;
-  background-image: linear-gradient(top,#3db0a6,#3111);
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 5px;
-  border-bottom-left-radius:5px;
-  box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #497a78, 0px 10px 5px #999;
-}
-
-.shadow {
-  background: #000;
-  border-radius: 12px 12px 4px 4px;
-  box-shadow: 0 0 20px 10px #000;
-  height: 12px;
-  margin: 30px auto;
-  opacity: 0.2;
-  width: 270px;
-}
-
-
-.login-btn:active {
-  top:3px;
-  box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #31524d, 0px 5px 3px #999;
+  margin: 34px 0;
+  border: solid 1px transparent;
+  border-radius: 4px;
+  padding: 9px 7px;
+  color: #ffffff;
+  background-color: #ebebeb;
+
+	}
+
+
 }

app/src/pages/mock-login/mock-login.ts

@@ -4,7 +4,12 @@ import { first } from 'rxjs/operators';
 import {NavController} from "ionic-angular";
 import { HomePage } from "../home/home";
 
-@Component({templateUrl: 'mock-login.html'})
+@IonicPage()
+@Component({
+    selector: "mock-login",
+    templateUrl: 'mock-login.html'
+})
+
 export class MockLoginPage implements OnInit {
     loginForm: FormGroup;
     loading = false;

app/src/providers/mock-provider/tweet.json

@@ -255,7 +255,7 @@
   "created_at": "Wed Sep 29 19:54:41 +0000 2019",
   "id": 1176948153297362947,
   "id_str": "1176948153297362947",
-  "full_text": "Private tweet",
+  "full_text": "Thesis hosn",
   "private_tweet": true,
   "truncated": false,
   "display_text_range": [

app/src/providers/p2p-database-gun/p2p-database-gun.ts

@@ -15,7 +15,7 @@ export class P2pDatabaseGunProvider {
    * Hashtags are stored without reference to the users to provide these information on an extra dashboard to twitter
    * @param hashtagEntity extracted hashtags
    */
-  public async publishHashtags(hashtagEntity): Promise < void > {
+  public async publishHashtags(hashtagEntity): Promise <void> {
     const timestamp = new Date().setHours(0, 0, 1, 0);
     const hashtagsSeparated = hashtagEntity
       .map(el => el.hashtag)

app/src/providers/twitter-api/twitter-api.ts

@@ -43,6 +43,8 @@ export class TwitterApiProvider {
       include_entities: true,
       tweet_mode: "extended",
       max_id: maxId
+    },function(req,reply,response){
+      console.log('response from callback is :',response);
     });
     return res.data;
   }