Skip to content

Commit

Permalink
clubs page added
Browse files Browse the repository at this point in the history
  • Loading branch information
@ravikumawat7716
ravikumawat7716 committed Jan 10, 2024
1 parent 1857c13 commit a0528c9
Show file tree
Hide file tree
Showing 7 changed files with 320 additions and 50 deletions.
30 changes: 0 additions & 30 deletions src/components/AboutPage.vue
View file

This file was deleted.

138 changes: 138 additions & 0 deletions src/components/ClubPage.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
<template>
<NavBar></NavBar>

<body class=" dark:bg-black">
<section class="container px-4 mx-auto" v-if="access">
<div class="flex flex-col">
<div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
<div class="overflow-hidden border border-gray-200 dark:border-gray-700 md:rounded-lg">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-gray-50 dark:bg-gray-800">
<tr>
<th scope="col"
class="py-3.5 px-4 text-sm font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400">
<div class="flex items-center gap-x-3">
<button class="flex items-center gap-x-2">
<span>Club Name</span>

</button>
</div>
</th>



<th scope="col"
class="px-4 py-3.5 text-sm font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400">
Contact
</th>

<th scope="col"
class="px-4 py-3.5 text-sm font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400">
Alternative
</th>

<th scope="col" class="relative py-3.5 px-4">
<span class="sr-only">Link to Join</span>
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200 dark:divide-gray-700 dark:bg-gray-900">
<tr v-for="club in club_list" :key="club['Club Name']">
<td
class="px-4 py-4 text-sm font-medium text-gray-700 dark:text-gray-200 whitespace-nowrap">
<div class="inline-flex items-center gap-x-3">

<span>{{ club['Club Name'] }}</span>
</div>
</td>

<td class="px-4 py-4 text-sm text-gray-500 dark:text-gray-300 whitespace-nowrap">
<div class="flex items-center gap-x-2">
<div>
<h2 class="text-sm font-medium text-gray-800 dark:text-white ">
{{ club['Contact Person'] }}</h2>
<p class="text-xs font-normal text-gray-600 dark:text-gray-400">
{{ club['Contact Email'] }}</p>
</div>
</div>
</td>
<td class="px-4 py-4 text-sm text-gray-500 dark:text-gray-300 whitespace-nowrap">
<div class="flex items-center gap-x-2">
<div>
<h2 class="text-sm font-medium text-gray-800 dark:text-white ">
{{ club['Alternate Contact'] }}</h2>
<p class="text-xs font-normal text-gray-600 dark:text-gray-400">
{{ club['Alternate E-mail'] }}</p>
</div>
</div>
</td>
<td class="px-4 py-4 text-sm whitespace-nowrap">
<div class="flex items-center gap-x-6">


<a :href="club['Link To Join']"
class="text-blue-500 transition-colors duration-200 hover:text-indigo-500 focus:outline-none"
target="_blank">
Join Link
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<section class="container px-4 mx-auto" v-else>
<GoogleLogin></GoogleLogin>
</section>
</body>
</template>
<script>
import NavBar from "./NavBar.vue";
import GoogleLogin from "./GoogleLogin.vue";
import axios from 'axios';
export default {
name: "ClubPage",
components: {
NavBar,
GoogleLogin,
},
data() {
return {
club_list: [],
access: null,
};
},
async mounted() {
let token = localStorage.getItem('Token');
if (token) {
try {
const url = `${this.$globalData.backendUrl}/clubs/`;
const config = {
headers: {
'Content-Type': 'application/json',
}
};
const data = {
"token": token
};
const result = await axios.post(url, data, config);
console.log(result.data.success);
this.access = result.data.success;
this.club_list = result.data.club_list;
console.log(this.club_list)
console.log(result)
} catch (error) {
console.error('Network error : ', error);
}
} else {
console.alert("Please Sign In ")
}
},
}
</script>
111 changes: 111 additions & 0 deletions src/components/GoogleLogin.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
<template>
<div class=" dark:bg-black">
<div class="flex w-full max-w-sm mx-auto overflow-hidden py-10 rounded-lg dark:bg-black lg:max-w-4xl dark:bg-black">
<div class="hidden bg-cover lg:block lg:w-1/2"
style="background-image: url('https://images.unsplash.com/photo-1606660265514-358ebbadc80d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1575&q=80');">
</div>

<div class="w-full px-6 py-8 md:px-8 lg:w-1/2">
<div class="flex justify-center mx-auto">
<img class="w-auto h-8 sm:h-10" src="../assets/sundarbans2.png" alt="">
</div>

<p class="mt-3 text-xl text-center text-gray-600 dark:text-gray-200">
Welcome back! , Sign in with your IITM Google Account to access this page.
</p>

<button @click="login"
class="flex items-center justify-center mt-4 text-gray-600 transition-colors duration-300 transform border rounded-lg dark:border-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600">
<div class="px-4 py-2">
<svg class="w-6 h-6" viewBox="0 0 40 40">
<path
d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.045 27.2142 24.3525 30 20 30C14.4775 30 10 25.5225 10 20C10 14.4775 14.4775 9.99999 20 9.99999C22.5492 9.99999 24.8683 10.9617 26.6342 12.5325L31.3483 7.81833C28.3717 5.04416 24.39 3.33333 20 3.33333C10.7958 3.33333 3.33335 10.7958 3.33335 20C3.33335 29.2042 10.7958 36.6667 20 36.6667C29.2042 36.6667 36.6667 29.2042 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z"
fill="#FFC107" />
<path
d="M5.25497 12.2425L10.7308 16.2583C12.2125 12.59 15.8008 9.99999 20 9.99999C22.5491 9.99999 24.8683 10.9617 26.6341 12.5325L31.3483 7.81833C28.3716 5.04416 24.39 3.33333 20 3.33333C13.5983 3.33333 8.04663 6.94749 5.25497 12.2425Z"
fill="#FF3D00" />
<path
d="M20 36.6667C24.305 36.6667 28.2167 35.0192 31.1742 32.34L26.0159 27.975C24.3425 29.2425 22.2625 30 20 30C15.665 30 11.9842 27.2359 10.5975 23.3784L5.16254 27.5659C7.92087 32.9634 13.5225 36.6667 20 36.6667Z"
fill="#4CAF50" />
<path
d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.7592 25.1975 27.56 26.805 26.0133 27.9758C26.0142 27.975 26.015 27.975 26.0158 27.9742L31.1742 32.3392C30.8092 32.6708 36.6667 28.3333 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z"
fill="#1976D2" />
</svg>
</div>

<span class="w-5/6 px-4 py-3 font-bold text-center">Sign in with Google</span>
</button>

</div>
</div>

</div>
</template>

<script>
import { googleSdkLoaded } from "vue3-google-login";
import axios from 'axios';
export default {
name : "GoogleLogin",
data(){
return {
userDetails: null,
};
},
methods: {
login() {
googleSdkLoaded(google => {
google.accounts.oauth2
.initCodeClient({
client_id:
"1043737632690-hogp7qi303vimd5tflakfhvduodkfjjh.apps.googleusercontent.com",
scope: "email profile openid",
redirect_uri: "https://sundarbans-website.vercel.app/",
callback: response => {
if (response.code) {
this.sendCodeToBackend(response.code);
}
}
})
.requestCode();
});
},
async sendCodeToBackend(code) {
try {
const response = await axios.post(`${this.$globalData.backendUrl}/login/`, {
'gcode': code
});
// console.log('POST request response:', response.data);
if (response.data.success === false) {
alert(response.data.error);
} else {
// console.log(response.data);
if (response && response.data) {
const userEmail = response.data.user_data.email || '';
if (userEmail.endsWith('@ds.study.iitm.ac.in')) {
this.userDetails = response.data.user_data;
localStorage.setItem('userDetails', JSON.stringify(this.userDetails));
localStorage.setItem('user-role', "User");
localStorage.setItem('Token', response.data.token);
location.reload();
} else {
// console.error('Login rejected: Invalid email domain.');
alert("Please Login using Your IIT Madras Student Google Account.");
}
} else {
console.error("Failed to fetch user details.");
}
}
} catch (error) {
// console.error('Error sending code to backend:', error);
alert('Backend Server Error');
}
},
}
}
</script>
11 changes: 10 additions & 1 deletion src/components/NavBar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,12 @@
>
Events
</router-link>
<router-link
to="/clubs"
class="text-gray-700 transition-colors duration-300 transform lg:mx-8 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
>
Clubs
</router-link>
<router-link
to="/gallery"
class="text-gray-700 transition-colors duration-300 transform lg:mx-8 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
Expand All @@ -59,7 +65,7 @@
<div class="mt-4 lg:mt-0 lg:ml-8" v-if="userDetails">
<div class="flex items-center">
<img class="w-8 h-8 rounded-full" :src="userDetails.picture" alt="User Picture">
<span class="ml-2 text-black dark:text-white md:hidden font-semibold"><router-link to="user">{{ userDetails.name }}</router-link></span>
<span class="ml-2 text-black dark:text-white font-semibold"><router-link to="user">{{ userDetails.name }}</router-link></span>
<button style="background-color: rgb(145, 4, 4); color:aliceblue;border-radius: 5px; margin: 3px; padding: 4px;" @click="signOut">Sign Out</button>
</div>
</div>
Expand Down Expand Up @@ -137,10 +143,12 @@
if (response && response.data) {
const userEmail = response.data.user_data.email || '';
const authtoken = response.data.token;
if (userEmail.endsWith('@ds.study.iitm.ac.in')) {
this.userDetails = response.data.user_data;
localStorage.setItem('userDetails', JSON.stringify(this.userDetails));
localStorage.setItem('user-role', "User");
localStorage.setItem('Token', authtoken);
location.reload();
} else {
// console.error('Login rejected: Invalid email domain.');
Expand All @@ -157,6 +165,7 @@
},
signOut() {
localStorage.removeItem('userDetails');
localStorage.removeItem('Token');
this.userDetails = null;
location.reload();
},
Expand Down
59 changes: 44 additions & 15 deletions src/components/UserPage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,23 +100,52 @@


<script>
import NavBar from './NavBar.vue'
export default{
name : 'UserPage',
components : {
NavBar
},
data() {
return {
userDetails: null,
};
},
mounted(){
const storedUserDetails = localStorage.getItem('userDetails');
import axios from 'axios';
import NavBar from './NavBar.vue';
export default {
name: 'UserPage',
components: {
NavBar
},
data() {
return {
userDetails: null,
};
},
async mounted() {
const storedUserDetails = localStorage.getItem('userDetails');
if (storedUserDetails) {
const userDetails = JSON.parse(storedUserDetails);
this.userDetails = userDetails;
let token = localStorage.getItem('Auth-Token');
let tokenValue = JSON.parse(token || null);
let authValue = 'Bearer ' + tokenValue;
try {
const url = `${this.$globalData.backendUrl}/getuser/`;
const config = {
headers: {
'Content-Type': 'application/json',
'Authorization': authValue, // Use 'Authorization' header for token
},
data:{
'token' : tokenValue
}
};
// Use axios.get instead of axios.post for fetching user details
const result = await axios.post(url, config);
// Assuming result.data contains the user details from the backend
console.log(result.data);
} catch (error) {
console.error('Error fetching user details:', error);
}
}
}
}
},
};
</script>

Loading

0 comments on commit a0528c9

Please sign in to comment.