firebase-sample/firebase-sample.html at master · Eraince/firebase-sample · 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
<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Email/Password Authentication Example</title>

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

    <!-- Import and configure the Firebase SDK -->

    <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.2.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.2.0/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.2.0/firebase-database.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.2.0/firebase-messaging.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.2.0/firebase.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </head>

  <body>
    <div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <!-- Header section containing title -->
      <header
        class="mdl-layout__header mdl-color-text--white mdl-color--light-white-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"
          >
            <a href="/" class="mdl-color-text--white">
              <h3>Firebase Authentication</h3>
            </a>
          </div>
        </div>
      </header>

      <main class="mdl-layout__content mdl-color--grey-100">
        <div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">
          <!-- Container for the demo -->
          <div
            class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop"
          >
            <div
              class="mdl-card__title mdl-color--orange-600 mdl-color-text--white"
            >
              <h2 class="mdl-card__title-text">
                Firebase Email &amp; Password Authentication
              </h2>
            </div>
            <div class="mdl-card__supporting-text mdl-color-text--grey-600">
              <p>
                Enter an email and password below and either sign in to an
                existing account or sign up
              </p>

              <input
                class="mdl-textfield__input"
                style="display:inline;width:auto;"
                type="text"
                id="email"
                name="email"
                placeholder="Email"
              />
              &nbsp;&nbsp;&nbsp;
              <input
                class="mdl-textfield__input"
                style="display:inline;width:auto;"
                type="password"
                id="password"
                name="password"
                placeholder="Password"
              />
              <br /><br />
              <button
                class="mdl-button mdl-js-button mdl-button--raised mdl-color--orange-600"
                id="quickstart-sign-in"
                name="signin"
              >
                Sign In
              </button>
              &nbsp;&nbsp;&nbsp;
              <button
                class="mdl-button mdl-js-button mdl-button--raised mdl-color--orange-600"
                id="quickstart-sign-up"
                name="signup"
              >
                Sign Up
              </button>
              &nbsp;&nbsp;&nbsp;
            </div>
          </div>
        </div>
      </main>
    </div>
  </body>
</html>