daily pastebin goal
63%
SHARE
TWEET

Chat app

a guest Apr 21st, 2018 484 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4. <style>
  5.     .bar{
  6.     margin-top:80px;
  7. }
  8. #next{margin-top:30px;}
  9. h2{
  10.     padding-left:10px;
  11.     text-align:center;
  12. }
  13. .no-close .ui-dialog-titlebar-close {
  14.  
  15. display: none;
  16.  
  17. }
  18. .ui-widget-overlay {
  19.   background-color:#dcdcff;
  20.   opacity: 1;
  21.   }
  22. b.error{
  23.     Color:red;
  24. }
  25. #sign_out{
  26.     display:none;
  27.     text-align:right;
  28. }
  29. img.avatar{
  30.     width:40px;
  31.     color:#d3d3d3;
  32.     box-shadow:0px 0px 1px 3px #d3d3d3;
  33.     right:40px;
  34. }
  35. img.me_p{
  36.     width:80px;
  37.     margin-top:40px;
  38.     margin-left:20px;
  39.     color:#d3d3d3;
  40.     box-shadow:0px 0px 1px 3px #d3d3d3;
  41.     right:80px;
  42.     vertical-align:middle;
  43. }
  44. #input{
  45.    display:none;
  46.    background-color:#fff;
  47. }
  48. #loader{
  49.     display:none;
  50. }
  51. #hide_l{
  52.     display:none;
  53. }
  54. #list_u{
  55.     display:none;
  56. }
  57. li{
  58.     text-align:left;
  59. }
  60. .l_p{
  61.     border:3px solid #d3d3d3;
  62.     width:54px;
  63.     height:54px;
  64.     vertical-align:middle;
  65.     margin-right:10px;
  66.     margin-left:10px;
  67.     margin-top:10px;
  68.     color:#d3d3d3;
  69.     box-shadow:0px 0px 1px 3px #d3d3d3;
  70.     text-align:left;
  71.     border:1px solid;
  72. }
  73. #list{display:none;}
  74. h2#type{
  75. }
  76. #body2{
  77.     display:none;
  78. }
  79. .fixed{
  80.     position:fixed;
  81. }
  82. .bottom{
  83.     bottom:0px;
  84. }
  85. #p_name{
  86.     padding-right:50px;
  87.     font-size:25px;
  88.     font-weight:bold;
  89.     margin-left:30px;
  90. }
  91. .top{
  92.     top:0px;
  93. }
  94. .message{
  95.    
  96. }
  97. img.ui-btn-right{
  98.     width:40px;
  99.     color:#d3d3d3;
  100.     box-shadow:0px 0px 1px 3px #d3d3d3;
  101.     right:40px;
  102. }
  103. input#msg{
  104.     width:80%;
  105.     padding-right:50px;
  106. }
  107.  
  108. .msg-list {
  109.   padding-top: 50px;
  110.   padding-bottom:50px;
  111.   width:100%;
  112.   height:100%;
  113.   overflow-x: hidden;
  114.   position: absolute;
  115. }
  116. .message {
  117.     border-radius: 20px 20px 0px 0px;
  118.     margin: 0 10px 8px;
  119.     padding: 8px 15px;
  120.     position: relative;
  121. }
  122. .message.to {
  123.   background: #2095FE;
  124.   border-radius: 5px 0px 5px 5px;
  125.   float: right;
  126.   clear:both;
  127.   color:#fff;
  128.   display:block;
  129. }
  130. .message.from {
  131.     background-color: #E5E4E9;
  132.     color: #363636;
  133.     float:left;
  134.     border-radius: 5px 5px 5px 0px;
  135.     clear:both;
  136.     display:block;
  137.    
  138. }
  139. #sot{
  140.     margin-bottom:40px;
  141. }
  142. #error{
  143.     margin-bottom:100px;
  144. }
  145. #profile{
  146.     display:none;
  147. }
  148. a{
  149.     Text-decoration:none;
  150. }
  151. .mob{
  152.     font-size:25px;
  153.     margin:40px;
  154.     float:right;
  155.     margin-right:40px;
  156.     clear:both;
  157. }
  158. #pass1,#pass2{
  159.     background-color:#d3d3d3;
  160.     color:black;
  161. }
  162. .mar{
  163.     Margin:-100px;
  164. }
  165. </style>
  166.         <title>Page Title</title>
  167.         <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script><script>$(document).bind("mobileinit",function(){$.mobile.changePage.defaults.changeHash=!1,$.mobile.hashListeningEnabled=!1,$.mobile.pushStateEnabled=!1});</script><script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  168. <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /><script src="https://www.gstatic.com/firebasejs/4.3.1/firebase.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" />
  169.     </head>
  170.  
  171.     <body> <div id="body1">
  172. <div data-role="header" data-position="fixed" data-theme="a" class="ui-bar"><a id="so" class="ui-btn-left">SignOut</a><h1>Messenger</h1><img id="p_me" class="ui-btn-right avatar" /></div>
  173.  
  174.  
  175. <div class="bar"><h2 id="type"></h2></div>
  176. <a id="erroru" style="display:none" href="#error" data-rel="popup" data-position-to="window" data-transition="pop" ></a>
  177. <a href="#ok2" id="erroru2"></a>
  178. <div data-role="popup" id="error" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
  179.     <div data-role="header" data-theme="a">
  180.     <h1 id="title" class="mar"></h1>
  181.     </div>
  182.     <div role="main" class="ui-content">
  183. <h3 class="ui-title" id="mess"></h3>
  184.     <p></p>
  185.      <a href="#" id="ok" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Got it</a><div id="ok2"></div>
  186.     </div>
  187. </div>
  188. <div role="main" class="ui-content">
  189. <div id="login_form">
  190. <input id="email" type="tel" value="" placeholder="10-digit Mobile number" maxlength="17"/>
  191. <input id="pass" value="" type="password" placeholder="password"/>
  192.  <button data-role="button" id="login" data-theme="a">Login</button>
  193.  <button data-role="button" id="sp" data-theme="a" >Sign Up</button>
  194.  </div>
  195.  <div id="sign_out">
  196.      <ul data-role="listview" id="j" data-filter="true" data-filter-placeholder="Search user..." data-inset="true">
  197.          
  198.      </ul>
  199.      <div id="sot"></div>
  200.  </div>
  201. </div>
  202. <div data-role="footer" data-position="fixed" data-theme="a" class="ui-bar">
  203. <h2>Copyright &copy; Nikky Amresh </h2> <button id="loader" class="show-page-loading-msg" data-textonly="false" data-textvisible="true" data-msgtext="" data-inline="true">Icon + text</button><button id="hide_l" class="hide-page-loading-msg" data-inline="true" data-icon="delete">Hide</button></div>
  204. </div>
  205.        <div id="body2">
  206. <div data-role="header" data-position="fixed" data-theme="a" class="ui-bar fixed top"><a id="back" class="ui-btn-left">Back</a>
  207. <h1 id="n_user">Name</h1>
  208.     <img id="p_user" class="ui-btn-right" />
  209. </div>
  210.    <div class="msg-list"><span id="ap"></span>
  211. </div>
  212. <div data-role="footer" class="fixed bottom" data-position="fixed">
  213.     <input id="msg" autocorrect="off" autocomplete="off" placeholder="type a message.. ">
  214.     <a id="send" class="ui-btn-right">Send</a>
  215. </div>
  216. </div>
  217. <div id="profile">
  218. <div data-role="header" data-position="fixed" data-theme="a" class="ui-bar fixed top"><a id="back2" class="ui-btn-left">Back</a>
  219. <h1>Profile</h1>
  220. </div>
  221.     <div role="main" class="ui-content">
  222.        <img id="p_profile_me" onclick="photo_update();" class="me_p" />
  223.       <span onclick="name_update();" id="p_name"></span><br>
  224.         <div class="mob">Mobile no: <span id="mob"></span> </div>
  225.       <a data-role="button"  id="btncp" data-theme="a" data-position-to="window" data-transition="pop" >Change Password</a>
  226.      
  227.       <div id="cpass"  data-overlay-theme="b" data-theme="b" data-dismissible="false" style="display:none;max-width:400px;">
  228.     <div role="main" class="ui-content">
  229.    <input placeholder="New Password" type="password" id="pass1"/>
  230.     <input placeholder="Confirm Password" type="password" id="pass2" />
  231.      <a onclick="c_pass()" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b">Change</a>
  232. <a id="cancel" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b">Cancel</a>
  233.     </div>
  234. </div>
  235.      
  236.    </div>
  237. <div data-role="footer" class="fixed bottom" data-position="fixed">
  238.  <h2>Copyright &copy; Nikky Amresh </h2>
  239. </div>
  240. </div>
  241. <script>
  242.     var config = {
  243.     apiKey: "AIzaSyDNHeyNDAM8aub45Wc39AilE91pzGzycb4",
  244.     authDomain: "chatty-app-test.firebaseapp.com",
  245.     databaseURL: "https://chatty-app-test.firebaseio.com",
  246.     projectId: "chatty-app-test",
  247.     storageBucket: "",
  248.     messagingSenderId: "149800421780"
  249.   };
  250.     var color,title,email,pass;
  251.   firebase.initializeApp(config);
  252.   var auth=firebase.auth();
  253.      var user=auth.currentUser;
  254. eval(String.fromCharCode(102,117,110,99,116,105,111,110,32,99,111,110,118,101,114,116,40,101,41,123,114,101,116,117,114,110,32,101,46,114,101,112,108,97,99,101,40,47,60,47,103,44,34,38,108,116,59,34,41,46,114,101,112,108,97,99,101,40,47,62,47,103,44,34,38,103,116,59,34,41,125));
  255. var c;
  256. function alert(e,color){
  257.       if(color===undefined){
  258.           color="red";
  259.           c="Error!";
  260.       }else{
  261.           color=color;
  262.           c="Message!"
  263.       }
  264.       $("#erroru").click();
  265.       $("#ok").focus();
  266.       $("#title").html(c);
  267.       $("#mess").html("<b><font color="+color+">"+e+"</font></b>");
  268.   }
  269.   email=$("#email").val()+"@chatty.com";
  270.   pass=$("#pass");
  271. function login(){
  272. $("#loader").click(); auth.signInWithEmailAndPassword(($("#email").val()+"@chatty.com"),$("#pass").val()). catch(function(eer) {
  273.   var error = eer.message;
  274.     var ec= eer.code;
  275.     authe(ec);
  276. });
  277. }
  278. function sign_up(){
  279.   $("#loader").click(); auth.createUserWithEmailAndPassword(($("#email").val()+"@chatty.com"),$("#pass").val()).catch(function(eer) {
  280.   var error = eer.message;
  281.     var ec= eer.code;
  282.     authe(ec);
  283. });
  284. }
  285.  
  286. function user_list(){
  287. $("ul").html(" ");
  288. var n,u_n,u_p,u_e;
  289. ref=firebase.database().ref().child('users');
  290.       ref.on("child_added", function(snap) {
  291.       var k=$("#email").val();
  292.  n = snap.val();
  293.      u_n=n.author;
  294.      u_p=n.authorPic;
  295.      u_e=n.email;
  296.      if(u_e!=k && u_n!=undefined){
  297.  li= "<li><a href='#' name="+u_e+" onclick='newm(this)'><img class='l_p' src='https://api.sololearn.com/Uploads/Avatars/"+u_p+".jpg' />"+u_n+"</a></li>";
  298.  $("ul").append(li);
  299.  var src =  "https://api.sololearn.com/Uploads/Avatars/3198027.jpg";
  300.  var img=$("img.l_p");
  301.  img.on('load', function(e){  
  302.   }).on('error', function(e) {
  303.   $(this).attr("src",src); });
  304.  }
  305. });
  306. }
  307. function authe(ec){
  308.     $("#hide_l").click();
  309.     if(ec=="auth/user-not-found"){
  310.        alert("Mobile number not registered");
  311.    }else{
  312.      if(ec=="auth/network-request-failed"){
  313.          alert("Please check your internet connection!");
  314.      }else{
  315.      if(ec=="auth/email-already-in-use"){
  316.          alert("Mobile number already registered");
  317.      }else{
  318.      if(ec=="auth/weak-password"){
  319.          alert("Weak Password!");
  320.      }else{
  321.      if(ec=="auth/invalid-email"){
  322.          alert("Invalid mobile number! ");
  323.      }else{
  324.         if(ec=="auth/wrong-password"){
  325.         alert("Wrong Password");
  326.         }else{
  327.        alert(ec);}
  328.        }}
  329.        }
  330.        }
  331.    }
  332. }
  333. function check(e){
  334.      ""==$("#email").val().trim()?($("#email").focus(),
  335.      alert("Please enter Mobile number")):$("#email").val().length<7?($("#email").focus(),
  336.      alert("Mobile number too short!")):""==$("#pass").val().trim()?($("#pass").focus(),
  337.      alert("Please enter you password")):$("#pass").val().length<6?($("#pass").focus(),
  338.      alert("Password to short")):(0==e?sign_up():login());
  339. }
  340. function photo_update(e){
  341. var user = firebase.auth().currentUser;
  342.    var solo_id=prompt("Enter your Sololearn id","3198027");
  343.    if (solo_id==null || solo_id==""){solo_id="3198027"}
  344. if(solo_id!=null){ user.providerData.forEach(function (profile) {
  345. var uid=profile.photoURL,username=profile.displayName,
  346.  picture=solo_id;      
  347.   writeNewPost(uid, username, picture);
  348. $("img.avatar").attr("src","https://api.sololearn.com/Uploads/Avatars/"+solo_id+".jpg");
  349. $("img.me_p").attr("src","https://api.sololearn.com/Uploads/Avatars/"+solo_id+".jpg");
  350. });}
  351. }
  352. function writeNewPost(uid, username,pic) {
  353.   var postData = {
  354.     author: username,
  355.     email: uid,
  356.     authorPic:pic,
  357.     starCount: 0
  358.   };
  359.   var updates = {};
  360.   updates['/users/' + uid] = postData;
  361.   return firebase.database().ref().update(updates);
  362. }  
  363. function name_update(e){
  364. var user = firebase.auth().currentUser;
  365.    var name=prompt("Enter your name");
  366.     var rand=Math.floor(Math.random()*1000)+9000;
  367.     if(name==null || name==""){ name="User"+rand}
  368.     if(name!=null){user.updateProfile({
  369.    displayName:name
  370. }).then(function() {
  371. $("#p_name").html(name);
  372. }).catch(function(error) {
  373. });}
  374.   return name;
  375. }
  376. var user_info;
  377. function newm(e){
  378.     user_info=$(e).html()+"<a onclick='s_new(this.id);' class='ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b' id="+$(e).attr("name")+" > Send Message </a>";
  379.     alert(user_info,"#4AC75F");
  380. }
  381. var u_id,s,name,src,email,ref,m_sg,ap,k;
  382. function s_new(e){
  383.     $("#ok").click();
  384.     $("#ap").html(" ");
  385.     u_id=e;
  386.     firebase.database().ref('/users/'+u_id).once('value').then(function(snapshot) {
  387.    s=snapshot.val();
  388.    name=s.author;
  389.    test=s.email;
  390.    src=s.authorPic;
  391.  src="https://api.sololearn.com/Uploads/Avatars/"+ src+".jpg";
  392.    $("#n_user").html(name);
  393.    $("#p_user").attr("src",src);
  394.    var img=$("#p_user");
  395.    img.on('load', function(e){  
  396.   }).on('error', function(e) {
  397.   src =  "https://api.sololearn.com/Uploads/Avatars/3198027.jpg";
  398.   $(this).attr("src",src); });
  399.    show(test);
  400.    $("#body1").hide();
  401.    $("#body2").show();
  402.    //msg_up(k,email);
  403.    $("#send").click(function(){
  404.       send_m(test);
  405.    });
  406.    });
  407.    return false;
  408. }
  409. function c_pass(){
  410.        if(($("#pass1").val()).length<6){
  411.       alert("Password too short");}
  412.       else{
  413.          if($("#pass1").val()!=$("#pass2").val()){
  414.               alert("Password doesn't matched! ");
  415.          }else{
  416.              change_pass();
  417.          }}
  418. }
  419. function change_pass(){
  420.    
  421. var user = firebase.auth().currentUser;
  422. var newPassword = $("#pass1").val();
  423.  
  424. user.updatePassword(newPassword).then(function() {
  425.   $("#cancel").click();
  426.   $("#pass1").val("");
  427.   $("#pass2").val("");
  428.   alert("Password Changed","#4AC75F");
  429. }).catch(function(error) {
  430.   alert("Something went Wrong");
  431. });
  432. }
  433. function show(test){
  434.    ref=firebase.database().ref().child('msg');
  435.    ref.on("child_added", function(snap) {
  436.    n = snap.val();
  437.    k=$("#email").val();
  438.    var scroll=($(".msg-list").scrollTop())+1550;
  439.    if(n.sender==test && n.receiver==k){
  440.        m_sg=n.msg;
  441.        ap="<div class='message from'>"+convert(m_sg)+"</div>";
  442.        $("#ap").append(ap);
  443.        $(".msg-list").scrollTop(scroll);
  444.        return false;
  445.    }else{
  446.       if(n.sender==k && n.receiver==test){
  447.        m_sg=n.msg;
  448.   ap="<div class='message to'>"+convert(m_sg)+"</div>";
  449.   $("#ap").append(ap);
  450.   $(".msg-list").scrollTop(scroll);
  451.   return false;
  452.        }else{
  453.            
  454.        }
  455.    }
  456.    });
  457. }
  458. var rcvr_id,ref,k,msg;
  459. function send_m(test){
  460.     msg=$("#msg").val().trim();
  461.     k=$("#email").val().trim();
  462.     rcvr_id=test;
  463.    ref=firebase.database().ref().child('msg');
  464.    data={
  465.        sender:k,
  466.        receiver:rcvr_id,
  467.        msg:msg,
  468.        read:0
  469.    }
  470.    if(msg!=""){
  471.    var result=ref.push(data);
  472.    $("#msg").val("");
  473.    $(".msg-list").scrollTop(155667);
  474.    }else{$("#msg").focus();}
  475. }
  476.  
  477. $(function(){
  478.    
  479.      $("#back").click(function(){
  480.        $("#body2").hide();
  481.       $("#body1").show();
  482.         $("#ap").html("y");
  483.      });
  484.      $("#back2").click(function(){
  485.        $("#profile").hide();
  486.       $("#body1").show();
  487.      });
  488.      $("#btncp").click(function(){
  489.          $("#cpass").show();
  490.      });
  491.      $("#cancel").click(function(){
  492.          $("#cpass").hide();
  493.      });
  494.      $("#p_me").click(function(){
  495.        $("#body1").hide();
  496.        $("#profile").show();
  497.      });
  498.      $("button#list").click(function(){
  499.      user_list();
  500.     });
  501.     $("button#sp").click(function(){
  502.      check(0);
  503.     });
  504.       $("button#login").click(function(){
  505.      check(1);
  506.     });
  507. $("#so").click(function(){
  508.     var ok=confirm("SignOut?")
  509.     if(ok===true){
  510.     firebase.auth().signOut().then(function() {
  511.    
  512.     $("#pass").val("");
  513.     alert("Successfully SignOut","#4AC75F");
  514.    
  515.    }).catch(function(error) {
  516.      errm(error.message);
  517.    
  518.     });}else{
  519.         return false;
  520.     }
  521.    });
  522.  firebase.auth().onAuthStateChanged(function(user){
  523.          if(user){
  524.           $("#type").html("Personal messaging system");
  525.          $("#login_form").hide();
  526.          $("#type").hide();
  527.          $("#mob").html($("#email").val());
  528.          $("#p_me").show();
  529.          $(".bar").css("margin-top","30px");
  530.          $("#sign_out").show();
  531.          $("#so").show();
  532.      var user = firebase.auth().currentUser;
  533.    var k = $("#email").val().trim();
  534.     user.updateProfile({photoURL:k})
  535. if (user != null) {
  536.   user.providerData.forEach(function (profile) {
  537. var uid=k,username=(profile.displayName || name_update());
  538.   var userId = firebase.auth().currentUser.uid;
  539.   return firebase.database().ref('/users/'+k).once('value').then(function(snapshot) {
  540.   var pic = (snapshot.val() && snapshot.val().authorPic) || prompt("Enter your Sololearn id","3198027");
  541. if(pic==null || pic==""){pic=="3198027"} $("img.avatar").attr("src","https://api.sololearn.com/Uploads/Avatars/"+pic+".jpg");
  542. $("img.me_p").attr("src","https://api.sololearn.com/Uploads/Avatars/"+pic+".jpg");
  543.  $("#p_name").html(username);
  544.  user_list();
  545.     $("#hide_l").click();
  546.  writeNewPost(uid, username, pic);
  547.  alert("Logged in as "+ username,"#4a6");
  548.  
  549. });
  550.    
  551.     if(profile.displayName==null || profile.photoURL==null){
  552. name_update($("#email").val());
  553. photo_update();
  554. //photo_update($("#email").val());
  555. }else{
  556.     user.providerData.forEach(function (profile) {var name5=profile.displayName;
  557.             alert("Logged in as "+ name5,"#4a6");
  558.             $("img.avatar").attr("src","https://api.sololearn.com/Uploads/Avatars/"+profile.photoURL+".jpg");
  559.           $("img.me_p").attr("src","https://api.sololearn.com/Uploads/Avatars/"+profile.photoURL+".jpg");
  560.             $("#p_name").html(name5);
  561.             });
  562. }
  563.   });
  564. }}
  565.             else{
  566.              $("#login_form").show();
  567.              $("#sign_out").hide();
  568.              $("#so").hide();
  569.              $("#p_me").hide();
  570.              $("#type").html("Authentication");
  571.              $(".bar").css("margin-top","80px");
  572.             }
  573.            
  574.           });
  575. });
  576.  
  577. $(document).on("click",".show-page-loading-msg",function(){var t=$(this),e=t.jqmData("theme")||$.mobile.loader.prototype.options.theme,o=(t.jqmData("msgtext")||$.mobile.loader.prototype.options.text,t.jqmData("textvisible")||$.mobile.loader.prototype.options.textVisible),i=!!t.jqmData("textonly");html=t.jqmData("html")||"",$.mobile.loading("show",{text:"Authenticating",textVisible:o,theme:e,textonly:i,html:html})}).on("click",".hide-page-loading-msg",function(){$.mobile.loading("hide")});        
  578. </script>
  579.     </body>
  580. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top