TodoList/index.html at master · BrunoSalgadoti/TodoList · 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
<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="utf-8" />
    <title>TodoList</title>
    <link rel="shortcut icon" href="img/todoListFavicon.png" type="image/x-icon" />
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <!-- Logotipo do TodoList-->
    <div id="app">
        <div class="center">
            <img src="img/todoList.png" alt="Ícone da Aplicação">
        </div>

        <!--Feedback de carregamento (Loading...)-->
        <div id="loading">
            <img src="img/loading.gif" alt="Carregando">
        </div>

        <!--Conteúdo destinado para usuários não autenticados-->
        <div id="auth" class="center">
            <!--Formulário de autenticação-->
            <form id="authForm">
                <h3 id="authFormTitle">Acesse sua conta para continuar</h3>

                <label for="email">E-mail:</label>
                <input type="email" placeholder="E-mail" id="email">

                <label for="password">Senha:</label>
                <input type="password" placeholder="Senha:" id="password">

                <button type="submit" id="submitAuthForm">Acessar</button>
            </form>

             <!--Passibilita a redifinição de Senha-->
             <p id="passwordReset">
                Esqueceu a Senha?
                <button onclick="sendPasswordResetEmail()" class="alternative"> Redifinir minha Senha </button>
            </p>

            <!--Alterar o formulário de autenticação para o cadastro de novas contas-->
            <p id="register">
                Não possui uma conta?
                <button onclick="toggleToRegister()" class="alternative">Cadastrar uma nova conta</button>
            </p>

            <!--Alterar o formulário de autenticação para o acesso de contas já existentes-->
            <p id="access" class="startHidden">
                Já possui uma conta?
                <button onclick="toggleToAccess()" class="alternative">Acesse a sua conta</button>
            </p>

            <!--Outros provedores de autenticação-->
            <p>
                Ou acesse usando:<br>
                <img src="img/google.png" alt="Autenticação pelo Google" onclick="singInWithGoogle()">
                <img src="/img/github.png" alt="Autenticação pelo do GitHub" onclick="singInWithGitHub()">
                <img src="/img/facebook.png" alt="Autenticação pelo do Facebook" onclick="singInWithFacebook()">
            </p>
        </div>

        <!--Conteúdo destinado para usuários autenticados-->
        <div id="userContent" class="startHidden">
            <hr>
            <div id="userInfo" class="center">
                <img id="userImg">
                <p id="userName"></p>
                <p id="userEmail"></p>
                <p id="emailVerified"></p>
                <div id="sendEmailVerificationDiv">
                    <button class="alternative" onclick="sendEmailVerification()">Verificar E-mail</button>
                </div>
                <button class="alternative" onclick="updateUserName()">atualizar meu nome</button>
                <button class="alternative" onclick="signOut()">Sair</button>
                <button class="danger" onclick="deleteUserAccount()">Excluir Conta</button>
            </div>

            <hr>

            <!--Lista de tarefas do usuário-->
            <div id="todoList">
                <h3 id="todoCount">Carregando Tarefas...</h3>
                <div class="center">
                    <label for="search">Buscar:</label>
                    <input type="text" placeholder="Buscar" id="search">
                </div>
                <ul id="ulTodoList"></ul>
            </div>

            <hr>

            <div class="center">
                <!--Formulário de Tarefas-->
                <form id="todoForm">
                    <h3 id="todoFormTitle">Adicionar Tarefa:</h3>
                    <label for="name">Tarefa: </label>
                    <input type="text" id="name" placeholder="Tarefa">
                    <button type="submit" id="submitTodoForm">Adicionar Tarefa</button>
                </form>
            </div>
        </div>
    </div>

    <!--Recursos do Firebase-->
    <script src="https://www.gstatic.com/firebasejs/7.8.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.8.1/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.8.1/firebase-database.js"></script>

    <!--Nossa programação em JavaScript-->
    <script src="js/firebase.js"></script>
    <script src="js/utils.js"></script>
    <script src="js/auth.js"></script>
    <script src="js/todo.js"></script>
</body>

</html>