github.com/google/go-safeweb@v0.0.0-20231219055052-64d8cfc90fbb/examples/sample-application/server/templates/notes.tpl.html (about)

     1  <!--
     2  Copyright 2020 Google LLC
     3  Licensed under the Apache License, Version 2.0 (the "License");
     4  you may not use this file except in compliance with the License.
     5  You may obtain a copy of the License at
     6  	
     7  https://www.apache.org/licenses/LICENSE-2.0
     8  Unless required by applicable law or agreed to in writing, software
     9  distributed under the License is distributed on an "AS IS" BASIS,
    10  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    11  See the License for the specific language governing permissions and
    12  limitations under the License.
    13  -->
    14  
    15  <!--
    16    This template is considered safe when used with the
    17    https://pkg.go.dev/github.com/google/safehtml/template package. According to
    18    the Threat Model
    19    (https://pkg.go.dev/github.com/google/safehtml/template#hdr-Threat_model), we
    20    trust that this template itself doesn't contain user generated data. When the
    21    template is executed with runtime data, contextual autosanitization is
    22    performed to prevent from code injection vulnerabilities.
    23  -->
    24  <html>
    25  
    26    <head>
    27      <title>Go Safe Web sample application</title>
    28      <link rel="stylesheet" href="/static/styles.css">
    29  
    30      <link rel="preconnect" href="https://fonts.gstatic.com">
    31      <link rel="stylesheet"
    32            href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap">
    33      <!-- This script will automatically be injected with a nonce that matches
    34        the one in the CSP header. -->
    35      <script>
    36        document.addEventListener('DOMContentLoaded', function () {
    37          const textarea = document.getElementsByName('text')[0];
    38          document.getElementById('meta-btn')
    39            .addEventListener('click', function addMetadata(event) {
    40              event.preventDefault();
    41              const user = event.target.dataset.user;
    42              const date = new Date().toLocaleString(undefined, {
    43                month: 'short',
    44                day: 'numeric',
    45                hour: 'numeric',
    46                minute: 'numeric',
    47                hour12: false,
    48              });
    49              textarea.value = `${textarea.value}\n${user}\n${date}`;
    50            });
    51        });
    52      </script>
    53    </head>
    54  
    55    <body>
    56      <h2> Hello {{.user}}! Here are your notes </h2>
    57      <form action="/logout" method="post">
    58        <div class="padded">
    59          <button type="submit">Logout</button>
    60        </div>
    61      </form>
    62  
    63      <!-- TODO(clap): style these. -->
    64      <dl class="padded">
    65        {{ range .notes }}
    66        <dt>{{.Title}}</dt>
    67        <dd><pre>{{.Text}}</pre></dd>
    68        <br>
    69        {{ end}}
    70      </dl>
    71  
    72      <!-- TODO(clap): add some client-side JS to help with the note generation. -->
    73  
    74      <form action="/notes" method="post" id="newnote">
    75        <div class="padded">
    76          <label for="title"><b>Title</b></label>
    77          <input type="text" placeholder="Title" name="title" required>
    78  
    79          <label for="text"><b>Text</b></label>
    80          <br>
    81          <textarea name="text" class="full-width" form="newnote"></textarea>
    82  
    83          <button type="submit">Save</button>
    84          <button data-user="{{.user}}" id="meta-btn">Add metadata</button>
    85        </div>
    86      </form>
    87    </body>
    88  
    89  </html>