modals.html 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. <!-- Register Modal -->
  2. <div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="registerModalLabel" aria-hidden="true">
  3. <div class="modal-dialog" role="document">
  4. <div class="modal-content">
  5. <div class="modal-header">
  6. <h5 class="modal-title" id="registerModalLabel">Register</h5>
  7. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  8. <span aria-hidden="true">&times;</span>
  9. </button>
  10. </div>
  11. <div class="modal-body">
  12. <form id="converse-register">
  13. <div class="form-group">
  14. <label for="domain">Your XMPP provider's domain name:</label>
  15. <input type="text" name="domain" class="form-control" placeholder=" e.g. conversejs.org">
  16. </div>
  17. <p>Tip: A list of public XMPP providers is available
  18. <a href="https://xmpp.net/directory.php" class="url" target="_blank" rel="noopener">here</a>.</p>
  19. <input class="btn btn-primary" type="submit" value="Fetch registration form">
  20. </form>
  21. </div>
  22. <div class="modal-footer">
  23. <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  24. </div>
  25. </div>
  26. </div>
  27. </div>
  28. <!-- Contact Profile Modal -->
  29. <div class="modal fade" id="contactProfileModal" tabindex="-1" role="dialog" aria-labelledby="contactProfileModalLabel" aria-hidden="true">
  30. <div class="modal-dialog" role="document">
  31. <div class="modal-content">
  32. <div class="modal-header">
  33. <h5 class="modal-title" id="contactProfileModalLabel">JC Brand User Profile</h5>
  34. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  35. <span aria-hidden="true">&times;</span>
  36. </button>
  37. </div>
  38. <div class="modal-body">
  39. </div>
  40. <div class="modal-footer">
  41. <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  42. </div>
  43. </div>
  44. </div>
  45. </div>
  46. <!-- User Profile Modal -->
  47. <div class="modal fade" id="userProfileModal" tabindex="-1" role="dialog" aria-labelledby="userProfileModalLabel" aria-hidden="true">
  48. <div class="modal-dialog" role="document">
  49. <div class="modal-content">
  50. <div class="modal-header">
  51. <h5 class="modal-title" id="userProfileModalLabel">Your profile</h5>
  52. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  53. <span aria-hidden="true">&times;</span>
  54. </button>
  55. </div>
  56. <div class="modal-body">
  57. </div>
  58. <div class="modal-footer">
  59. <button type="button" class="btn btn-primary">Save changes</button>
  60. <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  61. </div>
  62. </div>
  63. </div>
  64. </div>
  65. <!-- Change status Modal -->
  66. <div class="modal fade" id="changeStatusModal" tabindex="-1" role="dialog" aria-labelledby="changeStatusModalLabel" aria-hidden="true">
  67. <div class="modal-dialog" role="document">
  68. <div class="modal-content">
  69. <div class="modal-header">
  70. <h5 class="modal-title" id="changeStatusModalLabel">Change chat status</h5>
  71. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  72. <span aria-hidden="true">&times;</span>
  73. </button>
  74. </div>
  75. <form class="set-xmpp-status" id="set-xmpp-status">
  76. <div class="modal-body">
  77. <div class="form-group">
  78. <div class="custom-control custom-radio">
  79. <input type="radio" id="radio-online" value="online" name="chat_status" class="custom-control-input">
  80. <label class="custom-control-label" for="radio-online">
  81. <span class="fa fa-circle"></span>&nbsp;Online</label>
  82. </div>
  83. <div class="custom-control custom-radio">
  84. <input type="radio" id="radio-busy" value="busy" name="chat_status" class="custom-control-input">
  85. <label class="custom-control-label" for="radio-busy">
  86. <span class="fa fa-minus-circle"></span>&nbsp;Busy</label>
  87. </div>
  88. <div class="custom-control custom-radio">
  89. <input type="radio" id="radio-away" value="away" name="chat_status" class="custom-control-input">
  90. <label class="custom-control-label" for="radio-away">
  91. <span class="fa fa-dot-circle-o"></span>&nbsp;Away</label>
  92. </div>
  93. <div class="custom-control custom-radio">
  94. <input type="radio" id="radio-xa" value="xa" name="chat_status" class="custom-control-input">
  95. <label class="custom-control-label" for="radio-xa">
  96. <span class="fa fa-circle-o"></span>&nbsp;Away for long</label>
  97. </div>
  98. </div>
  99. <div class="btn-group w-100">
  100. <input type="text" class="form-control" value="" placeholder="Personal status message">
  101. <span class="clear-input fa fa-times"></span>
  102. </div>
  103. </div>
  104. <div class="modal-footer">
  105. <button type="submit" class="btn btn-primary">Save</button>
  106. </div>
  107. </form>
  108. </div>
  109. </div>
  110. </div>
  111. <!-- Add contact Modal -->
  112. <div class="modal fade" id="addContactModal" tabindex="-1" role="dialog" aria-labelledby="addContactModalLabel" aria-hidden="true">
  113. <div class="modal-dialog" role="document">
  114. <div class="modal-content">
  115. <div class="modal-header">
  116. <h5 class="modal-title" id="addContactModalLabel">Add a contact</h5>
  117. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  118. <span aria-hidden="true">&times;</span>
  119. </button>
  120. </div>
  121. <div class="modal-body">
  122. <form class="converse-form add-xmpp-contact">
  123. <div class="form-group">
  124. <input type="text" name="identifier" class="form-control" placeholder="Contact username">
  125. </div>
  126. </form>
  127. </div>
  128. <div class="modal-footer">
  129. <button type="button" class="btn btn-primary">Add</button>
  130. <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
  131. </div>
  132. </div>
  133. </div>
  134. </div>
  135. <!-- Chatrooms Modal -->
  136. <div class="modal fade" id="chatroomsModal" tabindex="-1" role="dialog" aria-labelledby="chatroomsModalLabel" aria-hidden="true">
  137. <div class="modal-dialog" role="document">
  138. <div class="modal-content">
  139. <div class="modal-header">
  140. <h5 class="modal-title" id="chatroomsModalLabel">Enter a new Chatroom</h5>
  141. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  142. <span aria-hidden="true">&times;</span>
  143. </button>
  144. </div>
  145. <div class="modal-body">
  146. <form class="converse-form add-chatroom">
  147. <div class="form-group">
  148. <label for="chatroom">Room address:</label>
  149. <input type="text" name="chatroom" class="form-control" placeholder="room@conference.example.org">
  150. </div>
  151. <div class="form-group">
  152. <label for="chatroom">Nickname:</label>
  153. <input type="text" name="nickname" class="form-control">
  154. </div>
  155. <input type="submit" class="btn btn-primary" name="join" value="Join">
  156. </form>
  157. </div>
  158. </div>
  159. </div>
  160. </div>
  161. <!-- Settings Modal -->
  162. <div class="modal fade" id="settingsModal" tabindex="-1" role="dialog" aria-labelledby="settingsModalLabel" aria-hidden="true">
  163. <div class="modal-dialog" role="document">
  164. <div class="modal-content">
  165. <div class="modal-header">
  166. <h5 class="modal-title" id="settingsModalLabel">Settings</h5>
  167. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  168. <span aria-hidden="true">&times;</span>
  169. </button>
  170. </div>
  171. <div class="modal-body">
  172. </div>
  173. <div class="modal-footer">
  174. <button type="button" class="btn btn-primary">Save changes</button>
  175. <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
  176. </div>
  177. </div>
  178. </div>
  179. </div>