Skip to content

Commit

Permalink
Develop (#7)
Browse files Browse the repository at this point in the history 
* chore: Add GitHub link to HelloWorld.vue component

* feat: Add GitHub Actions workflow to build and deploy frontend

* chore: Remove unnecessary pull_request trigger in build_backend.yml

* chore: Update build_frontend.yml to remove unnecessary pull_request trigger

* chore: Update build_frontend.yml to include environment variables for server IP, username, and password

* chore: Update build_frontend.yml to include environment variables for server IP, username, and password

* chore: Update build_frontend.yml to include environment variables for server IP, username, and password

* chore: Update build_frontend.yml to include pull_request trigger for the "build_frontend" branch

* chore: Update build_frontend.yml to include "develop" branch in push trigger

* chore: Update build_frontend.yml to fix directory path in SSH command

* chore: Update build_frontend.yml to fix directory path in SSH command

* chore: Update build_frontend.yml to fix directory path in SSH command

* chore: Update build_frontend.yml to fix directory path in SSH command

* refactor: Update HelloWorld.vue component to improve layout and styling

* refactor: Improve layout and styling of HelloWorld.vue component
  • Loading branch information
@nilgaar
nilgaar authored Jul 27, 2024
1 parent 138f419 commit b45d92f
Showing 1 changed file with 47 additions and 104 deletions.
151 changes: 47 additions & 104 deletions frontend/src/components/HelloWorld.vue
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,38 @@
<template>
<v-container class="fill-height">
<v-responsive class="align-center mx-auto" max-width="900">
<div class="text-center">
<h1 class="text-h2 font-weight-bold">🐙.☕️</h1>
<h2 class="text-h5 font-weight-light">Password Checker</h2>
<br />
<v-btn icon :href="'https://github.com/nilgaar/PassCheck'" target="_blank">
<v-icon>mdi-github</v-icon>
</v-btn>
<br />
</div>
<v-container class="fill-height" fluid>
<v-row justify="center" align="center" class="fill-height">
<v-col cols="12" sm="10" md="8" lg="6">
<v-card class="text-center pa-5" elevation="2" color="darkgrey" rounded="lg" outlined>
<div>
<h1 class="display-1 font-weight-bold">🐙.☕️</h1>
<h2 class="headline font-weight-light">Password Checker</h2>
<v-btn icon :href="'https://github.com/nilgaar/PassCheck'" target="_blank">
<v-icon>mdi-github</v-icon>
</v-btn>
</div>

<div class="py-4"></div>
<v-row>
<v-col cols="12">
<v-card class="py-4" color="surface-variant" rounded="lg" variant="outlined">
<v-col cols="12">
<v-card class="py-2" color="surface-light" rounded="lg" variant="outlined">
<div class="px-4">
<p class="text-caption">This tool is designed to enhance your security by checking if your password
has been exposed in any known breaches. By analyzing hashed versions of passwords against common
dictionaries and wordlists, it helps determine if your password is still secure.</p>
</div>
</v-card>
</v-col>
<v-divider class="my-4"></v-divider>

<v-form @submit.prevent="hashPassword">
<h2 class="text-h5 font-weight-bold px-4">Enter a password</h2>
<v-text-field v-model="password" label="Password" outlined type="password" class="px-4" required />
<v-btn color="primary" class="mt-3 mx-4" type="submit">
Check Password
</v-btn>
</v-form>
<v-overlay opacity=".12" scrim="primary" :value="true" />
<v-card outlined color="surface-light" class="mb-4">
<v-card-text>
Check if your password is present in any popular password dictionary.
By analyzing hashed versions of passwords against common dictionaries and wordlists, it helps
determine if your password is still secure.
</v-card-text>
</v-card>
</v-col>
</v-row>
<!-- List of files -->
<v-row>
<v-col cols="12">
<v-list>

<v-form @submit.prevent="hashPassword">
<v-text-field v-model="password" label="Password" outlined type="password" required></v-text-field>
<v-btn color="primary" class="mt-3" type="submit">Check Password</v-btn>
</v-form>

<v-overlay opacity=".12" scrim="primary" :value="true"></v-overlay>
</v-card>
</v-col>

<v-col cols="12" sm="10" md="8" lg="6">
<v-card class="pa-4" color="darkgrey" elevation="2" rounded="lg" outlined>
<v-list dense>
<v-subheader>Dictionaries containing the Password:</v-subheader>
<v-list-item-group v-for="file in files" :key="file">
<v-list-item>
Expand All @@ -49,12 +42,13 @@
</v-list-item>
</v-list-item-group>
</v-list>
</v-col>
</v-row>
</v-responsive>
</v-card>
</v-col>
</v-row>
</v-container>
</template>


<script setup lang="ts">
import { ref } from "vue";
import { sha3_512 } from "js-sha3";
Expand All @@ -68,87 +62,36 @@ async function hashPassword() {
fetch("https://api.checker.pops.cafe?hash=" + hashedPassword)
.then((response) => response.json())
.then((data) => {
files.value = data.data.split(', ').sort()
.map((file: string) => file.trim());
files.value = data.data.split(', ').sort().map((file: string) => file.trim());
})
.catch((error) => {
console.error("Error:", error);
});
}
</script>

<style scoped>
/* Base text styling for white appearance */
.text-caption,
.text-h5,
.headline,
p,
h1,
h2 {
h2,
.display-1 {
color: #FFFFFF;
/* White text color */
font-weight: 300;
/* Lighter font weight for readability */
}
/* Responsive text styling */
.text-caption {
padding: 0 20px;
font-size: 1.2rem;
/* Increased default font size */
.v-btn {
margin-top: 12px;
}
@media (min-width: 600px) {
.text-caption {
font-size: 1.3rem;
/* Slightly larger font size for tablets and small desktops */
}
}
/* Responsive settings for better readability */
@media (max-width: 600px) {
@media (min-width: 960px) {
.headline,
.display-1,
.text-caption {
font-size: 1.5rem;
/* Larger font size for larger screens */
}
}
/* Adjustments for other text elements for consistency */
.text-h5,
h1,
h2 {
font-size: 1.2rem;
/* Adjust base sizes for headings */
}
@media (min-width: 600px) {
.text-h5 {
font-size: 1.4rem;
/* Increase for medium screens */
}
h1 {
font-size: 2.5rem;
/* Larger for main title */
}
h2 {
font-size: 2rem;
/* Larger for secondary titles */
}
}
@media (min-width: 960px) {
.text-h5 {
font-size: 1.6rem;
/* Even larger for desktops */
}
h1 {
font-size: 3rem;
/* More prominent main title */
}
h2 {
font-size: 2.5rem;
/* More prominent secondary titles */
font-size: smaller;
}
}
</style>

0 comments on commit b45d92f

Please sign in to comment.