Skip to content

Commit

Permalink
register (#132)
Browse files Browse the repository at this point in the history
* Feature/max adding crosshair guide (#118)

* No more bboxes offset + mandatory context

* CrosshairGuide component

* Update Annotate.vue

Co-authored-by: Max <[email protected]>

* register

* update

* Update register

* update RegisterForm

* Update RegisterForm

* Update RegisterForm

* update RegisterForm

* update store by adding register method

* 🎨 Fix error message, submission, etc

* Attempt issues 120 103 (#125)

* #120 Done

* #120 improved

* Multiselect closed box offset bug fixed

Co-authored-by: Max <[email protected]>

* build(deps): bump follow-redirects from 1.13.3 to 1.14.9

Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.13.3 to 1.14.9.
- [Release notes](https://github.com/follow-redirects/follow-redirects/releases)
- [Commits](follow-redirects/follow-redirects@v1.13.3...v1.14.9)

---
updated-dependencies:
- dependency-name: follow-redirects
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

* build(deps): bump ws from 5.2.2 to 5.2.3

Bumps [ws](https://github.com/websockets/ws) from 5.2.2 to 5.2.3.
- [Release notes](https://github.com/websockets/ws/releases)
- [Commits](websockets/ws@5.2.2...5.2.3)

---
updated-dependencies:
- dependency-name: ws
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

* build(deps): bump node-fetch from 2.6.1 to 2.6.7

Bumps [node-fetch](https://github.com/node-fetch/node-fetch) from 2.6.1 to 2.6.7.
- [Release notes](https://github.com/node-fetch/node-fetch/releases)
- [Commits](node-fetch/node-fetch@v2.6.1...v2.6.7)

---
updated-dependencies:
- dependency-name: node-fetch
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

* build(deps): bump url-parse from 1.5.1 to 1.5.10

Bumps [url-parse](https://github.com/unshiftio/url-parse) from 1.5.1 to 1.5.10.
- [Release notes](https://github.com/unshiftio/url-parse/releases)
- [Commits](unshiftio/url-parse@1.5.1...1.5.10)

---
updated-dependencies:
- dependency-name: url-parse
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

* build(deps): bump minimist from 1.2.5 to 1.2.6

Bumps [minimist](https://github.com/substack/minimist) from 1.2.5 to 1.2.6.
- [Release notes](https://github.com/substack/minimist/releases)
- [Commits](https://github.com/substack/minimist/compare/1.2.5...1.2.6)

---
updated-dependencies:
- dependency-name: minimist
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

* build(deps): bump async from 2.6.3 to 2.6.4

Bumps [async](https://github.com/caolan/async) from 2.6.3 to 2.6.4.
- [Release notes](https://github.com/caolan/async/releases)
- [Changelog](https://github.com/caolan/async/blob/v2.6.4/CHANGELOG.md)
- [Commits](caolan/async@v2.6.3...v2.6.4)

---
updated-dependencies:
- dependency-name: async
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

* build(deps): bump axios from 0.21.1 to 0.21.2

Bumps [axios](https://github.com/axios/axios) from 0.21.1 to 0.21.2.
- [Release notes](https://github.com/axios/axios/releases)
- [Changelog](https://github.com/axios/axios/blob/master/CHANGELOG.md)
- [Commits](axios/axios@v0.21.1...v0.21.2)

---
updated-dependencies:
- dependency-name: axios
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <[email protected]>

* build(deps): bump tmpl from 1.0.4 to 1.0.5

Bumps [tmpl](https://github.com/daaku/nodejs-tmpl) from 1.0.4 to 1.0.5.
- [Release notes](https://github.com/daaku/nodejs-tmpl/releases)
- [Commits](https://github.com/daaku/nodejs-tmpl/commits/v1.0.5)

---
updated-dependencies:
- dependency-name: tmpl
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

* build(deps): bump postcss from 7.0.35 to 7.0.39

Bumps [postcss](https://github.com/postcss/postcss) from 7.0.35 to 7.0.39.
- [Release notes](https://github.com/postcss/postcss/releases)
- [Changelog](https://github.com/postcss/postcss/blob/7.0.39/CHANGELOG.md)
- [Commits](postcss/postcss@7.0.35...7.0.39)

---
updated-dependencies:
- dependency-name: postcss
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

* remove birthdate box from RegisterForm

* added minimum 8 characters password request in registerForm

* 🔥 Remove yarn lock, duplicate with package lock

Co-authored-by: Christopher MANEU <[email protected]>
Co-authored-by: Max <[email protected]>
Co-authored-by: JR <[email protected]>
Co-authored-by: JR <[email protected]>
Co-authored-by: Christopher MANEU <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
  • Loading branch information
7 people authored May 3, 2022
1 parent 2474b3a commit 097bb5b
Show file tree
Hide file tree
Showing 5 changed files with 351 additions and 2 deletions.
8 changes: 8 additions & 0 deletions src/components/login/LoginForm.vue
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,14 @@
Password is required
</p>
</div>
<div>
<p class="card__subtitle">
You don't have an account yet ?
<router-link to="/register" class="card__action"
>Create one here !</router-link
>
</p>
</div>
<button
type="submit"
class="btn btn-primary mt-6"
Expand Down
311 changes: 311 additions & 0 deletions src/components/register/RegisterForm.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,311 @@
<template>
<b-form v-on:submit.prevent="onSubmit" class="register">
<h1 class="field_title">Create my account</h1>
<div class="field">
<label class="field__label" for="firstname">First name</label>
<b-form-input
id="firstname"
type="text"
autocomplete
class="field__input"
aria-required="true"
aria-describedby="firstname-constraints"
@focus="resetError()"
@blur="check('firstname')"
v-model="firstname.value"
/>
<p
id="firstname-constraints"
class="field__error"
v-if="hasError('firstname')"
>
Firstname is required
</p>
</div>
<div class="field">
<label class="field__label" for="lastname">Last name</label>
<b-form-input
id="lastname"
type="text"
autocomplete
class="field__input"
aria-required="true"
aria-describedby="lastname-constraints"
@focus="resetError()"
@blur="check('lastname')"
v-model="lastname.value"
/>
<p
id="lastname-constraints"
class="field__error"
v-if="hasError('lastname')"
>
Lastname is required
</p>
</div>

<div class="field">
<label class="field__label" for="email">Email</label>
<b-form-input
id="email"
type="email"
autocomplete="username"
aria-required="true"
aria-describedby="email-constraints"
required
class="field__input"
@focus="resetError()"
@blur="check('email')"
v-model="email.value"
/>
<p
id="email-constraints"
class="field__error"
v-if="hasError('email')"
>
Email is required
</p>
</div>
<div class="field">
<label class="field__label" for="password">Password</label>
<b-form-input
id="password"
type="password"
autocomplete="current-password"
aria-describedby="password-constraints"
required
aria-required="true"
class="field__input"
@focus="resetError()"
@blur="check('password')"
v-model="password.value"
/>
<p
id="password-constraints"
class="field__error"
v-if="hasError('password')"
>
Password is required
</p>

<p
id="password-constraints"
class="field__error"
v-if="password.value.length < 8 && password.value.length > 0"
>
Password must be at least 8 characters
</p>
</div>
<div class="field">
<label class="field__label" for="confirmpassword"
>Confirm password</label
>
<b-form-input
id="confirmpassword"
type="password"
autocomplete="current-password"
aria-required="true"
aria-describedby="confirmpassword-constraints"
required
class="field__input"
@focus="resetError()"
@blur="check('confirmpassword')"
v-model="confirmpassword.value"
/>
<p
id="confirmpassword-constraints"
class="field__error"
v-if="hasError('confirmpassword')"
>
Password must be the same
</p>
</div>
<div class="field">
<b-form-checkbox
id="cgu"
v-model="cgu.value"
name="cgu"
required
unchecked-value="false"
aria-required="true"
aria-describedby="cgu-constraints"
@focus="resetError()"
@blur="check('cgu')"
>
I have read and accept the
<a
target="_blank"
class="field__action"
href="https://www.plasticorigins.eu/CGU"
>Terms of use and Privacy Policy
</a>
</b-form-checkbox>
<p id="cgu-constraints" class="field__error" v-if="hasError('cgu')">
You must accept our terms and privacy policy
</p>
</div>
<button
type="submit"
class="btn btn-primary mt-6"
v-bind:disabled="!isValid || status === 'loading'"
>
{{ status === "loading" ? "Loading" : "Register" }}
</button>
<b-card class="bg-danger mt-3" v-if="status === 'error'">
<b-card-text>An error occurred. Please try again.</b-card-text>
</b-card>
<b-card class="bg-success mt-3" v-if="status === 'fulfilled'">
<b-card-text>Logged in. Please wait...</b-card-text>
</b-card>
</b-form>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
@Component({})
export default class RegistreForm extends Vue {
data() {
return {
email: {
error: false,
value: ""
},
password: {
error: false,
value: ""
},
firstname: {
error: false,
value: ""
},
lastname: {
error: false,
value: ""
},
confirmpassword: {
error: false,
value: ""
},
cgu: {
error: false,
value: "false"
},
status: "idle"
};
}
get isValid(): boolean {
return !!(
this.$data.email.value &&
this.$data.password.value &&
this.$data.firstname.value &&
this.$data.lastname.value &&
this.$data.confirmpassword.value &&
this.$data.cgu.value === true
);
}
private hasError(
input:
| "email"
| "password"
| "firstname"
| "lastname"
| "confirmpassword"
| "cgu"
): boolean {
switch (input) {
case "cgu":
return !!(
this.$data[input].error && this.$data[input].value !== true
);
default:
return !!(this.$data[input].error && !this.$data[input].value);
}
}
private check(
input:
| "email"
| "password"
| "firstname"
| "lastname"
| "confirmpassword"
| "cgu"
) {
switch (input) {
case "confirmpassword":
if (
this.$data[input].value === "" ||
this.$data[input].value !== this.$data.password.value
) {
this.$data[input].error = true;
}
break;
case "cgu":
if (this.$data[input].value !== true) {
this.$data[input].error = true;
}
break;
default:
if (this.$data[input].value === "") {
this.$data[input].error = true;
}
break;
}
}
private resetError() {
this.$data.status = "idle";
}
private onSubmit() {
this.$data.status = "loading";
const register = this.$store.dispatch("register", {
email: this.$data.email.value,
password: this.$data.password.value,
lastname: this.$data.lastname.value,
firstname: this.$data.firstname.value,
});
register
.then((response: { data: { token: string; expires: string } }) => {
this.$store.commit("authenticate", {
token: response.data.token,
expires: response.data.expires
});
this.$data.status = "fulfilled";
setTimeout(() => {
this.$router.push("/");
}, 3000);
})
.catch(prodError => {
this.$data.status = "error";
console.error(prodError);
});
}
}
</script>

<style>
.register {
min-height: 100%;
max-width: 320px;
margin: 0 auto;
display: flex;
justify-content: center;
flex-direction: column;
}
.field {
display: block;
margin: 0 0 16px 0;
}
.field__label {
display: block;
}
.field__error {
color: var(--danger);
margin: 4px 0 0 0;
}
</style>
7 changes: 7 additions & 0 deletions src/router/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Annotate from "../views/Annotate.vue";
// import Upload from "../views/Upload.vue";
import Tutorial from "../views/Tutorial.vue";
import Login from "../views/Login.vue";
import Register from "../views/Register.vue";

Vue.use(VueRouter);

Expand All @@ -27,6 +28,12 @@ const routes = [
name: "login",
order: 1,
component: Login
},
{
path: "/register",
name: "register",
order: 1,
component: Register
}
];

Expand Down
10 changes: 8 additions & 2 deletions src/store/store.ts
Original file line number Diff line number Diff line change
Expand Up @@ -426,9 +426,15 @@ const store = new Vuex.Store({
credentials,
this.state.axiosRequestConfig
);
},
async register(context, credentials): Promise<void> {
return axios.post(
"/register",
credentials,
this.state.axiosRequestConfig
);
}
},
modules: {}
}
});

export { store, mutations };
17 changes: 17 additions & 0 deletions src/views/Register.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<template>
<RegisterForm />
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import RegisterForm from "../components/register/RegisterForm.vue";
@Component({
components: {
RegisterForm
}
})
export default class Register extends Vue {}
</script>

<style scoped></style>

0 comments on commit 097bb5b

Please sign in to comment.