Tidy up the sign in page

.github/workflows/cd.yml

@@ -54,10 +54,10 @@ jobs:
       - name: Run type checking
         run: yarn test:types
 
-      - name: Run tests
+      - name: Run API tests
         run: yarn test:cov
 
-      - name: Run browser tests
+      - name: Run UI tests
         run: yarn test:cy
 
       - name: Run build

cypress/integration/admin-auth.spec.js

@@ -6,19 +6,25 @@ describe('admin authentication', () => {
   });
 
   it('display the default landing', () => {
-    cy.get('#sign-in_email').should('exist');
+    cy.get('.test--email-address').should('exist');
   });
 
-  it('process the login', () => {
-    cy.get('#sign-in_email').clear().type('demo@artgen.io');
-    cy.get('#sign-in_password').clear().type('demo');
+  it('fail the sign in', () => {
+    cy.get('.test--email-address').type('demo@artgen.io');
+    cy.get('.test--password').type('demoX');
+    cy.get('.test--sign-in').click();
 
-    cy.get('.js--sign-in').click();
+    // Stays on the sign in page
+    cy.get('.test--sign-in').should('exist');
+  });
 
-    cy.get('.brand-logo').should('exist');
+  it('pass the sign in', () => {
+    cy.get('.test--email-address').type('demo@artgen.io');
+    cy.get('.test--password').type('demo');
+    cy.get('.test--sign-in').click();
 
-    cy.get('.js--sign-out').should('exist');
-    cy.get('.js--sign-out').click();
-    cy.get('#sign-in_email').should('exist');
+    // Sign out
+    cy.get('.test--sign-out').should('exist').click();
+    cy.get('.test--email-address').should('exist');
   });
 });

src/modules/admin/assets/main.css

@@ -1,6 +1,7 @@
 /* Tailwind and other custom styles */
 @import url('tailwindcss/components');
 @import url('tailwindcss/utilities');
+@import url('https://fonts.googleapis.com/css2?family=Gruppo&display=swap');
 
 html,
 body {

src/modules/admin/layout/NavSide.tsx

@@ -7,7 +7,7 @@ import {
   UnorderedListOutlined,
   UserOutlined,
 } from '@ant-design/icons';
-import { Layout, Menu, message } from 'antd';
+import { Layout, Menu, notification } from 'antd';
 import React from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { useRecoilState, useResetRecoilState } from 'recoil';
@@ -170,9 +170,13 @@ const NavSide = () => {
             }
             onClick={() => {
               resetJwt();
-              message.info('Bye bye! Come back soon <3');
+
+              notification.success({
+                message: 'Bye bye! Come back soon <3',
+                duration: 5,
+              });
             }}
-            className="js--sign-out"
+            className="test--sign-out"
           >
             Sign Out
           </Menu.Item>

src/modules/authentication/component/cover.component.less → src/modules/authentication/component/cover.component.css

@@ -24,7 +24,7 @@
 }
 
 .auth-layout .right-panel {
-  @apply w-full lg:w-1/2 xl:w-1/3 2xl:w-1/4 flex items-center justify-center text-center md:px-8 px-0 z-0;
+  @apply w-full lg:w-1/2 xl:w-1/3 2xl:w-1/4 flex items-center justify-center text-center md:px-8 px-4 z-0;
   background-color: #151719;
 
   border-left: 1px solid #37393f;
@@ -46,3 +46,8 @@
   background-color: #101010;
   color: #cfd2d9;
 }
+
+.auth-layout .brand,
+.auth-layout .moto {
+  font-family: 'Gruppo', cursive;
+}

src/modules/authentication/component/cover.component.tsx

@@ -1,4 +1,4 @@
-import './cover.component.less';
+import './cover.component.css';
 import SignInComponent from './sign-in.component';
 
 export default function AuthLayoutComponent() {
@@ -7,10 +7,10 @@ export default function AuthLayoutComponent() {
       <div className="left-panel hero-bg">
         <div className="cover" />
         <div className="w-full px-24 z-10">
-          <h1 className="text-5xl font-thin text-left tracking-wide">
+          <h1 className="text-5xl moto font-thin text-left tracking-wide">
             Welcome back!
           </h1>
-          <p className="text-3xl font-thin my-4 italic text-gray-400">
+          <p className="text-2xl font-thin my-4 italic text-gray-400">
             Opportunities don't happen. You create them.
           </p>
         </div>

src/modules/authentication/component/sign-in.component.tsx

@@ -6,7 +6,7 @@ import {
   MehOutlined,
   UnlockOutlined,
 } from '@ant-design/icons';
-import { Button, Form, Input, notification } from 'antd';
+import { Alert, Button, Divider, Form, Input, notification } from 'antd';
 import axios from 'axios';
 import React from 'react';
 import { Link } from 'react-router-dom';
@@ -33,7 +33,7 @@ export default function SignInComponent() {
 
         setJwt(response.data.accessToken);
       })
-      .catch(error => {
+      .catch(() => {
         notification.error({
           icon: <MehOutlined className="text-red-400" />,
           message: 'Authentication Failed!',
@@ -44,59 +44,77 @@ export default function SignInComponent() {
 
   return (
     <>
-      <h1 className="my-6 w-100 content-center" id="js-hexa">
+      <h1 className="w-full content-center" id="js-hexa">
         <div className="hexa"></div>
       </h1>
-      <h1
-        className="my-6 w-100 content-center text-5xl"
-        style={{ fontWeight: 100 }}
-        id="js-logo"
-      >
-        Artgen
+      <h1 className="mb-8 w-full content-center text-5xl brand" id="js-logo">
+        Artgen Core
       </h1>
-      <div className="py-6 space-x-2 social">
+      <div className="py-6 space-x-2 social hidden">
         <FacebookOutlined />
         <GoogleOutlined />
         <LinkedinOutlined />
         <GithubOutlined />
       </div>
-      <p className="misc-text">or use your email account</p>
+      <Alert
+        type="info"
+        className="text-left"
+        message={
+          <>
+            Use <strong className="font-bold">demo@artgen.io</strong> with the
+            password <strong className="font-bold">demo</strong>
+          </>
+        }
+        closable
+        showIcon
+      ></Alert>
+      <p className="misc-text hidden">or use your email account</p>
       <Form
         name="sign-in"
-        labelCol={{ span: 6 }}
-        wrapperCol={{ span: 16 }}
-        initialValues={{ email: 'demo@artgen.io', password: 'demo' }}
+        size="large"
         autoComplete="on"
         onFinish={doSignIn.bind(doSignIn)}
+        layout="vertical"
       >
         <Form.Item
           label="Email Address"
           name="email"
-          rules={[{ required: true, message: 'Please input your email!' }]}
+          rules={[
+            { required: true, message: 'Please input your email address!' },
+          ]}
         >
-          <Input />
+          <Input
+            className="test--email-address bg-dark"
+            placeholder="example@artgen.io"
+          />
         </Form.Item>
 
         <Form.Item
           label="Password"
           name="password"
           rules={[{ required: true, message: 'Please input your password!' }]}
         >
-          <Input.Password />
+          <Input.Password
+            className="test--password bg-dark"
+            placeholder="********"
+          />
         </Form.Item>
 
-        <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
+        <Divider />
+
+        <Form.Item>
           <Button
-            className="js--sign-in"
+            className="test--sign-in"
             type="primary"
             htmlType="submit"
             block
+            icon={<UnlockOutlined />}
           >
             Sign In
           </Button>
         </Form.Item>
 
-        <div className="mb-5 text-right mr-10">
+        <div className="mb-5 text-right">
           Don't have an account? <Link to={'/admin/auth/signup'}>Sign Up</Link>{' '}
           now!
         </div>