Contribute to UI Enhancement
Tags: opensource, beginners
Published: 2023-11-19 23:50:39

**What's the issue about?**
This [issue](https://github.com/IshaanAdarsh/ezmail/issues/112) 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](https://svelte.dev/), 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.
```typescript
<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. 
```javascript
{#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](https://github.com/IshaanAdarsh/ezmail/pull/116) 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](https://github.com/IshaanAdarsh/ezmail/pull/43) identified all the broken links on the website and fixed them (same repo as the current PR).
- [pr2](https://github.com/Seneca-CDOT/telescope/pull/3836) added Korean translation for the about page in Telescope project.
- [pr3](https://github.com/prasenjeet-symon/intellectia/pull/150) added a new functionality to convert `.markdown` to `.html`.
- [pr4](https://github.com/swiftwave-org/dashboard/pull/47) auto-rectified git source url using regex.