Skip to content

Commit

Permalink
Merge pull request #106 from PhlexPlexico/local-login
Browse files Browse the repository at this point in the history
Local Login/Registrations
  • Loading branch information
PhlexPlexico authored Mar 1, 2022
2 parents 37a58fd + 441499c commit 5a45362
Show file tree
Hide file tree
Showing 8 changed files with 735 additions and 328 deletions.
20 changes: 10 additions & 10 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,22 +18,22 @@
"vuex": "^3.4.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-pwa": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/cli-plugin-babel": "~4.5.15",
"@vue/cli-plugin-eslint": "~4.5.15",
"@vue/cli-plugin-pwa": "~4.5.15",
"@vue/cli-plugin-router": "~4.5.15",
"@vue/cli-plugin-vuex": "~4.5.15",
"@vue/cli-service": "~4.5.15",
"@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint": "^6.8.0",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^6.2.2",
"prettier": "^1.19.1",
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"vue-cli-plugin-vuetify": "~2.0.7",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.3.0"
"vue-cli-plugin-vuetify": "~2.4.6",
"vue-template-compiler": "^2.6.14",
"vuetify-loader": "^1.7.3"
}
}
189 changes: 189 additions & 0 deletions src/components/LoginDialog.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,189 @@
<template>
<v-container style="padding: 0px">
<v-dialog shake v-model="show" max-width="800px">
<v-card color="lighten-4">
<v-card-title>
<span class="headline">
{{ title }}
</span>
<v-spacer></v-spacer>
<button type="button" class="close" @click="show = false">
X
</button>
</v-card-title>
<v-card-text>
<v-form ref="loginForm">
<v-card-text>
<v-container>
<v-row>
<v-col cols="12">
<v-alert
border="bottom"
color="secondary lighten-1"
dark
icon="mdi-information-outline"
v-html="$t('Login.Info')"
>
</v-alert>
</v-col>
<v-col cols="12">
<v-text-field
v-model="userInfo.steam_id"
ref="SteamId"
:label="$t('Login.SteamIdLabel')"
/>
</v-col>
<v-col cols="12" sm="12" md="12" lg="6">
<v-text-field
v-model="userInfo.username"
:label="$t('Login.UsernameLabel')"
ref="Username"
required
:rules="[
() => !!userInfo.username || $t('misc.Required')
]"
/>
</v-col>
<v-col cols="12" sm="12" md="12" lg="6">
<v-text-field
v-model="userInfo.password"
:label="$t('Login.PasswordLabel')"
ref="Password"
:append-icon="showPass ? 'mdi-eye' : 'mdi-eye-off'"
:type="showPass ? 'text' : 'password'"
:rules="[
() => !!userInfo.password || $t('misc.Required')
]"
@click:append="showPass = !showPass"
/>
</v-col>
</v-row>
</v-container>
</v-card-text>
</v-form>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="darken-1"
text
@click="userRegister"
:disabled="userLoading"
>
{{ $t("Login.Register") }}
</v-btn>
<v-btn
color="primary"
text
@click="userLogin()"
:loading="userLoading"
:disabled="userLoading"
>
{{ $t("Login.Login") }}
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-bottom-sheet v-model="responseSheet" inset persistent>
<v-sheet class="text-center" height="200px">
<v-btn
class="mt-6"
text
color="success"
@click="
responseSheet = !responseSheet;
response = '';
"
>
{{ $t("misc.Close") }}
</v-btn>
<div class="my-3">
{{ response }}
</div>
</v-sheet>
</v-bottom-sheet>
</v-container>
</template>

<script>
export default {
props: {
value: Boolean,
title: String
},
computed: {
show: {
get() {
return this.value;
},
set(value) {
if (!value) {
this.$nextTick(() => {
this.$refs.loginForm.resetValidation();
this.$refs.loginForm.reset();
});
}
this.$emit("input", value);
}
}
},
data() {
return {
showPass: false,
response: "",
responseSheet: false,
userLoading: false,
userInfo: Object
};
},
methods: {
async userLogin() {
if (this.$refs.loginForm.validate()) {
this.userLoading = true;
let userResponse;
let userObject = {
username: this.userInfo.username,
password: this.userInfo.password
};
userResponse = await this.login(userObject);
if (!userResponse.includes("Success")) {
this.response = userResponse;
this.responseSheet = true;
this.userLoading = false;
} else {
window.location.reload();
}
}
},
async userRegister() {
if (this.$refs.loginForm.validate()) {
if (!this.userInfo.steam_id) {
console.log("Failed successfully");
this.response = "Invalid Steam 64 ID. Please enter a Steam ID.";
this.responseSheet = true;
this.userLoading = false;
return;
}
this.userLoading = true;
let userResponse;
let userObject = {
username: this.userInfo.username,
password: this.userInfo.password,
steam_id: this.userInfo.steam_id
};
userResponse = await this.register(userObject);
if (!userResponse.includes("Success")) {
this.response = userResponse;
this.responseSheet = true;
this.userLoading = false;
} else {
window.location.reload();
}
}
}
},
async mounted() {
this.user = await this.IsLoggedIn();
}
};
</script>
28 changes: 26 additions & 2 deletions src/components/Navbar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,22 @@
</template>
<span>{{ $t("Navbar.Logout") }}</span>
</v-tooltip>
<v-tooltip v-else bottom>
<template v-slot:activator="{ on }">
<v-btn
v-on="on"
rounded
fab
small
color="grey darken-2"
@click="loginDialog = true"
v-if="user.id === null"
>
<v-icon>mdi-login-variant</v-icon>
</v-btn>
</template>
<span>{{ $t("Login.title") }}</span>
</v-tooltip>
<v-btn :to="'/user/' + user.id" v-if="user.id !== null" fab small>
<img :src="user.small_image" style="border-radius: 15px;" />
</v-btn>
Expand Down Expand Up @@ -96,24 +112,32 @@
</v-list-item-group>
</v-list>
</v-navigation-drawer>
<ServerDialog v-model="newDialog" :serverInfo="{}" title="New Server" />
<ServerDialog
v-model="newDialog"
:serverInfo="{}"
:title="$t('MyServers.New')"
/>
<LoginDialog v-model="loginDialog" :title="$t('Login.title')" />
</v-card>
</template>
<script>
import ServerDialog from "./ServerDialog";
import LoginDialog from "./LoginDialog";
export default {
name: "Navbar",
props: {
user: Object
},
components: {
ServerDialog
ServerDialog,
LoginDialog
},
data() {
return {
drawer: false,
group: null,
newDialog: false,
loginDialog: false,
apiUrl: process.env?.VUE_APP_G5V_API_URL || "/api"
};
},
Expand Down
Loading

0 comments on commit 5a45362

Please sign in to comment.