{"id":17070526,"url":"https://github.com/oakmac/jquery-login-form","last_synced_at":"2025-05-07T10:14:55.887Z","repository":{"id":66970584,"uuid":"87613041","full_name":"oakmac/jquery-login-form","owner":"oakmac","description":"Create a login form using jQuery and AJAX","archived":false,"fork":false,"pushed_at":"2018-11-09T21:40:00.000Z","size":16,"stargazers_count":3,"open_issues_count":0,"forks_count":12,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-07T10:14:49.725Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oakmac.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-04-08T06:22:56.000Z","updated_at":"2021-07-03T02:30:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"84a16f3f-1654-4a4a-b140-e25d622eecd4","html_url":"https://github.com/oakmac/jquery-login-form","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oakmac%2Fjquery-login-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oakmac%2Fjquery-login-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oakmac%2Fjquery-login-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oakmac%2Fjquery-login-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oakmac","download_url":"https://codeload.github.com/oakmac/jquery-login-form/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252856558,"owners_count":21814858,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-14T11:32:04.962Z","updated_at":"2025-05-07T10:14:55.875Z","avatar_url":"https://github.com/oakmac.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jQuery Login Form\n\n\u003e This is a bonus assignment. Complete it at your own pace.\n\n## Problem Description\n\nYou have just been hired at the hot new startup **bloop.xyz**. Tagline: Have you\nblooped today?\n\nJeff is the Director of UX and your new boss. After adding some user behavior\nanalytics, Jeff noticed that users have had trouble logging into the site and\nasked if you can help re-design the login experience from scratch.\n\nThe backend team has been directed to assist you with this task. Sam - the lead\nbackend developer - has warned you that the database they are currently using is\nflaky and has a tendency to randomly error out or take a long time to respond.\nHe assures you they are working hard to fix this, but you don't have high hopes\nthat they will be able to fix the problem before Jeff's deadline.\n\nArmed with your knowledge of HTML, CSS, JavaScript, jQuery, and AJAX you decide\nto write a robust Login Form on top of the flaky backend. You want to impress\nJeff with your first real task and are passionate about improving the customer\nexperience.\n\n## Development Setup\n\nMake sure [Node.js] is installed on your system. Then, on the command line:\n\n```sh\n# installs the node_modules folder (one-time step)\nnpm install\n\n# start the web server on port 7979\nnode app.js\n```\n\nOpen your browser to [http://127.0.0.1:7979/login.html] to see the app. Note\nthat the app will serve files out of the `/public` folder.\n\n[Node.js]:https://nodejs.org/en/\n[http://127.0.0.1:7979/login.html]:http://127.0.0.1:7979/login.html\n\n## Phase 1 - Styling\n\nA `login.html` page has already been started for you. Your first task is to add\nsome CSS to this page to make it look better. Jeff has been very clear that he\nexpects the login page to work great on all devices. Use CSS media queries and\nyour design skills to improve the look and feel of the login page. Feel free to\nchange the HTML structure as needed to accomplish this, but be sure to follow\nbest practices for the Semantic Web.\n\nJeff has given you some design guidelines:\n- The Header should always take up 100% of the width of the page and have a nice\n  background color.\n- The Body of the page should have a light, neutral color (ie: not white).\n- The Login Form should be centered on the page, and never wider than 500px.\n- The Login Form should have a border and a white background that contrasts with\n  the body behind it. There should be some padding on the inside of the form so\n  the input fields are not flush with the border.\n- When on a mobile device, the Login Form should take most of the width of the\n  device with some slight padding on the left and right for buffer.\n- The Username and Password fields should be the same width and take up most\n  of the horizontal width of the Login Form container.\n- The Log In button should be the primary action button on the page. It should\n  stand out visually.\n- The Help Center links should be below the Login Form, but inside the Login\n  Form container. The links should be easy to read and find, but not stand out\n  too much.\n- The Help Center links should be horizontally aligned on desktop widths and\n  vertically aligned on mobile devices.\n- The Footer should take up 100% of the width of the page. The background color\n  of the footer should complement the background color of the Header (but not be\n  the same color).\n\n## Phase 2 - AJAX Login\n\nUse jQuery and AJAX to send a login request when the user submits the form.\n\n- The api endpoint for logging in is: `http://127.0.0.1:7979/api/login`\n- This URL accepts an HTTP POST request with the following two parameters:\n  `username` and `password`\n- The response from this endpoint could be anything! But generally you should\n  anticipate an HTTP 200 for a successful login and an HTTP 400 if the username\n  / password do not match. The server always returns JSON.\n- Sam has given you some test accounts to login with:\n  - `testuser1` has password `ilovebananas`\n  - `testadmin5` has password `always_name_your_functions`\n  - `qauser3` has password `luv2manage5tate`\n- The Login Form should show an appropriate loading state while the request is\n  active. The user should not be able to re-submit the form or edit their\n  username or password while a login attempt is ongoing.\n- If there is an error, the Login Form should show an appropriate error above\n  the Login button, but below the Password field.\n- If the login was successful, the user should be redirected to the homepage at\n  `http://127.0.0.1:7979/index.html`\n- Jeff has instructed you to fail the login attempt and show an appropriate\n  error message to the user if it takes longer than 15 seconds for the server to\n  respond. Be sure to cancel any pending AJAX requests if this happens!\n\n## Phase 3 - Help Center Modal\n\nJenn from the Web Copy team is A/B testing different content for the \"Need help\nlogging in?\" feature. Her team is testing 4 different wordings for that section\nand wants to know which ones result in a user successfully logging in.\n\n- Pop-up a modal dialog when the user presses the \"Need help logging in?\" link.\n- The modal should be centered on the page.\n- The modal should be 10% from the top of the viewport, except on mobile where\n  it should be 5px from the top.\n- The modal should have a maximum width of 500px, except on mobile where it should\n  take up most of the page with some padding on the left and right (similar to the login form).\n- The modal body should be scrollable if it's content is longer than 600px in height.\n  On mobile, the modal should be a fixed distance from the bottom of the viewport such\n  that the body content is scrollable at any height.\n- There should be a gray background on the rest of the page behind the modal. If\n  the user clicks on the background the modal should go away. (NOTE: this technique is called \"layering\")\n- The modal should have a header bar with an \"X\" in the corner that allows closing\n  of the modal.\n- The modal should have a footer bar with a \"Close\" button horizontally centered.\n- When the modal is opened, randomly fetch one of 4 [Markdown] files located at\n  `http://127.0.0.1:7979/md/login-help-N.md` where N is 1, 2, 3, or 4. Parse the\n  response body using the [marked] library and put the resultant HTML in the modal body.\n\n[Markdown]:https://guides.github.com/features/mastering-markdown/\n[marked]:https://github.com/chjj/marked\n\n## Phase 4 - Create New Account Form\n\n\u003e TODO: this phase is not finished yet\n\n## Phase 5 - Capture Analytics\n\n\u003e NOTE: this section is not finished yet\n\nJenn would like to know what the user does after seeing the help modal. Record\nwhat the user does and POST a JSON object like the following to `api/login-help`\nupon a successful login:\n\n```json\n{\n  \"helpModalWasOpened\": true,\n  \"helpContentNum\": 2,\n  \"numFailedLoginAttempts\": 2,\n  \"secondsTookToLogin\": 25.6\n}\n```\n\n## License\n\n[ISC License](LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foakmac%2Fjquery-login-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foakmac%2Fjquery-login-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foakmac%2Fjquery-login-form/lists"}