DEV Community

rawkiesthinker
rawkiesthinker

Posted on • Edited on

The Identity Platform For The People

#reason #codingwithkamo #privacy #tutorial

As I wait for my team to switch the VM back on so that I can get back to work, I decided to hack together a quick login page, for a coding challenge I accepted to do last week. (in the spirit of being apart of a coding community, never been apart of one before).

In my years of programming, there are a few good practices, I neglected, one of the most important ones was creating a repo. (I have lost many a code due to this neglect)

So here is the codebase of the "Identity Platform For The People" (I just had to build it for the people it's a thing now)

This is more of an intro and my official acceptance to the #CodingWithKamo challenge

I have been yearning to learn a new language, and I decided to to take on any new challenge I find on the internet with reasonml Who does not love a challenge

Let us begin

The challenge was to create a login page, here is how I went about it

"Identity Platform For The People"
After cloning the project below I run the modified script below from reasonML docs

replacing "-my-react-app" with "." so it can generate the project within the cloned project and not create a new folder


npm install --global bs-platform@6.2.1
bsb -init . -theme react-hooks
npm install && npm start


in another tab
npm run server

With that done I created a folder named components inside of /src

/src/components

Input.re

[@react.component] let make = (~name) =>{ <input id={name} placeholder={name} type_="text"></input>; };
Enter fullscreen mode Exit fullscreen mode

/src/Login
Login.re

[@react.component] let make = (~name) =>{ <div> <Input name="username"/> <Input name="password"/> <button type_="submit">{ReasonReact.string(name)}</button> </div> };
Enter fullscreen mode Exit fullscreen mode

/src
Index.re

// Entry point [@bs.val] external document: Js.t({..}) = "document"; ReactDOMRe.renderToElementWithId(<Login name="Login" />, "login");
Enter fullscreen mode Exit fullscreen mode

and for all those that have used react, are used to having a div element with a _login id within the index.html page

/
index.html

// <body> <div id="login"></div> // </body>
Enter fullscreen mode Exit fullscreen mode

This is my submission to the first #CodingWithKamo

Learning Points

type is reserved withing reason, using type_="" allows the use of it within input elements

Coming Up

This is the first of many, there is still a lot that needs to be done, the first thing is styling.

Top comments (0)