functions-samples/Node-1st-gen/authenticated-json-api/public/index.html at da3a629e88f8c252081aff8447387fe3514d4a7f · firebase/functions-samples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!doctype html>
<!--
  Copyright 2017 Google Inc. All rights reserved.
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at
      https://www.apache.org/licenses/LICENSE-2.0
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License
-->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Authenticated JSON API</title>

    <!-- Material Design Lite -->
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
      rel="stylesheet"
      href="https://code.getmdl.io/1.1.3/material.light_blue-pink.min.css"
    />

    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <header
      class="mdl-layout__header mdl-color-text--white mdl-color--light-blue-700"
    >
      <div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">
        <div
          class="mdl-layout__header-row mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--8-col-desktop"
        >
          <h3>Authenticated JSON API Demo</h3>
        </div>
      </div>
    </header>

    <div class="mdl-grid">
      <div
        class="mdl-cell mdl-cell--2-offset--desktop mdl-cell--4-col mdl-shadow--2dp"
      >
        <div id="demo-sign-in-card" class="mdl-card">
          <div class="mdl-card__title mdl-color--light-blue-100">
            <h2 class="mdl-card__title-text">Sign in with Google</h2>
          </div>
          <div class="mdl-card__supporting-text mdl-color-text--grey-600">
            This web application demonstrates how to expose an authenticated
            JSON API via Firebase Hosting and Cloud Functions for Firebase.
          </div>
          <div class="mdl-card__actions mdl-card--border">
            <button
              id="demo-sign-in-button"
              class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect"
            >
              <i class="material-icons">account_circle</i>
              Sign in with Google
            </button>
            <button
              id="demo-sign-out-button"
              class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect"
            >
              Sign out
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="mdl-grid">
      <div class="mdl-cell">
        <h4>Explore the API <small>Requires Sign In</small></h4>
      </div>
    </div>

    <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--8-col mdl-shadow--2dp demo-create-message">
        <h5>New Message</h5>
        <div class="mdl-textfield mdl-js-textfield">
          <textarea
            class="mdl-textfield__input"
            type="text"
            rows="1"
            id="demo-message"
          ></textarea>
          <label class="mdl-textfield__label" for="demo-message"
            >Type a message to analyze...</label
          >
        </div>
        <a
          id="demo-create-message"
          class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect"
        >
          Save and Analyze
        </a>
        <span id="demo-create-message-result"></span>
      </div>
    </div>

    <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--4-col mdl-shadow--2dp">
        <div class="demo-message-list">
          <h5>List Messages</h5>
          <button
            id="message-list-button-all"
            class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect message-list-button"
          >
            All
          </button>
          <button
            class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect message-list-button"
          >
            Positive
          </button>
          <button
            class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect message-list-button"
          >
            Negative
          </button>
          <button
            class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect message-list-button"
          >
            Neutral
          </button>

          <ul id="demo-message-list" class="mdl-list"></ul>
        </div>
      </div>

      <div class="mdl-cell mdl-cell--4-col mdl-shadow--2dp">
        <div class="demo-message-details">
          <h5>Message Details</h5>
          <pre id="demo-message-details"></pre>
        </div>
      </div>
    </div>

    <script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
    <script src="/__/firebase/10.0.0/firebase-app-compat.js"></script>
    <script src="/__/firebase/10.0.0/firebase-auth-compat.js"></script>
    <script src="/__/firebase/10.0.0/firebase-database-compat.js"></script>
    <script src="/__/firebase/init.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>