webart
/
strava-frontend
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: webart:d48945604a575086e590544c846894ad0deda76f
Branches Tags
webart:master
..
compare: webart:b1480a8f1b55916f903fbaec26496e2569df89e4
Branches Tags
webart:master

No commits in common. "d48945604a575086e590544c846894ad0deda76f" and "b1480a8f1b55916f903fbaec26496e2569df89e4" have entirely different histories.
d48945604a ... b1480a8f1b

20 changed files with 181 additions and 226 deletions
Show Stats Expand all files Collapse all files

6
Dockerfile
View File

@ -10,9 +10,12 @@ ARG CURLOPT_SSL_VERIFYPEER=FALSE
LABEL version=$VERSION build=$BUILD mode=$TARGETENV
EXPOSE 80
RUN apt-get update && apt-get install -y curl ca-certificates
# RUN curl -fsSLk https://deb.nodesource.com/setup_16.x | bash -
RUN apt-get install -y nginx
RUN rm -rf /usr/share/nginx/html/
RUN mkdir -p /usr/share/nginx/html
# RUN npm install forever -g
RUN mkdir /data
WORKDIR /data
COPY package.json package-lock.json ./
@ -30,7 +33,8 @@ RUN npm run build
# служебные штуки
RUN cp -R /data/dist/* /usr/share/nginx/html
COPY nginx.conf /etc/nginx/sites-enabled/default
COPY nginx.conf /etc/nginx/conf.d/default.conf
RUN mkdir /usr/share/nginx/html/.well-known
RUN chmod +x /data/run.sh
CMD ["/data/run.sh"]

2
index.html
View File

@ -17,7 +17,7 @@
/>
<link rel="icon" href="/favicon.ico" />
<title>Cycle Rider Ala Strava for Russian/Belorussian</title>
<title>Vuestic Admin</title>
</head>
<body>
<div id="app"></div>

14
nginx.conf
View File

@ -6,9 +6,15 @@ server {
gzip_vary on;
gzip_types text/plain text/css application/json application/x-javascript application/javascript text/xml application/xml application/rss+xml text/javascript image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype;
location / {
root /usr/share/nginx/html;
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|otf|xml|txt)$ {
root /usr/share/nginx/html/browser;
try_files $uri /index.html;
}
location / {
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $http_host;
proxy_pass http://localhost:4000;
}
#error_page 404 /404.html;
@ -17,13 +23,13 @@ server {
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
root /usr/share/nginx/html;
}
# deny access to hidden files like .git etc
# concurs with nginx's one
#
location ~ /\. {
deny all;
deny all;
}
}

2
package.json
View File

@ -1,5 +1,5 @@
{
"name": "cycle-rider",
"name": "vuestic-admin",
"private": true,
"version": "3.1.0",
"scripts": {

2
run.sh
View File

@ -1,4 +1,4 @@
#!/bin/bash
nginx -g 'daemon off;'
nginx
#node /usr/share/nginx/html/server/main.js

2
src/components/navbar/components/dropdowns/ProfileDropdown.vue
View File

@ -108,7 +108,7 @@ withDefaults(
list: [
{
name: "logout",
to: "logout",
to: "login",
icon: "mso-logout",
},
],

5
src/layouts/AppLayout.vue
View File

@ -47,7 +47,6 @@
<script setup>
import { onBeforeUnmount, onMounted, ref, computed } from "vue";
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import { onBeforeRouteUpdate } from "vue-router";
import { useBreakpoint } from "vuestic-ui";
@ -78,10 +77,6 @@ const onResize = () => {
};
onMounted(() => {
const token = localStorage.getItem('token');
if (!token) {
useRouter().push({ name: "login" });
}
window.addEventListener("resize", onResize);
onResize();
});

1
src/layouts/AuthLayout.vue
View File

@ -43,5 +43,6 @@
<script lang="ts" setup>
import { useBreakpoint } from "vuestic-ui";
import VuesticLogo from "../components/VuesticLogo.vue";
const breakpoint = useBreakpoint();
</script>

2
src/main.ts
View File

@ -14,7 +14,7 @@ app.use(stores);
app.use(router);
app.use(i18n);
app.use(createVuestic({ config: vuesticGlobalConfig }));
app.provide('HOST', "https://cycle-rider.ru");
if (import.meta.env.VITE_APP_GTM_ENABLED) {
app.use(
createGtm({

61
src/pages/auth/CheckTheEmail.vue
View File

@ -1,55 +1,16 @@
<template>
<VaForm ref="passwordForm" @submit.prevent="submit">
<h1 class="font-semibold text-4xl mb-4">Авторизация по коду</h1>
<div>
<h1 class="font-semibold text-4xl mb-4">Check the email</h1>
<p class="text-base mb-4 leading-5">
Вам был выслан код, введите его и вы авторизуетесь, для смены пароля вам необходимо зайти в настройки профиля.
Password reset instructions have been sent to your email. Check your
inbox, including the spam folder if needed. For assistance,
<span class="va-link">contact support</span>.
</p>
<VaInput v-model="email" :rules="[(v) => !!v || 'Email обязательное поле']" class="mb-4" label="Введите ваш email"
type="email" />
<VaInput v-model="code" :rules="[(v) => !!v || 'Код обязательное поле']" class="mb-4" label="Введите код из письма"
type="text" />
<VaButton class="w-full mb-2" @click="submit">Авторизоваться</VaButton>
</VaForm>
<div class="flex justify-center mt-4">
<VaButton :to="{ name: 'login' }" class="w-full">Back to login</VaButton>
</div>
</div>
</template>
<script lang="ts" setup>
import { inject } from 'vue'
import axios from "axios";
import { ref } from "vue";
import { useForm, useToast } from "vuestic-ui";
import { useRouter, useRoute } from "vue-router";
const form = useForm("passwordForm");
const code = ref("");
const router = useRouter();
const HOST = inject('HOST');
const email = ref(useRoute().query.email?.toString() || "");
const { init } = useToast();
const submit = () => {
if (form.validate()) {
axios
.post(`${HOST}/api/v0/profiles/passwords/confirm/recover`, {
email: email.value,
code: code.value,
})
.then((response) => {
localStorage.setItem('token', response.data.token);
localStorage.setItem('profile', JSON.stringify(response.data.profile));
localStorage.setItem('user', JSON.stringify(response.data.user));
router.push({ name: "dashboard" }).catch((error) => { });
}).catch((error) => {
if (error.response.data.detail.code_string == "ObjectNotFound") {
init({
message: "Неверный код",
color: "error",
});
}
});
}
};
</script>
<script lang="ts" setup></script>

30
src/pages/auth/Login.vue
View File

@ -40,6 +40,11 @@
<div
class="auth-layout__options flex flex-col sm:flex-row items-start sm:items-center justify-between"
>
<VaCheckbox
v-model="formData.keepLoggedIn"
class="mb-2 sm:mb-0"
label="Запомнить меня"
/>
<RouterLink
:to="{ name: 'recover-password' }"
class="mt-2 sm:mt-0 sm:ml-1 font-semibold text-primary"
@ -55,8 +60,6 @@
</template>
<script lang="ts" setup>
import { inject } from 'vue'
import axios from "axios";
import { reactive } from "vue";
import { useRouter } from "vue-router";
@ -66,41 +69,26 @@ import { validators } from "../../services/utils";
const { validate } = useForm("form");
const { push } = useRouter();
const { init } = useToast();
const HOST = inject('HOST');
const formData = reactive({
email: "",
password: "",
keepLoggedIn: false,
});
const token = localStorage.getItem("token");
if (token != undefined && token.length > 0) {
push({ name: "dashboard" }).catch((error) => {});
}
const submit = () => {
if (validate()) {
axios
.post(`${HOST}/api/v0/signin`, {
.post("http://localhost:3000/api/v0/signin", {
login: formData.email,
password: formData.password,
})
.then((response) => {
localStorage.setItem('token', response.data.token);
localStorage.setItem('profile', JSON.stringify(response.data.profile));
localStorage.setItem('user', JSON.stringify(response.data.user));
// TODO: save token
init({ message: "Вы успешно вошли!", color: "success" });
push({ name: "dashboard" });
})
.catch((error) => {
init({
message: "Неверный логин или пароль",
color: "error",
});
});
.catch((error) => {});
}
};
</script>

10
src/pages/auth/Logout.vue
View File

@ -1,10 +0,0 @@
<template></template>
<script lang="ts" setup>
import { useRouter } from "vue-router";
const { push } = useRouter();
localStorage.clear();
useRouter().push({ name: "login" });
</script>

11
src/pages/auth/RecoverPassword.vue
View File

@ -25,8 +25,6 @@
</template>
<script lang="ts" setup>
import { inject } from 'vue'
import axios from "axios";
import { ref } from "vue";
import { useForm } from "vuestic-ui";
import { useRouter } from "vue-router";
@ -34,17 +32,10 @@ import { useRouter } from "vue-router";
const email = ref("");
const form = useForm("passwordForm");
const router = useRouter();
const HOST = inject('HOST');
const submit = () => {
if (form.validate()) {
axios
.post(`${HOST}/api/v0/profiles/passwords/require/recover`, {
email: email.value,
})
.then((response) => {
router.push({ name: "recover-password-email", query: { email: email.value } });
});
router.push({ name: "recover-password-email" });
}
};
</script>

13
src/pages/auth/Signup.vue
View File

@ -73,7 +73,6 @@
</template>
<script lang="ts" setup>
import { inject } from 'vue'
import axios from "axios";
import { reactive } from "vue";
import { useRouter } from "vue-router";
@ -82,7 +81,6 @@ import { useForm, useToast } from "vuestic-ui";
const { validate } = useForm("form");
const { push } = useRouter();
const { init } = useToast();
const HOST = inject('HOST');
const formData = reactive({
email: "",
@ -90,22 +88,15 @@ const formData = reactive({
repeatPassword: "",
});
const token = localStorage.getItem("token");
if (token != undefined && token.length > 0) {
push({ name: "dashboard" }).catch((error) => {});
}
const submit = () => {
if (validate()) {
axios
.post(`${HOST}/api/v0/signup`, {
.post("http://localhost:3000/api/v0/signin", {
email: formData.email,
password: formData.password,
})
.then((response) => {
localStorage.setItem('token', response.data.token);
localStorage.setItem('profile', JSON.stringify(response.data.profile));
localStorage.setItem('user', JSON.stringify(response.data.user));
// TODO: save token
init({
message: "Вы успешно вошли",
color: "success",

2
src/pages/preferences/Preferences.vue
View File

@ -1,5 +1,5 @@
<template>
<h1 class="page-title">Настройки профиля</h1>
<h1 class="page-title">Preferences</h1>
<div class="flex flex-col p-4 space-y-10 bg-backgroundSecondary rounded-lg">
<div class="flex space-x-5">
<PreferencesHeader />

38
src/pages/preferences/modals/EditNameModal.vue
View File

@ -8,10 +8,9 @@
close-button
@update:modelValue="emits('cancel')"
>
<h1 class="va-h5 mb-4">Изменить имя</h1>
<h1 class="va-h5 mb-4">Reset password</h1>
<VaForm ref="form" @submit.prevent="submit">
<VaInput v-model="Name" class="mb-4" label="Имя" placeholder="Имя" />
<VaInput v-model="Surname" class="mb-4" label="Фамилия" placeholder="Фамилия" />
<VaInput v-model="Name" class="mb-4" label="Name" placeholder="Name" />
<div
class="flex flex-col-reverse md:flex-row md:items-center md:justify-end md:space-x-4"
>
@ -36,10 +35,7 @@
</VaModal>
</template>
<script lang="ts" setup>
import { inject } from 'vue'
import { ref } from "vue";
import axios from "axios";
import { useUserStore } from "../../../stores/user-store";
import { buttonStyles } from "../styles";
@ -52,38 +48,14 @@ const { init } = useToast();
const emits = defineEmits(["cancel"]);
const Name = ref<string>(store.userName);
const Surname = ref<string>(store.userSurname);
const HOST = inject('HOST');
const submit = () => {
if (!Name.value && !Surname.value) {
if (!Name.value || Name.value === store.userName) {
return emits("cancel");
}
if (Surname.value === store.userSurname && Name.value === store.userName) {
return emits("cancel");
}
let dataUser = JSON.parse(localStorage.getItem("profile")!);
dataUser.first_name = Name.value;
dataUser.surname = Surname.value;
const config = {
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` }
};
axios
.patch(`${HOST}/api/v0/profiles/${store.profileID}`, {
"profile": dataUser,
}, config)
.then((response) => {
store.changeUserName(Name.value, Surname.value);
})
.catch((error) => {
init({
message: "Что-то пошло не так.",
color: "error",
});
});
init({ message: "Вы успешно изменили имя!", color: "success" });
store.changeUserName(Name.value);
init({ message: "You've successfully changed your name", color: "success" });
emits("cancel");
};
</script>

89
src/pages/preferences/modals/ResetPasswordModal.vue
View File

@ -7,27 +7,57 @@
close-button
@update:modelValue="emits('cancel')"
>
<h1 class="va-h5 mb-4">Сброс пароля</h1>
<h1 class="va-h5 mb-4">Reset password</h1>
<VaForm ref="form" class="space-y-6" @submit.prevent="submit">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<VaInput
v-model="oldPassowrd"
:rules="oldPasswordRules"
label="Old password"
placeholder="Old password"
required-mark
type="password"
/>
<div class="hidden md:block" />
<VaInput
v-model="newPassword"
:rules="newPasswordRules"
label="Новый пароль"
placeholder="Новый пароль"
label="New password"
placeholder="New password"
required-mark
type="password"
/>
<VaInput
v-model="repeatNewPassword"
:rules="repeatNewPasswordRules"
label="Повторите новый пароль"
placeholder="Повторите новый пароль"
label="Repeat new password"
placeholder="Repeat new password"
required-mark
type="password"
/>
</div>
<div class="flex flex-col space-y-2">
<div class="flex space-x-2 items-center">
<div>
<VaIcon
:name="newPassword?.length! >= 8 ? 'mso-check' : 'mso-close'"
color="secondary"
size="20px"
/>
</div>
<p>Must be at least 8 characters long</p>
</div>
<div class="flex space-x-2 items-center">
<div>
<VaIcon
:name="new Set(newPassword).size >= 6 ? 'mso-check' : 'mso-close'"
color="secondary"
size="20px"
/>
</div>
<p>Must contain at least 6 unique characters</p>
</div>
</div>
<div
class="flex flex-col-reverse md:justify-end md:flex-row md:space-x-4"
>
@ -45,64 +75,53 @@
type="submit"
@click="submit"
>
Обновить пароль</VaButton
Update Password</VaButton
>
</div>
</VaForm>
</VaModal>
</template>
<script lang="ts" setup>
import axios from "axios";
import { inject } from 'vue'
import { ref } from "vue";
import { useForm, useToast } from "vuestic-ui";
import { buttonStyles } from "../styles";
const oldPassowrd = ref<string>();
const newPassword = ref<string>();
const repeatNewPassword = ref<string>();
const HOST = inject('HOST');
const { validate } = useForm("form");
const { init } = useToast();
const emits = defineEmits(["cancel"]);
const config = {
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` }
};
const submit = () => {
if (validate()) {
axios
.put(`${HOST}/api/v0/profiles/passwords`, {
"password": newPassword.value,
}, config)
.then((response) => {
init({
message: "Вы успешно обновили пароль!",
color: "success",
});
emits("cancel");
})
.catch((error) => {
init({
message: "Что-то пошло не так.",
color: "error",
});
});
}
init({
message: "You've successfully changed your password",
color: "success",
});
emits("cancel");
}
};
const oldPasswordRules = [
(v: string) => !!v || "Old password field is required",
];
const newPasswordRules = [
(v: string) => !!v || "Поле обязательно для заполнения!"
(v: string) => !!v || "New password field is required",
(v: string) => v?.length >= 8 || "Must be at least 8 characters long",
(v: string) =>
new Set(v).size >= 6 || "Must contain at least 6 unique characters",
(v: string) => v !== oldPassowrd.value || "New password cannot be the same",
];
const repeatNewPasswordRules = [
(v: string) => !!v || "Поле обязательно для заполнения!",
(v: string) => !!v || "Repeat new password field is required",
(v: string) =>
v === newPassword.value || "Пароли не совпадают",
v === newPassword.value || "Confirm password does not match new password",
];
</script>

72
src/pages/preferences/settings/Settings.vue
View File

@ -5,7 +5,7 @@
<p class="font-bold w-[200px]">Имя</p>
<div class="flex-1">
<div class="max-w-[748px]">
{{ store.userSurname }} {{ store.userName }}
{{ store.userName }}
</div>
</div>
<VaButton
@ -45,13 +45,83 @@
</VaButton>
</div>
<VaDivider />
<div
class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-6 min-h-[36px] leading-5"
>
<p class="font-bold w-[200px]">Двуфакторная авторизация</p>
<div class="flex-1">
<div class="max-w-[748px]">
{{ twoFA.content }}
</div>
</div>
<VaButton
:style="buttonStyles"
class="w-fit h-fit"
preset="primary"
:color="twoFA.color"
@click="toggle2FA"
>
{{ twoFA.button }}
</VaButton>
</div>
<VaDivider />
<div
class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-6 min-h-[36px] leading-5"
>
<p class="font-bold w-[200px]">Email подписка</p>
<div class="flex-1">
<div class="max-w-[748px]">
<p>Чтобы управлять подписками, перейдите в</p>
<div class="flex space-x-1 w-fit">
<RouterLink
:to="{ name: 'settings' }"
class="font-semibold text-primary"
>Настройки оповещения</RouterLink
>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { computed } from "vue";
import { useToast } from "vuestic-ui/web-components";
import { useUserStore } from "../../../stores/user-store";
import { buttonStyles } from "../styles";
const store = useUserStore();
const { init } = useToast();
const toastMessage = computed(() =>
store.is2FAEnabled ? "2FA успешно включена" : "2FA успешно откючена",
);
const twoFA = computed(() => {
if (store.is2FAEnabled) {
return {
color: "danger",
button: "Disable 2FA",
content:
"Для вашей учетной записи теперь включена двухфакторная аутентификация (2FA), что повышает уровень безопасности при входе в систему",
};
} else {
return {
color: "primary",
button: "Set up 2FA",
content:
"Повысьте уровень безопасности своей учетной записи. Чтобы войти в систему, вам необходимо ввести код вместе со своим именем пользователя и паролем.",
};
}
});
const toggle2FA = () => {
store.toggle2FA();
init({ message: toastMessage.value, color: "success" });
};
const emits = defineEmits(["openNameModal", "openResetPasswordModal"]);
</script>

5
src/router/index.ts
View File

@ -74,11 +74,6 @@ const routes: Array<RouteRecordRaw> = [
path: "/auth",
component: AuthLayout,
children: [
{
name: "logout",
path: "logout",
component: () => import("../pages/auth/Logout.vue"),
},
{
name: "login",
path: "login",

38
src/stores/user-store.ts
View File

@ -2,37 +2,10 @@ import { defineStore } from "pinia";
export const useUserStore = defineStore("user", {
state: () => {
if (!localStorage.getItem("profile")) {
return {
profileID: "",
userName: "",
email: "",
memberSince: "",
pfp: "",
is2FAEnabled: false,
}
}
const dataProfile = JSON.parse(localStorage.getItem("profile")!);
const dataUser = JSON.parse(localStorage.getItem("user")!);
const dateCreate = new Date(Date.parse(dataProfile.created_at));
const yyyy = dateCreate.getFullYear().toString();
const mm = dateCreate.getMonth() + 1;
const dd = dateCreate.getDate();
let stringDD = dd.toString();
let strinMM = mm.toString();
if (dd < 10) {
stringDD = '0' + stringDD
};
if (mm < 10) {
strinMM = '0' + strinMM;
}
const formattedToday = stringDD + '/' + strinMM + '/' + yyyy;
return {
profileID: dataProfile.id || "",
userName: dataProfile.first_name || "",
userSurname: dataProfile.surname || "",
email: dataUser.email || "",
memberSince: formattedToday,
userName: "Vasili Savitski",
email: "vasili@gmail.com",
memberSince: "8/12/2020",
pfp: "https://picsum.photos/id/22/200/300",
is2FAEnabled: false,
};
@ -43,9 +16,8 @@ export const useUserStore = defineStore("user", {
this.is2FAEnabled = !this.is2FAEnabled;
},
changeUserName(userFirst: string, userSurname: string) {
this.userName = userFirst;
this.userSurname = userSurname;
changeUserName(userName: string) {
this.userName = userName;
},
},
});