Untitled

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue Example</title>
</head>
<body>
    <div id="app">
        <form>
            <input type="text" v-model="auth.username">
            {{ error.username }}
            <input v-bind:type="typepassword" v-model="auth.password">
            {{ error.password }}
            <button type="button" v-on:click="login()">Login</button>
            {{ error.success }}
        </form>


        <button type="button" v-on:click="switchTypePassword()">unhide</button>

        <button type="button" v-on:click="logout()">log out</button>


        <div>
            <table>
                <thead>
                    <tr>
                        <th>id</th>
                        <th>username</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="row in userdata">
                        <td v-for="(item, attr, i) in row">{{ item }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="vue.js"></script>
</body>
</html>


new Vue ({
    el: '#app',
    // yvdayfrk
    // rrPY6zrrPY6z
    // @rudrig
    data: {
        auth: {
            username: '',
            password: '',
        },
        error: {
            username: '',
            password: '',
            success: '',
        },
        typepassword: 'password',


        userdata: [],
    },

    created() {
      this.getUserData();
    },

    methods: {
        login() {
            fetch('http://192.168.12.44:8000/api-token-auth/', {
                method: 'POST',
                headers: {
                  'Content-type': 'application/json'
                },
                body: JSON.stringify(this.auth),
            })
                .then(res => {
                    res.json()
                        .then(body => {
                            if(res.status === 200) {
                                localStorage.setItem('token', body.token);
                                this.error.success = "Log In you token: " + body.token;
                            } else {
                                this.error.username = body.username[0];
                                this.error.password = body.password[0];
                            }
                        })
                })
        },

        logout() {
            localStorage.setItem('token', '');
            alert("Log out");
        },

        getUserData() {
            fetch('http://192.168.12.44:8000/users/', {
                method: 'GET',
                headers: {
                    'Content-type': 'application/json'
                },
            })
                .then(res => {
                    res.json()
                        .then(body => {
                            body.results.forEach(item => {
                                let data = {
                                    id: item.id,
                                    username: item.username,
                                }

                                this.userdata.push(data);
                            })
                        })
                })
        },

        switchTypePassword() {
            console.log("type");
            if(this.typepassword === 'text') {
                this.typepassword = 'password';
            }else if(this.typepassword === 'password') {
                this.typepassword = 'text';
            }
        }
    }
});