API tools faq
paste
Advertisement
Guest User

Chat app

a guest
Apr 21st, 2018
536
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.53 KB | None | 0 0
raw download clone embed print report
  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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!