edit-note.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Flash Study</title>
        
        <link rel="icon" type="image/x-icon" href="favicon.png">
        <link rel="preconnect" href="https://api.flashstudy.org" crossorigin>
        <link rel="preload" href="6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7lujVj9w.woff2" as="font" type="font/woff2" crossorigin>
        <link rel="stylesheet" href="main.css?12">
        <style>
            #create {
                margin-top: 20px;
                position: relative;
                bottom: 10px;
                left: 50%;
                transform: translate(-50%);
            }
            
            #main {
                width: calc(100% - 37px);
                border: var(--content-border);
                margin-left: 50%;
                margin-top: 80px;
                transform: translate(-50%);
            }
            #errors {
                text-align: center;
                font-size: 14pt;
                color: #c25f46;
            }
            .textInput {
                display: inline;
                color: var(--dark-color);
                border: var(--content-border);
                padding: 10px;
                margin: 10px 8px 5px 8px;
                outline: none;
                background-color:transparent;
                width: calc(50% - 40px);
            }
            .textInput::placeholder {
                color: var(--dark-color);
            }
            hr {
                border: 0.5px solid var(--dark-color);
            }
            a {
                color: #0f7e94;
            }

            #main svg {
                border-radius: 8px;
                padding: 3px;
                margin-left: 5px;
                color: var(--dark-color);
            }

            .select {
                margin-left: 5px;
                margin-top: 8px;
                outline: none;
                position: relative;
                top: -10px;
                color: var(--dark-color);
                height: 30px;
                border: var(--content-border);
                overflow: hidden;
                overflow: -moz-hidden-unscrollable;
                background: transparent;
                padding: 5px;
                cursor: pointer;
                -webkit-appearance: none;
                -moz-appearance: none;
            }
            .input {
                height: 30px;
                border: var(--content-border);
                overflow: hidden;
                color: #d9dedd;
                overflow: -moz-hidden-unscrollable;
                background: transparent;
                cursor: pointer;
                padding: 5px;
                -webkit-appearance: none;
                -moz-appearance: none;
            }
            #colorSelect {
                margin-left: 5px;
                margin-top: 8px;
            }
            #fontSize {
                padding: 5px 10px 5px 12px;
            }
            #editor {
                min-height: 300px;
                outline: none;
                padding: 5px;
                border-top: var(--content-border);
            }
            #title {
                overflow: hidden;
                width: calc(100vw - 120px);
                white-space: nowrap;
            }

            @media (max-width: 500px) {
                .textInput {
                    width: calc(100% - 40px);
                }
            }
            @media (max-width: 600px) {
                #title {
                    font-size: 14pt;
                    margin-top: 15px;
                    white-space: nowrap !important;
                }
            }
        </style>
    </head>

    <body>
        <header>
            <svg onclick="history.back()" id="back" xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-arrow-left-short" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5"/>
            </svg>

            <h1 id="title">Edit Flash Note</h1>
    
            <svg onclick="location.href = 'login.html'" id="profile" xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
                <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z"/>
            </svg>
        </header>


        <div id="main">
            <input id="name" class="textInput" type="text" placeholder="name of flash note">
            <input id="subject" class="textInput" type="text" placeholder="class/subject/teacher of flash note">

            <hr>

            <a href="javascript:void(0)" onclick="format('bold')">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-type-bold" viewBox="0 0 16 16">
                    <path d="M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 0 0 1.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13H8.21zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z"/>
                </svg>
            </a>

            <a href="javascript:void(0)" onclick="format('italic')">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-type-italic" viewBox="0 0 16 16">
                    <path d="M7.991 11.674 9.53 4.455c.123-.595.246-.71 1.347-.807l.11-.52H7.211l-.11.52c1.06.096 1.128.212 1.005.807L6.57 11.674c-.123.595-.246.71-1.346.806l-.11.52h3.774l.11-.52c-1.06-.095-1.129-.211-1.006-.806z"/>
                </svg>
            </a>

            <a href="javascript:void(0)" onclick="format('insertunorderedlist')">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-list-ul" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm-3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
                </svg>
            </a>

            <a href="javascript:void(0)" onclick="format('insertOrderedList')">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-list-ol" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5z"/>
                    <path d="M1.713 11.865v-.474H2c.217 0 .363-.137.363-.317 0-.185-.158-.31-.361-.31-.223 0-.367.152-.373.31h-.59c.016-.467.373-.787.986-.787.588-.002.954.291.957.703a.595.595 0 0 1-.492.594v.033a.615.615 0 0 1 .569.631c.003.533-.502.8-1.051.8-.656 0-1-.37-1.008-.794h.582c.008.178.186.306.422.309.254 0 .424-.145.422-.35-.002-.195-.155-.348-.414-.348h-.3zm-.004-4.699h-.604v-.035c0-.408.295-.844.958-.844.583 0 .96.326.96.756 0 .389-.257.617-.476.848l-.537.572v.03h1.054V9H1.143v-.395l.957-.99c.138-.142.293-.304.293-.508 0-.18-.147-.32-.342-.32a.33.33 0 0 0-.342.338v.041zM2.564 5h-.635V2.924h-.031l-.598.42v-.567l.629-.443h.635V5z"/>
                </svg>
            </a>

            <a href="javascript:void(0)" onclick="format('justifyLeft')">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-justify-left" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
                </svg>
            </a>
            
            <a href="javascript:void(0)" onclick="format('justifyCenter')">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-text-center" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M4 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
                </svg>
            </a>
            
            <a href="javascript:void(0)" onclick="format('justifyRight')">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-justify-right" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M6 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-4-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
                </svg>
            </a>

            <a href="javascript:void(0)" onclick="format('underline')">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-type-underline" viewBox="0 0 16 16">
                    <path d="M5.313 3.136h-1.23V9.54c0 2.105 1.47 3.623 3.917 3.623s3.917-1.518 3.917-3.623V3.136h-1.23v6.323c0 1.49-.978 2.57-2.687 2.57-1.709 0-2.687-1.08-2.687-2.57V3.136zM12.5 15h-9v-1h9v1z"/>
                </svg>
            </a>

            <input style="transform: translate(0, -10px);" class="input" type="color" onchange="chooseColor()" id="colorSelect"/>

            <select class="select" id="fontType" onchange="changeFont (this);">
                <option value="Arial">Arial</option>
                <option value="Helvetica">Helvetica</option>
                <option value="Times New Roman">Times New Roman</option>
                <option value="Sans serif">Sans serif</option>
                <option value="Courier New">Courier New</option>
                <option value="Verdana">Verdana</option>
                <option value="Georgia">Georgia</option>
                <option value="Palatino">Palatino</option>
                <option value="Garamond">Garamond</option>
                <option value="Comic Sans MS">Comic Sans MS</option>
                <option value="Arial Black">Arial Black</option>
                <option value="Tahoma">Tahoma</option>
                <option value="Comic Sans MS">Comic Sans MS</option>
            </select>

            <select class="select" id="fontSize" onchange="changeSize()">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3" selected>3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
            </select>


            <div id="editor" contenteditable="true"></div>

            <button id="create" onclick="saveFlashNote();">Save</button>
        </div>

        <p id="errors"></p>

        <script type="text/javascript" src="purify.min.js"></script>
        <script src="main.js?v2"></script>
        <script>
            // get note id from query params
            const queryString = window.location.search;
            const urlParams = new URLSearchParams(queryString);
            const id = urlParams.get('id');

            window.addEventListener('load', async () => {
                const profile = document.getElementById('profile');
                const [authResponse, noteResponse] = await Promise.all([
                    fetcher(`/auth/check`),
                    fetcher(`/notes/get/${id}`),
                ]);

                const authText = await authResponse.text();
                if (authText == 'A token is required for authentication' || authText == 'Invalid Token') {
                    alert('You must be logged in to access this.');
                    location.assign('/login.html');
                    return;
                }

                profile.setAttribute('onclick', `location.href = 'profile.html'`);
                const json = JSON.parse(authText);

                if (!json.notes.includes(id)) {
                    alert('you cannot edit a note you do not own');
                    location.href = 'index.html';
                    return;
                }

                if (noteResponse.status != 201) {
                    alert('invalid note id');
                    location.href = 'index.html';
                    return;
                }

                const noteJson = await noteResponse.json();
                document.getElementById('name').setAttribute('value', noteJson.title);
                document.getElementById('subject').setAttribute('value', noteJson.subject);
                document.getElementById('editor').innerHTML += DOMPurify.sanitize(noteJson.note);
            });

            async function saveFlashNote() {
                const main = document.getElementById('main');
                const title = main.children[0].value;
                const subject = main.children[1].value;
                const note = main.children[15];

                const data = { "title": title, "subject": subject, "note": note.innerHTML, "id": id };

                let res = await fetcher(`/notes/edit`, { method: 'post', body: JSON.stringify(data), headers: { 'Content-Type': 'application/json' }});
                let text = await res.text();

                if (res.status == 201) {
                    // success
                    location.href = `note.html?id=${id}`;
                } else {
                    //failed to create note
                    document.getElementById('errors').innerText = text;
                }
            }

            function format(command, value) {
                document.execCommand(command, false, value);
            }
            function changeFont() {
                const font = document.getElementById('fontType').value;
                document.execCommand('fontName', false, font);
            }
            function changeSize() {
                const size = document.getElementById('fontSize').value;
                document.execCommand('fontSize', false, size);
            }
            function chooseColor() {
                const color = document.getElementById('colorSelect').value;
                document.execCommand('foreColor', false, color);
            }
        </script>
    </body>
</html>