Contribute to UI Enhancement

What's the issue about?
This issue is about redesigning both sign-in and sign-up pages for the better user flow and user experience. It needs to be responsive to various screen sizes.

Motivation
I have contributed to this repo before, so I was checking for any open issues and wanted to contribute to a UI-related issue since I have experience with the backend of this repo. I realized that it uses Svelte, which I had never heard of. It is an open-source front-end component framework, similar to React.js. I thought it would be interesting to use a front-end framework other than React.js, so I decided to work on this issue.

Solution
1.New method was implemented to clear users' input when error occurs as below.

<script>
  let errorMsg = "";
  function removeUserInput() {
      document.getElementById("userMail").value = "";
      document.getElementById("userName").value = "";
      document.getElementById("password").value = "";
      document.getElementById("cpassword").value = "";
  }
  async function handleSubmit(event) {
    event.preventDefault();
          window.location.href = "/";
        } else {
          errorMsg = json.error;
          removeUserInput();
        }
      } catch (error) {
        errorMsg = error;
        removeUserInput();
      }
    } else {
      errorMsg = "passwords did not match";
      removeUserInput();
    }
  }
</script>
...

2.CSS was modified to be responsive to various screen sizes.

Learning Opportunity

	Svelte	React
Syntax	JavaScript + extra	JavaScript XML(JSX)
Compilation	compiler-based framework	runtime library
DOM Manipulation	direct manipulation	uses a virtual DOM
Component	written in a single file, .svelte	divided in separate files
Bundle Size	smaller	larger than Svelte

Thoughts
I thought it would be hard to work with a different front-end framework other than React. However, it was quite easy to understand, even for beginners like me. There were certain syntax elements that I was not familiar with, as shown below.

{#if errorMsg}
  ...
{:else}
  Login
{/if}

Unfamiliarity is not the same as not understanding. I understood what it was trying to do, even though I was not used to the Svelte syntax. It was refreshing to use a different front-end framework than the one I am accustomed to.

Progress from Release 0.2
Current PR uses the Svelte front-end framework, which I have never dealt with before. For previous PRs that I created in release 0.2, I only chose issues with a language or framework that I am already familiar with. This time, it was slightly out of my comfort zone, so I needed some time to study what Svelte is and how it is used in the code. However, once I took some time to read the code, it was actually quite easy to understand, even though the syntax was a bit different, which was relieving.

My previous PRs in release 0.2

• pr1 identified all the broken links on the website and fixed them (same repo as the current PR).
• pr2 added Korean translation for the about page in Telescope project.
• pr3 added a new functionality to convert .markdown to .html.
• pr4 auto-rectified git source url using regex.