Merge pull request #73 from fac27/login-signup

Login signup
fac27 · Aug 3, 2023 · 9e7dd88 · 9e7dd88
2 parents b1d1dc7 + 0801629
commit 9e7dd88
Show file tree

Hide file tree

Showing 16 changed files with 176 additions and 98 deletions.
diff --git a/README.md b/README.md
@@ -40,14 +40,11 @@ All Pull Requests must meet the following requirements before being merged into
 
 Development of Rent Shield is tracked using github projects. [This project board](https://github.com/orgs/fac27/projects/36/views/) is updated regularly and informs the roadmap for new features and code base improvements.
 
-We kept to our sprint planning relatively tight and kept to our user stories. 
-In summary: 
-We Over estimated complexity by *13.79%* and under estimated time by *11.33%* with a total of 29 points worth of tickets. 
+We kept to our sprint planning relatively tight and kept to our user stories.
+In summary:
+We Over estimated complexity by _13.79%_ and under estimated time by _11.33%_ with a total of 29 points worth of tickets.
 
 ### MVP
 
 The development of Rent Shield is currently in early stages and is guided towards fullfiling the following user stories:
-1. As a user I want to search properties by location, budget, number of bedrooms, and property type
-2. As a renter I want to login so that I can save/favourite properties
-3. As a landlord I want to be able to login and upload my property so that renters can see it
 <img width="1057" alt="Screenshot 2023-07-26 at 16 46 40" src="https://github.com/fac27/rent-shield/assets/114600712/c6488095-75bd-49c0-baab-f8deca27acca">
diff --git a/src/app/add-listing/page.tsx b/src/app/add-listing/page.tsx
@@ -5,13 +5,16 @@ const page = () => {
       <div className="text-center justify-between p-5 m-5">
         <h2 className="text-xl font-semibold">Please add property details</h2>
         <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat. Duis aute irure dolor in
-          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-          culpa qui officia deserunt mollit anim id est laborum.
+          Add your property details on this page. The important actions to note
+          are: Images must be included for every room in the property and be of
+          high quality and clear. We encourage you to also upload video of the
+          property. There must be a minimum of 3 images uploaded to be able to
+          post the property listing. You are asked to submit newly taken photos
+          of the property to reflect its current state and not old original
+          photos of the property.
+          <br></br>
+          You can create an account or login here. Save a draft of your listing
+          and come back later if you need to.
         </p>
       </div>
       <AddListingForm />;

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -9,7 +9,7 @@
 input[type='range']::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
-  background: #0097a7;
+  background: #1ad6a9;
   cursor: pointer;
   height: 20px;
   width: 20px;

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -9,6 +9,9 @@ const quicksand = Quicksand({ subsets: ['latin'] })
 export const metadata: Metadata = {
   title: 'rent-shield',
   description: 'rent-shield',
+  icons: {
+    icon: '/rs-logo.svg',
+  },
 }
 // export const dynamic = 'force-dynamic'
 export const revalidate = 0
@@ -20,6 +23,10 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en" className="dark">
+      <head>
+        <link rel="icon" href="./rs-logo.svg" type="image/svg+xml" />
+      </head>
+
       <body
         className={`${quicksand.className} text-lg bg-[#EAEAEA] min-h-screen relative pb-14`}
       >

diff --git a/src/app/log-in/components/LogInForm.tsx b/src/app/log-in/components/LogInForm.tsx
@@ -92,10 +92,20 @@ export default function SignInForm() {
             />
           </div>
           <span className="dark:text-white">{newError}</span>
-          <Button className="self-end" color="purple">
-            <Link href="/sign-up"> Don&apos;t have an account yet? </Link>
+          <Button
+            as={Link}
+            href="/sign-up"
+            className="self-end"
+            color="success"
+            outline
+          >
+            Don&apos;t have an account yet?
           </Button>
-          <Button type="submit" onClick={handleLogin}>
+          <Button
+            gradientDuoTone="purpleToPink"
+            type=" submit"
+            onClick={handleLogin}
+          >
             Log In
           </Button>
         </form>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -2,11 +2,11 @@ import SearchBar from 'components/SearchBar'
 
 export default async function Home() {
   return (
-    <main className="flex h-[calc(100vh-8rem)] md:h-[calc(100vh-9rem)] items-center justify-between">
-      <div className="bg-slate-900 flex flex-col h-full justify-start justify-center items-center w-screen dark:text-white">
+    <main className="flex h-[calc(100vh-7rem)] items-center justify-between">
+      <div className="bg-slate-900 flex flex-col h-full justify-center items-center w-screen dark:text-white">
         <div className="flex-col items-center text-center justify-center w-10/12 mb-8 ms-0">
           <h1 className="text-xl font-semibold bg-slate-900 mb-8 mt-0 dark:text-white">
-            Nothing about us, without us
+            By renters, for renters
           </h1>
           <p>
             Find rental property listings, with comprehensive and transparent

diff --git a/src/app/property/page.tsx b/src/app/property/page.tsx
@@ -6,7 +6,6 @@ const Property = async () => {
   const property = await getPropertyById(1)
   const rentRange = await getRentRange()
 
-  console.log(rentRange)
   const images = property[0].image
 
   return property ? (

diff --git a/src/app/search-preferences/page.tsx b/src/app/search-preferences/page.tsx
@@ -36,5 +36,19 @@ export default function SearchPreferences() {
 
   if (location) preferences.location = location
 
-  return <SearchPreferencesForm preferences={preferences} />
+  return (
+    <main>
+      <div className="text-center justify-between p-5 m-5">
+        <h2 className="text-xl font-semibold">Set your search preferences</h2>
+        <p>
+          Start your home search by typing in a neighbourhood, city, county, or
+          post code.
+          <br></br>
+          The search result page contains a map view. You can also filter to
+          refine your search further.
+        </p>
+      </div>
+      <SearchPreferencesForm preferences={preferences} />
+    </main>
+  )
 }
diff --git a/src/app/sign-up/components/SignUpForm.tsx b/src/app/sign-up/components/SignUpForm.tsx
@@ -140,15 +140,24 @@ export default function SignUpForm() {
                 onChange={(e) => setPassword(e.target.value)}
               />
             </div>
+
             <p className="dark:text-white block">{newError}</p>
-            <Button className="self-end" color="purple">
-              <Link href="/log-in"> Already have an account? </Link>
+            <Button
+              as={Link}
+              href="/log-in"
+              className="self-end"
+              gradientDuoTone="success"
+              outline
+            >
+              Already have an account?
+            </Button>
+            <Button gradientDuoTone="purpleToPink" type="submit">
+              Register new account
             </Button>
-            <Button type="submit">Register new account</Button>
           </form>
         </Card>
       ) : (
-        <div>please check your email</div>
+        <h2>please check your email</h2>
       )}
     </main>
   )

diff --git a/src/components/Carousel.tsx b/src/components/Carousel.tsx
@@ -9,18 +9,18 @@ export default function Carousel({ images }: { images: Images }) {
 
   return (
     <section className="relative h-96 bg-[#CAC4CE] dark:bg-[#202A37]">
-      <div id="carousel" className="relative flex justify-center w-screen h-96">
+      <ul id="carousel" className="relative flex justify-center w-screen h-96">
         {images.map((image, i) => (
-          <Image
-            key={uuidv4()}
-            src={image.url}
-            alt={`image-${i + 1}`}
-            fill
-            style={{ objectFit: 'contain' }}
-            className={currentSlide === i ? '' : 'hidden'}
-          />
+          <li key={uuidv4()} className={currentSlide === i ? '' : 'hidden'}>
+            <Image
+              src={image.url}
+              alt={`image-${i + 1}`}
+              fill
+              style={{ objectFit: 'contain' }}
+            />
+          </li>
         ))}
-      </div>
+      </ul>
       <button
         id="left-arrow"
         className="absolute inset-y-0 left-0 h-96 mx-4 rotate-180"

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,7 +1,7 @@
 'use client'
 import Image from 'next/image'
 import Link from 'next/link'
-import { Dropdown, Navbar, Avatar } from 'flowbite-react'
+import { Dropdown, Navbar, Avatar, Button } from 'flowbite-react'
 import { RxHamburgerMenu } from 'react-icons/rx'
 import HamburgerSidebar from './HamburgerSidebar'
 import { useEffect, useState } from 'react'
@@ -18,23 +18,20 @@ const Header = () => {
   const router = useRouter()
   const supabase = createClientComponentClient<Database>()
 
-  useEffect(() => {
-    // check whether user is logged in
-    const getSession = async () => {
-      const {
-        data: { session },
-      } = await supabase.auth.getSession()
-      console.log(session)
-      if (session) return setSession(session)
-    }
-    getSession()
-  }, [])
+  // useEffect(() => {
+  // check whether user is logged in
+  const getSession = async () => {
+    const {
+      data: { session },
+    } = await supabase.auth.getSession()
+    if (session) return setSession(session)
+  }
+  getSession()
+  // }, [])
 
   const handleLogout = async () => {
-    console.log(session)
     await supabase.auth.signOut()
     setSession(null)
-    console.log(session)
   }
 
   return (
@@ -61,51 +58,62 @@ const Header = () => {
           </Navbar.Brand>
         </div>
         <div className="flex ">
-          <Dropdown
-            inline
-            theme={{ arrowIcon: 'ml-0 mb-0' }}
-            label={
-              <Avatar
-                alt="User settings"
-                img="/images/user-image.svg"
-                className="scale-75 md:w-16 md:h-16 md:scale-100"
-              />
-            }
-          >
-            {session ? (
-              <>
-                <Dropdown.Header>
-                  {/* <span className="block text-lg">Gertrude Pickle</span> */}
-                  <span className="block truncate text-lg font-medium">
-                    {session.user.email}
-                  </span>
-                </Dropdown.Header>
-                <Dropdown.Item>Settings</Dropdown.Item>
-                {session.user.user_metadata.role_id === 2 ? (
-                  <>
-                    <Dropdown.Divider />
-                    <Link href="/add-listing">
-                      <Dropdown.Item>Add Listing</Dropdown.Item>
-                    </Link>
-                  </>
-                ) : (
-                  ''
-                )}
+          {session ? (
+            <Dropdown
+              inline
+              theme={{ arrowIcon: 'ml-0 mb-0' }}
+              label={
+                <Avatar
+                  alt="User settings"
+                  img="/images/user-image.svg"
+                  className="scale-75 md:w-16 md:h-16 md:scale-100"
+                />
+              }
+            >
+              <Dropdown.Header>
+                {/* <span className="block text-lg">Gertrude Pickle</span> */}
+                <span className="block truncate text-lg font-medium">
+                  {session.user.email}
+                </span>
+              </Dropdown.Header>
+              <Dropdown.Item>Settings</Dropdown.Item>
+              {session.user.user_metadata.role_id === 2 ? (
+                <>
+                  <Dropdown.Divider />
+                  <Link href="/add-listing">
+                    <Dropdown.Item>Add Listing</Dropdown.Item>
+                  </Link>
+                </>
+              ) : (
+                ''
+              )}
+
+              <Dropdown.Divider />
+              <Dropdown.Item onClick={handleLogout}>Log out</Dropdown.Item>
+            </Dropdown>
+          ) : (
+            <>
+              <Button
+                as={Link}
+                href="/log-in"
+                gradientDuoTone="purpleToPink"
+                outline
+                size="sm"
+                className="mx-2"
+              >
+                Log In
+              </Button>
 
-                <Dropdown.Divider />
-                <Dropdown.Item onClick={handleLogout}>Logout</Dropdown.Item>
-              </>
-            ) : (
-              <>
-                <Link href="/log-in">
-                  <Dropdown.Item>Log In</Dropdown.Item>
-                </Link>
-                <Link href="/sign-up">
-                  <Dropdown.Item>Sign Up</Dropdown.Item>
-                </Link>
-              </>
-            )}
-          </Dropdown>
+              <Button
+                as={Link}
+                href="/sign-up"
+                gradientDuoTone="purpleToPink"
+                size="sm"
+              >
+                Sign Up
+              </Button>
+            </>
+          )}
         </div>
       </Navbar>
     </header>

diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
@@ -7,6 +7,7 @@ import Image from 'next/image'
 import { initializeSearch } from 'utils/mapHelper'
 import { convertAddress } from 'utils/mapHelper'
 import { ILocation } from '../../types/types'
+import { Button } from 'flowbite-react'
 
 const SearchBar = () => {
   const router = useRouter()
@@ -65,7 +66,7 @@ const SearchBar = () => {
         />
         <button
           type="submit"
-          className="text-white rounded-md text-sm px-2 py-1 absolute right-1.5 bottom-1.5 bg-yellow-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+          className="text-white rounded-md text-sm px-2 py-1 absolute right-1.5 bottom-1.5 bg-gradient-to-r from-purple-500 to-pink-500 enabled:hover:bg-gradient-to-l focus:ring-4 focus:ring-purple-200 dark:focus:ring-purple-800 "
         >
           Search
         </button>

diff --git a/src/components/SearchPreferencesForm.tsx b/src/components/SearchPreferencesForm.tsx
@@ -39,7 +39,7 @@ const SearchPreferencesForm: FC<SearchFormProps> = ({ preferences }) => {
   return (
     <Card
       data-cy="SearchPreferencesForm"
-      className="w-8/12 p-4 m-auto dark:text-white"
+      className="w-8/12 p-4 m-auto dark:text-white mb-10"
     >
       <form
         action="/listings"
@@ -234,7 +234,7 @@ const SearchPreferencesForm: FC<SearchFormProps> = ({ preferences }) => {
             })}
           </div>
         </fieldset>
-        <Button className="mt-6" type="submit">
+        <Button gradientDuoTone="greenToBlue" className="mt-6" type="submit">
           Submit
         </Button>
       </form>

diff --git a/src/components/addListing.tsx b/src/components/addListing.tsx
@@ -155,7 +155,6 @@ const AddListingForm = () => {
           if (!upload)
             throw Error('Failed uploading image, image probably already exists')
 
-          console.log('supabase results: ', upload.path)
           const { error } = await supabaseCompClient.from('image').insert({
             url: `${process.env.NEXT_PUBLIC_SUPABASE_URL}storage/v1/object/public/images/${upload.path}`,
             property_id: id,
@@ -273,6 +272,7 @@ const AddListingForm = () => {
             }
           })}
           <Button
+            gradientDuoTone="purpleToPink"
             type="submit"
             style={{ backgroundColor: hasError ? 'red' : '' }}
           >