inbox.html 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. <html xmlns:th="https://www.thymeleaf.org">
  2. <head>
  3. <title>SecureMail</title>
  4. <link rel="icon" type="image/x-icon" th:href="@{/resources/img/favicon.ico}"/>
  5. <link th:href="@{/resources/css/bootstrap.css}" rel="stylesheet"></link>
  6. <style type="text/css">
  7. /* Sticky footer styles
  8. -------------------------------------------------- */
  9. html,
  10. body {
  11. height: 100%;
  12. /* The html and body elements cannot have any padding or margin. */
  13. }
  14. /* Wrapper for page content to push down footer */
  15. #wrap {
  16. min-height: 100%;
  17. height: auto !important;
  18. height: 100%;
  19. /* Negative indent footer by it's height */
  20. margin: 0 auto -60px;
  21. }
  22. /* Set the fixed height of the footer here */
  23. #push,
  24. #footer {
  25. height: 60px;
  26. }
  27. #footer {
  28. background-color: #f5f5f5;
  29. }
  30. /* Lastly, apply responsive CSS fixes as necessary */
  31. @media (max-width: 767px) {
  32. #footer {
  33. margin-left: -20px;
  34. margin-right: -20px;
  35. padding-left: 20px;
  36. padding-right: 20px;
  37. }
  38. }
  39. /* Custom page CSS
  40. -------------------------------------------------- */
  41. /* Not required for template or sticky footer method. */
  42. .container {
  43. width: auto;
  44. max-width: 680px;
  45. }
  46. .container .credit {
  47. margin: 20px 0;
  48. text-align: center;
  49. }
  50. a {
  51. color: green;
  52. }
  53. .navbar-form {
  54. margin-left: 1em;
  55. }
  56. </style>
  57. <link th:href="@{/resources/css/bootstrap-responsive.css}" rel="stylesheet"></link>
  58. <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
  59. <!--[if lt IE 9]>
  60. <script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  61. <![endif]-->
  62. <meta name="_csrf" th:content="${_csrf.token}"/>
  63. <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
  64. </head>
  65. <body>
  66. <div id="wrap">
  67. <div class="navbar navbar-inverse navbar-static-top">
  68. <div class="navbar-inner">
  69. <div class="container">
  70. <a class="brand" th:href="@{/}"><img th:src="@{/resources/img/logo.png}" alt="Spring Security Sample"/></a>
  71. <div class="nav-collapse collapse">
  72. <div th:if="${#httpServletRequest.remoteUser != null}">
  73. <form class="navbar-form pull-right" th:action="@{/logout}" method="post">
  74. <input type="submit" value="Log out" />
  75. </form>
  76. <p class="navbar-text pull-right" th:text="${#httpServletRequest.remoteUser}">
  77. sample_user
  78. </p>
  79. </div>
  80. <ul class="nav">
  81. <li><a data-bind="click: $root.goToInbox" th:href="@{/}">Inbox</a></li>
  82. <li><a data-bind="click: $root.goToCompose" th:href="@{/(form)}">Compose</a></li>
  83. </ul>
  84. </div>
  85. </div>
  86. </div>
  87. </div>
  88. <!-- Begin page content -->
  89. <div class="container">
  90. <div data-bind="with: inbox">
  91. <h1>Inbox</h1>
  92. <table class="table">
  93. <thead>
  94. <tr>
  95. <th>Created</th>
  96. <th>Summary</th>
  97. </tr>
  98. </thead>
  99. <tbody data-bind="foreach: $root.messages">
  100. <tr data-bind="click: $root.goToMessage">
  101. <td data-bind="text: created"></td>
  102. <td><a data-bind="text: summary, attr: { href: id}"></a></td>
  103. </tr>
  104. </tbody>
  105. </table>
  106. </div>
  107. <div class="container" data-bind="with: chosenMessageData">
  108. <h1>Message : <span data-bind="text: summary"></span></h1>
  109. <dl>
  110. <dt>Created</dt>
  111. <dd data-bind="text: created"></dd>
  112. <dt>Message</dt>
  113. <dd data-bind="html: text"></dd>
  114. </dl>
  115. </div>
  116. <div class="container" data-bind="with: compose">
  117. <h1>Messages : Create</h1>
  118. <div class="alert alert-error" data-bind="foreach: $root.errors, visible: $root.errors().length">
  119. <p data-bind="text: $data"></p>
  120. </div>
  121. <form action="./" method="post">
  122. <label for="summary">Summary</label>
  123. <input type="text" id="summary" data-bind="value: summary" name="summary" class="input-xxlarge" />
  124. <label for="text">Message</label>
  125. <textarea name="text" id="text" data-bind="value: text" class="input-xxlarge"><!-- --></textarea>
  126. <div class="form-actions">
  127. <input type="button" data-bind="click: $root.save" value="Create" />
  128. </div>
  129. </form>
  130. </div>
  131. </div>
  132. <div id="push"><!-- --></div>
  133. </div>
  134. <div id="footer">
  135. <div class="container">
  136. <p class="muted credit">Visit the <a href="#">Spring Security</a> site for more <a href="#">samples</a>.</p>
  137. </div>
  138. </div>
  139. <script type="text/javascript" th:src="@{/resources/js/jquery-1.8.3.js}"><!-- --></script>
  140. <script type="text/javascript" th:src="@{/resources/js/knockout-2.3.0.js}"><!-- --></script>
  141. <script type="text/javascript" th:src="@{/resources/js/message.js}"><!-- --></script>
  142. </body>
  143. </html>